Adding a CSS class to a column

Question

How can you add your own class to an column within jqgrid. As I see the html input elements are getting class "FormElement". I need to add an class to a particular column. I found this http://www.trirand.com/blog/?page_id=393/help/cell-tooltip-1/#p21526, but it I am not sure whether it is the most convenient way to achieve this? I mean to go through all rows and cells and then manually change a class property - it seems to be an overhead for such "simple" task.

UPDATE

I want to add class because I want to use the functionality of this multiselect widget http://quasipartikel.at/multiselect/. This widget works through defined classes. That's why.

Pinson

Answer 1

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:

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

The demo you can find here.

Hamil

Thank you Oleg for a such comprehensive answer, I think that beforeShowForm is more appropriate in my case, because I need it only in form editing. – Pinson

@Anatoliy: You are welcome! Probably the usage of dataInit is more practicable for you: see the UPDATED part of my answer. – Hamil

Yes, it works fine. It really looks to be a shortest way to achieve this. Thanks a million! It was also great to see, that there are at least 3 ways to solve the problem. – Pinson

Answer 2

There is a classes colmodel option that does just what you need. From the jqGrid documentation:

classes

string

This option allow to add classes to the column. If more than one class will be used a space should be set. By example classes:'class1 class2' will set a class1 and class2 to every cell on that column.

In the grid css there is a predefined class ui-ellipsis which allow to attach ellipsis to a particular row. Also this will work in FireFox too.

Romeu

Thank you Justin, I did not know this option. As I said I knew that it should be something special for this. – Pinson