Jqgrid Rowattr Not Applying Class

jqgrid rowattr not applying class

The rowattr do works correctly, but if you want that the class will be applied on selected rows too then you should change CSS rule to the following

.ui-widget-content .rowClass { color: blue;  background-image: none; }

see the demo.

Applying color to Jqgrid row

Your datatype is local. The important part here is how is defined your data field isBaseCompany . If the data field is string the condition should be done if it is json definition then you just need to compare

if (rd.isBaseCompany) { 
    // do something
}

or more strictly

if (rd.isBaseCompany === true ) { 
    // do something
}

i.e isBaseCompany is a boolean and not string

Jqgrid add class to row 'not-editable-row' not working

I suppose that you try using cell editing or form editing instead of inline editing. The class "not-editable-row" added to the row (to <tr> elements) will be used only by inline editing (see the documentation). Other editing modes just ignore the class.

By the way if you need set some classes to some rows of the grid you should better use rowattr. See the answer for more details.

Jqgrid using cellattr to toggle a class on seperate cell

First of all, it's important to understand what cellattr do. Any changes on the existing page are expensive. Thus jqGrid try to build the whole HTML fragment with the table body as one long string. Every column will be used to build the cells (<td> elements) of the corresponding columns of the grid. The callback cellattr will be called during building the cell and can be used to set attributes on the cell. The cellattr callback have to return the string. If it returns, for example, " class='status-assigned'" then the <td> will have the class (<td class='status-assigned'>...</td>).

The callback cellattr will be called before the grid will be created. Thus one can't access to the grid using $(this).jqGrid('getCell',rowId,'Status'), for example.

If you need to set class status-assigned conditionally on the cells of the column Status then you should define cellattr callback in the column Status. Inside the callback you can use rawObject.HiddenStatus or rdata.HiddenStatus. One don't need typically to create hidden columns like HiddenStatus. Instead of that, it's enough to use include all properties of input data, which one need, in additionalProperties option of jqGrid. For example, additionalProperties: ["HiddenStatus"].

Your original code could be modified to the following:

{
    name: 'Status', width: 70,
    cellattr: function (rowId, cellValue, item) {
        if (item.HiddenStatus === "Assigned") {
            return " class='status-assigned'";
        }
    }
}

See the old answer for an example of usage cellattr.

jqGrid custom format fails on addClass

You made the typical error of the usage of the custom formatter. It is important to understand that the jqGrid has the best performance if the grid contain will be created as the string. In the case the gridview:true gives you the performance. Any custom formatter should work in the gridview:true mode, so the custom formater has no parameter which are DOM element and so you can not use operations like $(el).addClass("Fail");

In some old answers (see here and here) you can find how the problem can be solved, but I would you suggest to use new feature of jqGrid 4.0.0: cellattr option. For undefrstanding: the purpose of the custom formatter is not add some HTML attributes like class for example. It should be used for example to convert some universal date format like yyyy-mm-dd to localized form like dd.mm.yyyy (German style). If you don't want to change format of the column, but want only add some attributes like title (used for tooltips), class (like in your case), style and so on the new cellattr option is what you need.

In you case you can define

cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
    if (cellValue==0) {
        return ' class="Fail"';
    }
}

See a small demo here:

In the demo I added calsses ui-state-error and ui-state-error-text to all cells of 'Client' column where in the 'Closed' the checkbox is set.

jqGrid : How to add CSS class for a row with specific criteria

You should use rowattr which informs jqGrid which additional attributes (class, title, style and so on) should be assigned to the rows of the grid during generating the rows. An example of the callback is the following

rowattr: function (item) {
    if (item.Age >= 80) {
        return { "class": "table-danger" };
    } else if (70 <= item.Age && item.Age < 80) {
        return { "class": "table-warning" };
    } else if (60 <= item.Age && item.Age < 70) {
        return { "class": "table-info" };
    }            
}

See the old answer for a code example.

---

Related Topics