jQuery Grid Plugin - jqGrid - Topic: Add css classes to row (or cell?) from json data

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

Tue, 28 Sep 2010 16:56:15 +0300

Hello,

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

Félix

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

Tue, 31 Aug 2010 16:49:00 +0300

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'

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

Tue, 31 Aug 2010 16:47:23 +0300

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*/);            
            }
          } 
        }
      },

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

Wed, 25 Aug 2010 14:04:47 +0300

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 🙂