November 2nd, 2014

Please consider registering

Log In

Lost password?
Advanced Search

— Forum Scope —

— Match —

— Forum Options —

Minimum search word length is 4 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
Topic RSS
Add css classes to row (or cell?) from json data
New Member
Forum Posts: 1
Member Since:

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 :)

Forum Posts: 4
Member Since:

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*/);            
Forum Posts: 4
Member Since:

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
Forum Posts: 1
Member Since:


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


Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
34 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members: razia, Prankie, psky, praveen neelam,, swathi

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information