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.

More Related Contents:

  1. Stopping columns resizable in jqgrid
  2. Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
  3. jqgrid: how to set toolbar options based on column value in row selected
  4. Unable to position pager (navigation bar) above jqGrid
  5. Jqgrid: navigation based on the selected row
  6. Adding new row to jqGrid using modal form on client only
  7. Get all rows not filtered from jqGrid
  8. Add toolbar in the bottom of the header using jqgrid
  9. Custom jQGrid post action
  10. jqgrid: How to set cell specific css class at generation time
  11. postData not passing any parameters!
  12. How to get a jqGrid cell value when editing
  13. JQgrid checkbox onclick update database
  14. jqgrid dynamic columns and data by json [duplicate]
  15. jqGrid Not Loading Data
  16. jqGrid implementing of custom cell: integration of raty-plugin
  17. JQGrid Programmatically Select Grid Row
  18. jqGrid need a field editable on Add dialog but not Edit dialog
  19. Load local JSON data in jQgrid without AddJsonRows
  20. JQGrid – How Can We make an Custom Row Detail
  21. highlight error cell or input when validation fails in jqgrid
  22. jqGrid – format ratio field as percent value
  23. jqGrid – How to modify form_editing construction?
  24. Add multiple input elements in a custom edit type field
  25. Filtering jqGrid datetime columns using date picker just on date
  26. jqGrid Subgrid with “local” Data
  27. jqgrid change cell value and stay in edit mode
  28. jqGrid trigger “Loading…” overlay
  29. Setting data attribute on each row of a jqgrid table
  30. How to delete rows with local data in jqgrid

Leave a Comment