CODEWITHSUNDEEP
jqueryjqgrid
Kerberos
Kerberos

Reputation: 1266

jqGrid, setting bg color on column cells when column header is clicked

I am using jgGrid 3.8. I have an issue. I want to color the background of cells, when the column header is clicked. I mean, ascending or descending datas bg colors must be different color of other column's cells. How can I do that?

Thank you very much.

Upvotes: 0

Views: 5408

Answers (1)

Oleg
Oleg

Reputation: 221997

You can use setCell method inside of loadComplete event handle. The event loadComplete will be called after the sorted data will be loaded and after the data paging so it is a good place to change the background color of cells 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 which do this you can see live here.

UPDATED: Look at the modified demo also. The results seems look more nice as in the previous demo:

alt text

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

Upvotes: 4

Related Questions