jqGrid how to apply extra classes to header columns

Question

I would like to apply an extra class on specific columns in, i know this is possible for the rows by specifying this in the colModel. But the classes are only applied to the columns in the "result rows" and not to the header.

What i'm trying to reach is to hide specific columns for a smaller viewport by a simple classname (for use with Twitter Bootstrap).

Answer 1

It appears that the only way to apply a class attribute to an entire column (including the header row) is to apply the colModel class entries to the headers yourself. As you mentioned, putting the value in the colModel will already apply it to the data rows, but will leave the headers unchanged.

Luckily, you can set this up so that whatever classes you're applying to the colModel specification will automatically get applied to the appropriate header columns using a single function call.

Here's an example of what that looks like:

    //Takes css classes assigned to each column in the jqGrid colModel 
    //and applies them to the associated header.
    var applyClassesToHeaders = function (grid) {
        // Use the passed in grid as context, 
        // in case we have more than one table on the page.
        var trHead = jQuery("thead:first tr", grid.hdiv);
        var colModel = grid.getGridParam("colModel");

        for (var iCol = 0; iCol < colModel.length; iCol++) {
            var columnInfo = colModel[iCol];
            if (columnInfo.class) {
                var headDiv = jQuery("th:eq(" + iCol + ") div", trHead);
                headDiv.addClass(columnInfo.class);
            }
        }
    };

    //Example grid configuration just to illustrate
    var grid = jQuery('#list');
    grid.jqGrid({
        data: myData,
        datatype: 'local',
        caption: 'Order Details',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        pager: '#pager',
        rownumbers: true,
        colNames: ['Order ID', 'Order', 'Shipment', 'Details', 'Status'],
        colModel: [
            { name: 'orderID', index: 'orderID', key:true, width: 50, 
sorttype: 'int', class: 'alwaysShow' },
            { name: 'orderDate', index: 'orderDate', width: 120, 
sorttype: 'date', formatter: 'date', class: 'alwaysShow' },
            { name: 'shipmentDate', index: 'shipmentDate', width: 120, 
sorttype: 'date', formatter: 'date', class: 'alwaysShow' },
            { name: 'productDetails', index: 'productDetails', width: 250, 
sorttype: 'string', formatter: 'string', class: 'sometimesShow'  },
            { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true, 
class: 'neverShow' }
        ]
    });

    //Applies the classes to the headers once the grid configuration is complete.
    applyClassesToHeaders(grid);

Please note that this method will apply the class attribute to the div contained inside the TH. If you need to apply to the entire TH, use "th:eq(" + iCol + ")" instead of "th:eq(" + iCol + ") div".

Thanks to Oleg for an awesome previous answer that contained a nice method for parsing through the jqGrid table headers. It was nice not to have to fiddle around to get that working just right. https://stackoverflow.com/a/3979490/2548115

Answer 2

The answer above almost works but needs some tweaking. columnInfo.class should be columnInfo.classes

    //Takes css classes assigned to each column in the jqGrid colModel 
    //and applies them to the associated header.
    var applyClassesToHeaders = function (grid) {
        // Use the passed in grid as context, 
        // in case we have more than one table on the page.
        var trHead = jQuery("thead:first tr", grid.hdiv);
        var colModel = grid.getGridParam("colModel");

        for (var iCol = 0; iCol < colModel.length; iCol++) {
            var columnInfo = colModel[iCol];
            if (columnInfo.classes) {
                var headDiv = jQuery("th:eq(" + iCol + ")", trHead);
                headDiv.addClass(columnInfo.classes);
            }
        }
    };

    //Example grid configuration just to illustrate
    var grid = jQuery('#list');
    grid.jqGrid({
        data: myData,
        datatype: 'local',
        caption: 'Order Details',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        pager: '#pager',
        rownumbers: true,
        colNames: ['Order ID', 'Order', 'Shipment', 'Details', 'Status'],
        colModel: [
            { name: 'orderID', index: 'orderID', key:true, width: 50, 
sorttype: 'int', classes: 'hidden-xs' },
            { name: 'orderDate', index: 'orderDate', width: 120, 
sorttype: 'date', formatter: 'date' },
            { name: 'shipmentDate', index: 'shipmentDate', width: 120, 
sorttype: 'date', formatter: 'date' },
            { name: 'productDetails', index: 'productDetails', width: 250, 
sorttype: 'string', formatter: 'string', classes: 'hidden-xs'  },
            { name: 'orderStatus', index: 'orderStatus', width: 50, hidden: true, 
classes: 'hidden-xs' }
        ]
    });

    //Applies the classes to the headers once the grid configuration is complete.
    applyClassesToHeaders(grid);