jqgrid: How to set cell specific css class at generation time

by

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.

More Related Contents:

  1. Stopping columns resizable in jqgrid
  2. how to persist current row in jqgrid
  3. Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
  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. JqGrid with autocompletion cant parse data from controller to view
  9. jqGrid client-side searching
  10. Add toolbar in the bottom of the header using jqgrid
  11. How to get a jqGrid cell value when editing
  12. Jqgrid Tree View Adjacencey
  13. JQgrid checkbox onclick update database
  14. jqgrid dynamic columns and data by json [duplicate]
  15. Hide expand/collapse symbol or deactivate spec. rows in jqGrid subgrid
  16. JQGrid Programmatically Select Grid Row
  17. jqGrid need a field editable on Add dialog but not Edit dialog
  18. Load local JSON data in jQgrid without AddJsonRows
  19. Real-time data in a grid – better method
  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. Is it possible to modify the colModel after data has loaded with jqgrid?
  24. jqGrid – How to modify form_editing construction?
  25. Add multiple input elements in a custom edit type field
  26. jqGrid Subgrid with “local” Data
  27. jqgrid change cell value and stay in edit mode
  28. jqGrid Pager Area – Using Font Awesome Icons
  29. jqGrid DatePicker filtering without hitting Enter key
  30. Setting data attribute on each row of a jqgrid table

Leave a Comment