CODEWITHSUNDEEP
slickgrid
prakash
prakash

Reputation: 1

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

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

Upvotes: 0

Views: 2234

Answers (1)

Origineil
Origineil

Reputation: 3118

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.sstatic.net/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>

Upvotes: 3

Related Questions