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 < 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'], 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. applyClassesToHeaders(grid); </code>
Happy to share!