Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Adding image in the column of jqgrid

Tags:

jquery

jqgrid

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

like image 503
sahana Avatar asked Jun 05 '13 07:06

sahana


People also ask

How do I sort a column in jqGrid?

So you should do the following: $('#yourgrid'). jqGrid('setGridParam', {sortname: 'yourColumn', sortorder: 'asc'}). trigger('reloadGrid', [{page: 1}]); . Moreover you should close the quote in $('#mybutton) .

What is colModel in jqGrid?

In a nutshell, colNames defines the names of your jqGrid columns on the page, and colModel specifies options for each column (name in the dataset, width, etc). The documentation has more information: colModel Array which describes the parameters of the columns. This is the most important part of the grid.


1 Answers

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({.

like image 130
Oleg Avatar answered Oct 18 '22 04:10

Oleg