Forum
Log In
Home
Topic RSS
14:04
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 🙂
16:47
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*/);
}
}
}
},
16:49
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'
16:56
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
Most Users Ever Online: 715
Currently Online:
113 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, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
