Adding a CSS class to a column

by

Probably you need to use classes property for the corresponding column.

I am not sure that it’s what you need because you wrote about FormElement class existing in form. In the case you have to use beforeShowForm callback of the form editing for example to add class to the input field of the corresponding field of the edit form. The id of the fields in the form are the same as the name property of the corresponding column of colModel.

If you really need to add class attribute to the cells of one column you have one more possibility: defining cellattr callback for the column of colModel. The way could be practical if you need to add the class not for all cells of the column. You can test some conditions based on the row content and set the class only if the condition take place. For example the usage of classes:'ui-state-error-text ui-state-error' will set corresponding two classes (ui-state-error-text and ui-state-error) on all cells on the column. On the other side the callback function

cellattr: function(rowId, val, rawObject) {
    if (parseFloat(val) > 200) {
        return " class="ui-state-error-text ui-state-error"";
    }
}

allows you to set the class only if the cell value is higher as 200. I don’t used rawObject in the above callback and so one could remove the optional parameter. I added it in the callback only to remind you that one can use the parameter to access to the values from another columns of the row. So you can implement even more complex scenarios in cellattr.

As the result one can get the grid like on the following picture:

enter image description here

UPDATED: If you need to add class on the input field of the edit forme you can additionally usedataInit callback of editoptions. In the case the usage will be very simple. You can do for example the following:

editoptions: {
    dataInit: function (domElem) {
        $(domElem).addClass("ui-state-highlight");
    }
}

As the result you will get the edit form like

enter image description here

The demo you can find here.

Leave a Comment

tech