JqGrid setting bg color on column cells when column heading is clicked

Question

I am using jgGrid 3.8. I have a problem. I want to color the background of the cells when I click on the column heading. I mean that the up or down data of bg colors should be different colors from other cells in the columns. How can i do this?

Many thanks.

Answer 1

You can use setCell inside the loadComplete event handler. The loadComplete event will be raised after the sorted data is loaded and after the data has been paged , so this is a good place to change the background color of the cell based on the current sort order:

loadComplete: function() {
    var ids = grid.jqGrid('getDataIDs');
    if (ids) {
        var sortName = grid.jqGrid('getGridParam','sortname');
        var sortOrder = grid.jqGrid('getGridParam','sortorder');
        for (var i=0;i<ids.length;i++) {
            grid.jqGrid('setCell', ids[i], sortName, '', '',
                        {style:(sortOrder==='asc'?'background:aqua;':
                                                  'background:yellow;')});
        }
    }
}

A working example that you can see live here .

UPDATED . Check out the modified demo . The results look more enjoyable than in the previous demo:

It shows the gradient effect in all browsers except opera. In opera, it is the same as the previous demonstration. In another answer, I play more with color gradient effects.