0

I am trying to implement "text and image in same cell by using slick grid". I have not found any answer for my requirement. Can anyone answer my question...?

prakash
  • 1
  • 2

1 Answers1

3

Cell customizations are generally handled via formatters.

Beware that the row height can be set via grid options, but will be static, so if the images are to vary in size you'll need some heavy render customizations or perhaps a different grid framework.

 
var grid;
var data = [{id: 1, src: 'https://i.stack.imgur.com/Cj07W.jpg?s=128&g=1', txt: 'Some text' }, {id: 2, src: 'https://www.gravatar.com/avatar/4a7ca5a83afc1e7a43bf518ccaa3c9be?s=128&d=identicon&r=PG&f=1', txt: 'Some different text' }];
var columns = [
    {id: "id", name: "rowId", field: "id"},
    {id: "img", name: "Image", field: "src", formatter: function(args){  return "<span>"+data[args].txt+"</span><br/><img src ='" + data[args].src + "'></img>" }}
];

var options = {
    enableCellNavigation: true,
    forceFitColumns: true,
    rowHeight: 175    
};

grid = new Slick.Grid("#myGrid", data, columns, options);
 <link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
 <link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>

<script src='http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js'></script>
<script src='http://mleibman.github.io/SlickGrid/slick.core.js'></script>
<script src='http://mleibman.github.io/SlickGrid/slick.grid.js'></script>
<script src='http://mleibman.github.io/SlickGrid/slick.formatters.js'></script>
 
<div id="myGrid" style="width:600px;height:500px;"></div>
Community
  • 1
  • 1
Origineil
  • 3,108
  • 2
  • 12
  • 17
  • I found one example http://mleibman.github.io/SlickGrid/examples/example-plugin-headerbuttons.html In this example when my mouse pointing over the 2nd column header , it is showing "help image"... In the same way... my requirement is, I need same behavior in 2nd column cells .. is it possible....? – prakash Jan 20 '15 at 07:26
  • You should update/edit the original question with this additional information as it is a completely different context from my interpretation of the question asked. You should be able to accomplish anything in a "body" cell that is seen in a header cell, but with much more implementation required on your part since the header cell functionality is already implemented and provided via a plugin. – Origineil Jan 20 '15 at 16:00