Adding image in the column of jqgrid

Question

I want to display a small image in the first column of jqgrid for all data I get from DB.

jquery("#tableName").jqgrid({
.....
colNames : ['', ''],
colModel : [{
    width : '25%',
    },{
    name : 'someValue',
    index : 'somevalue',
    widht : '75%',
    sorttype: 'text'
}]
});

I want to add an image in the first colmodel. i tried formatter, but not sure about cellvalue, row object, options. Any help would be appreciated.

I did something like this for image

function imageFormat( cellvalue, options, rowObject ){
        return '<img src="'+cellvalue+'" />';
    }

Where should i give the image src ? how to mention the imageformat in the colmodel ?

Thanks

Solution

If you need to set image in for example the first column of the grid you can define the grid

$("#tableName").jqGrid({
    .....
    colNames: ['', ''],
    colModel: [
        {
            name: 'someUniqueColumnName',
            width: 25,
            fixed: true,
            formatter: function () {
                return "<img src='http://myserver/path/i.jpg' alt='my image' />";
            }
        },
        {
            name: 'someValue',
            width: 123 // width of column in pixel
        }
    ],
    ...
});

The formatter need just return a string which is HTML fragment which need be placed in the column. Because all parameters in JavaScript are optional and we need no then we can define formatter as function without parameters. The property width is the size of column in pixel. If you use other jqGrid options like autowidth: true or specify the whole width of the grid with respect of width option (and if you don't use shrinkToFit: false option) then jqGrid will scale the column width based on the value of width property of the column in colModel. To have no scaling of the column with the image I included fixed: true property additionally.

Some common remark: you should be careful with case of names in JavaScript. For example the first line of code which you posted (jquery("#tableName").jqgrid({) should be replaced with jQuery("#tableName").jqGrid({.

Comments

[Sajith]

@Oleg, How do i image bind dynamic content for eg: collection of image in to the folder

[Oleg]

@Sajith: custom formatter have assess to the full information for the row of data by the 3-d parameter (rowObject). It allows to extend the information returned from the server for every row with additional dynamic information, for example, URL of the image, tooltip (the value of title attribute) and so on.