2

I am building a jqgrid that needs different background (or in general, a different css class) value for specific cells. I know which cells need the class applied at generation time of the data being sent down to jqgrid. What I would like is to be able to indicate a class within the jqgrid rows structure for each specific cell:

<rows>
  <page> </page>
  <total> </total>
  <records> </records>
    <row>
      <cell>1.00</cell>
      <cell class='errorClass'>15.00</cell>
      <cell class='warningClass'>9.00</cell>
        …
    </row>
    <row>
      <cell>1.00</cell>
      <cell>2.00</cell>
      <cell>1.15</cell>
        …
    </row>
      …
</rows>

I know I can do this formatting after the data is sent down, but I would like to see the grid drawn with the formatting in place rather than after the fact.

I've achieved something like what I want by setting using a tag within the cell:

<cell><span class='warningClass'>3.00</span></cell>

But it does not set the class for the entire cell, just data within, with only the text highlighted and not the entire cell.

Bill Pfeiffer
  • 774
  • 5
  • 20
  • Why is it necessary to do it while the data is rendered instead of after the fact? Unfortunately, I don't think jqGrid has anything built in to set styling at generation time, at least, not in my experience with it. I've always done it after the fact. – Cᴏʀʏ Nov 05 '11 at 17:49
  • What if I want to change of the css for the add/edit form of jqgrid ? – Bhavik Ambani Aug 13 '12 at 06:04

2 Answers2

4

I ind your question interesting so I made the demo for you.

enter image description here

If you want to set some custom attributes on the grid cells (<td> elements) like class, title, colspan, style the cellattr is the best way to do this (see here for details). cellattr are close to custom formatter feature, but allows to define attributes of the cell and not the cell contain.

In the demo I used the following XML input:

<?xml version='1.0' encoding='utf-8'?>
<rows>
<page>1</page><total>1</total><records>2</records>
    <row id='13'>
        <cell>1.00</cell>
        <cell class='ui-state-error'>15.00</cell>
        <cell>9.00</cell>
    </row>
    <row id='12'>
        <cell>1.00</cell>
        <cell>2.00</cell>
        <cell class='ui-state-highlight'>1.15</cell>
    </row>
</rows>

and the cellattr like the following

cellattr: function () {
    var c = $('cell:eq(1)', arguments[2]).attr('class');
    return c ? " class='" + c + "'": "";
}

In the case the 'class' attribute of the second (':eq(1)') cell will be used for the formatting.

From the design point of view I would recommend you don't use the class names directly as the attributes. An alternate attribute like format="error" which will be converted as class='ui-state-error' have some advantages. It could make separation of information like formatting tips from direct HTML instruction.

Community
  • 1
  • 1
Oleg
  • 217,934
  • 30
  • 386
  • 757
  • Thanks for the answer. My problem involved a dynamically created column model so I had to figure a way to attach the cellattr functions to the json column model. The real problem that your solution posed for my situation was how to determine which column number to use to return the class. I ended up comparing the cm.name parameter against my json list of col model items and using the found index of the list to determine the value for 'cell:eq(n)'. Oh, and I had to upgrade to jqgrid 4.x. That killed some time for me too. – Bill Pfeiffer Nov 06 '11 at 16:08
  • @BillPfeiffer: OK, I understand. I modified the demo: see [here](http://www.ok-soft-gmbh.com/jqGrid/XmlCellAttr1.htm). You should be careful in the usage of `findColModelInList` which you posted. There are no `for each` loop. You should use at least `for (var modelItem in modelList)`. One more advice: you should don't use `for-in` JavaScript loop if it is *really* required. Much more effective to enumerate arrays with simple `for` loop. – Oleg Nov 06 '11 at 21:20
  • @Oleg Nice! it will be gr eatif you can extend it to add cell highlighted functionality. is there anyway we can specify highlighted color for the cell (or may be entire coloumn) on focus ? – Deb Jul 25 '12 at 13:59
  • @Deb: If I understand correct your question you can use the idea from [the demo](http://www.ok-soft-gmbh.com/jqGrid/CellColorWithHoverAndSelect.htm) which I made for [the answer](http://stackoverflow.com/a/4960622/315935). The demo works on hovering other as [the demo](http://www.ok-soft-gmbh.com/jqGrid/CellColor.htm) from [the answer](http://stackoverflow.com/a/4943722/315935). – Oleg Jul 25 '12 at 20:39
0

Using Oleg's answer I put together and tested the following for my situation using a dynamically created colModel (colM):

for each (var colModelItem in colM)
{
   colModelItem.cellattr = function (rowId, val, rawObject, cm, rdata){
      var pos = findColModelInList(cm, colM);
      var srchText = 'cell:eq(' + pos + ')';
      var c = jQuery(srchText, arguments[2]).attr('class');
      return c ? " class='" + c + "'": "";
   };
}

where 

function findColModelInList(colModel, modelList)
{
    var index = 0;
    var retval = -1;
    for each (var modelItem in modelList)
    {
        if (modelItem.name == colModel.name)
        {
            retval = index;
        }
        index++;
    }
    return retval;
}
Bill Pfeiffer
  • 774
  • 5
  • 20