Forum

May 22nd, 2014
A A A

Please consider registering
guest

Log In Register

Register | Lost password?
Advanced Search

— Forum Scope —

  

— Match —

   

— Forum Options —

    

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

Topic RSS
Add css classes to row (or cell?) from json data
25/08/2010
14:04
Skaffen
New Member
Forum Posts: 1
Member Since:
25/08/2010
Offline

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

31/08/2010
16:47
adamovic
Member
Forum Posts: 4
Member Since:
31/08/2010
Offline

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*/);            
            }
          } 
        }
      },
31/08/2010
16:49
adamovic
Member
Forum Posts: 4
Member Since:
31/08/2010
Offline

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'

28/09/2010
16:56
feliccio
Montréal
New Member
Forum Posts: 1
Member Since:
28/09/2010
Offline

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

Forum Timezone: Europe/Sofia

Most Users Ever Online: 215

Currently Online:
64 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1231

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11281

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10484

Posts: 30999

Newest Members: kefeoglu, davsha77, Elizabeth_Keen, jqgriddeveloper, Peter, tbass77

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

Administrators: admin: 61

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information