Apply new class to jqGrid column

on with Leave a reply

I had a situation to add hide some of the jqGrid table columns for mobile view. So I decide to apply bootstrap class to the specific columns. For checking the docs of jqGrid. I realised there is a way to add class the table column by ‘classes’ property. But it is not reflected in the table headers. So these answers from stack overflow was really helpful.

<code>    //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 <code>colModel</code> = <code>grid</code>.jqGrid("getGridParam", "colModel");

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

    //Example grid configuration just to illustrate
    var grid = jQuery('#list');
        data: myData,
        datatype: 'local',
        caption: 'Order Details',
        height: 'auto',
        gridview: true,
        rownumbers: true,
        viewrecords: true,
        pager: '#pager',
        rownumbers: true,
        colNames: ['Order ID', 'Order'],
        colModel: [
            { name: 'orderID', index: 'orderID', classes: 'hide-phone' },
            { name: 'orderDate', index: 'orderDate', classes: '<code>hide-phone</code>' },        

    //Applies the classes to the headers once the grid configuration is complete.

Happy to share!



Posted on by .

About Gowri

I am professional web developer with 8+ years experience. PHP, jQuery, WordPress, Angular and Ionic are my key skills in web development. I am working with strong enthusiastic team with spirit. We provide all web related solution like HTML/CSS development, Web graphic design and Logo.

Leave a Reply

Your email address will not be published. Required fields are marked *