How can i add image with text in "slickgrid" cell? - slickgrid

Question

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...?

Answer 1

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: 'http://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>