Blogs

In this post we will render the first Grid Column with images.

The first step is to create an array of objects. The Image column contains the image names.

var movies = new Array();
movies[0] = { Image: 'avatar.png', Title: 'Avatar', Year: 2009 };
movies[1] = { Image: 'priest.png', Title: 'Priest', Year: 2006 };
movies[2] = { Image: 'endgame.png', Title: 'End Game', Year: 2006 };
movies[3] = { Image: 'unknown.png', Title: 'Unknown', Year: 2011 };
movies[4] = { Image: 'unstoppable.png', Title: 'Unstoppable', Year: 2010 };
movies[5] = { Image: 'twilight.png', Title: 'Twilight', Year: 2008 };
movies[6] = { Image: 'kungfupanda.png', Title: 'Kung Fu Panda', Year: 2008 };
movies[7] = { Image: 'knockout.png', Title: 'Knockout', Year: 2011 };
movies[8] = { Image: 'theplane.png', Title: 'The Plane', Year: 2010 };
movies[9] = { Image: 'bigdaddy.png', Title: 'Big Daddy', Year: 1999 };

Next, populate the Grid with the movies Array. Set the cellsrenderer property of the first column to point to a function called imagerenderer.

var source = { localdata: movies, datatype: "array" };
// Create jqxGrid.
$("#jqxgrid").jqxGrid(
{
	width: 400,
	height: 300,
	source: source,
	theme: theme,
	columns: [
	  { text: 'Image', datafield: 'Image', width: 60, cellsrenderer: imagerenderer },
	  { text: 'Title', datafield: 'Title', width: 200 },
	  { text: 'Year', datafield: 'Year' }
   ]
});

Implement the imagerenderer function. The function returns a html string with img tag. The image’s src depends on the rendered cell’s value.

var imagerenderer = function (row, datafield, value) {
   return '<img style="margin-left: 5px;" height="60" width="50" src="../../images/' + value + '"/>';
}

As the images height is equal to 60px, we set the height of the Grid rows to 60px, too.

for (m = 0; m < 10; m++) {
   $("#jqxgrid").jqxGrid('setrowheight', m, 60);
}

Here’s the result: