July 10th, 2011
You must be logged in to post Login Register

Search Forums:


Add css classes to row (or cell?) from json data




New Member

posts 1

When working with grids of data I sometimes find it useful to be able to set a class on a row based on the data (e.g. showing a list of entries where some are flagged as deleted, set a class on the row of "deleteditem" such that a strike-through style can be applied to those rows) or a class on a cell based on the data (e.g. a date column of due date where the date is overdue then set a class on the cell of "itemoverdue" such that the cell text becomes red).

It does seem easy to do the row thing with jqGrid – about the only way I can see is to hook in a custom formatter on the cell which then modifies parent row's class, which seems an unnecessary faff. To set a css class on the cell would require a similar thing, however since HTML can be specified as cell data that can be worked around by just putting a div or span with a class into the celldata which wraps the string to show.

Anyways, for setting a row class ideally the json data structure would allow each row to optionally define e.g.:

  rowcssclass : 'deleteditem',

If making it possible to also set css classes directly on cells based on the data, maybe also allow each row to have:

  cellcssclasses : ['','','','itemoverdue']

Or if using repeatitems set to false then maybe cellcssclasses could be an object keyed by column name, e.g.:

  cellcssclasses : {'duedate':'itemoverdue'}

Having such a facillity would make it easy to also do things like add icons to cells simply by using css classes which set the background image of the cell without having to insert html into the cell. Possibly I haven't put forward the best way of allowing it to be specified in the json data, but you get the idea about what I'm after :)




posts 4

This is something it seems we'll need (even more complicated binded with more features), you can use gridComplete to change CSS of rows/cellscurrently after the grid is rendered.

To change row CSS you could use something like :

            jQuery('#list_fundAlloc').jqGrid('setRowData', false, 'jqgrid-delete');

And to change CSS of a cell  :

 jQuery('#list_fundAlloc').setCell(id, name, ''  /* content will not change*/, 'jqgrid-editted' /* new class*/);            

      gridComplete: function(){
        ids = jQuery("#list_fundAlloc").jqGrid('getDataIDs');
        for(var i=0;i < ids.length;i++){
          var cl = ids[i];
          // cl = 'ACCCODES'
          if (rowDelets_fundAlloc[cl] != undefined) {
            //var ret = jQuery('#list_books').jqGrid('getRowData',cl);
            jQuery('#list_fundAlloc').jqGrid('setRowData', false, 'jqgrid-delete');
          if (rowAdds_fundAlloc[cl] != undefined) {
            jQuery('#list_fundAlloc').jqGrid('setRowData', false, 'jqgrid-new');
          var edits = cellEdits_fundAlloc[cl];
          if (edits != undefined) {
            for (var name in edits) {
              jQuery('#list_fundAlloc').setCell(id, name, ''  /* content will not change*/, 'jqgrid-editted' /* new class*/);            




posts 4

However, I also think that we might need a custom CSS for each cell and formatter shall not be used for it (because it clashes with some other stuff, like in my case).

So one vote more for a new feature, something like cssUrl : 'someUrl'




New Member

posts 1


Can you please explain it a little more… I cant make it work.

Where the arrays "rowDelets_fundAlloc" and "rowAdds_fundAlloc" come from? I took your code and replaced "#list_fundAlloc" with my grid id. Is there other things I have to replace?

Thanks a lot


About the jQuery Grid Plugin – jqGrid forum

Most Users Ever Online:


Currently Online:

69 Guests

Forum Stats:

Groups: 1

Forums: 7

Topics: 10271

Posts: 30349


There are 11036 Members

There have been 448 Guests

There is 1 Admin

There are 2 Moderators

Top Posters:

OlegK – 1210

markw65 – 179

kobruleht – 144

phicarre – 132

YamilBracho – 124

Renso – 118

Administrators: admin (60 Posts)

Moderators: tony (7375 Posts), Rumen[Trirand] (81 Posts)

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information