0

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.

pb2q
  • 58,613
  • 19
  • 146
  • 147
Kerberos
  • 1,228
  • 6
  • 24
  • 48

1 Answers1

4

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • @Kerberos: I made some experiments with gradient effect and remember about the example which I made for you before. Look at the modified demo. It could be interesting for you. – Oleg Nov 10 '10 at 17:57