jquery - Responsive jqGrid with bootstrap classes to the column headers -

i have below simple jqgrid. need responsive table columns hidden in mobile view using bootstrap helper classes such hidden-xs

 var gridinfojson = json.parse($('#hdn-categorysummary').val());     var catgrid= jquery("#categorysummary").jqgrid({         url: '/category/getcategories/',         datatype: 'json',         mtype: 'post',          colnames: ["id", "active", "name", "duration"],         colmodel: [         { name: 'id', index: 'id', hidden: true },         { name: 'isactive', index: 'isactive', align: 'center', formatter: activecheckboxformatter, sortable: false,classes:'col-sm-1' },         { name: 'categoryname', index: 'categoryname', formatter: generatecategorynamelink, sortable: false },          { name: 'comboduration', index: 'comboduration', classes:'hidden-xs' , align: 'center', sortable: false }                ],         jsonreader: {             id: 'id',             repeatitems: false         },          height: "100%",         width: "100%",         rownumbers: true,         rownum: 1000,         sortname: 'id',         caption: 'bookingcategories',         loadcomplete: function () {             var table = this;             settimeout(function () {                 updatepagericons(table);                 var targetwidth = $(".page-content").width() - 20;                 $('#categorysummary').jqgrid('setgridwidth', targetwidth);                 $('#categorysummary').parents('div.ui-jqgrid-bdiv:first').width(targetwidth + 1);             }, 0);         },         gridcomplete:function(){           applyclassestoheaders(catgrid);         },         sortorder: 'asc',         viewrecords: true 

the column comboduration want hide mobile devices. tried following code called gridcomplete event.

var applyclassestoheaders = function (grid) {     var trhead = jquery("thead:first tr", grid.hdiv);     var colmodel = grid.getgridparam("colmodel");         (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);         }     } }; 

it adds classes header, unfortunately jggrid generates code below

<th class="ui-state-default ui-th-column ui-th-ltr hidden-xs" role="columnheader" id="categorysummary_comboduration" style="width: 122px;"> @ style width:122px. how rid of this?

demo link

if need remove inline css style width can use call .css("width", "");, don't think it's problem have. think need apply class hidden-xs on corresponding cell of first row (tr.jqgfirstrow) of grid , on corresponding cells of every row of column header. function applyclassestoheaders can changed following:

function applyclassestoheaders(table) {     var columninfo, icol, irow,         htable = $(table.grid.hdiv).find("table.ui-jqgrid-htable")[0],         firstrow = table.rows[0];         colmodel = $(table).jqgrid("getgridparam", "colmodel");          (icol = 0; icol < colmodel.length; icol++) {         columninfo = colmodel[icol];         if (columninfo.classes) {             (irow = 0; irow < htable.rows.length; irow++) {                 $(htable.rows[irow].cells[icol]).addclass(columninfo.classes);             }             $(firstrow.cells[icol]).addclass(columninfo.classes);         }     } }  applyclassestoheaders($grid[0]); 

you can see results on modified demo http://jsfiddle.net/olegki/andm1299/2/

by way, same code works if use filtertoolbar: see http://jsfiddle.net/olegki/andm1299/3/

the last remark. above demos looks correctly, jqgrid still work not full correctly in setgridwidth function. "sees" not hidden column because of applied class hidden. take in consideration value of hidden property of colmodel. if find problems in more complex example have add setting of hidden property (or call of hidecol method). analyse problem more , add corresponding changes in free jqgrid code, if have use jqgrid 4.6 have follows described above steps.

updated: made corresponding changes in code of jqgrid in fork "free jqgrid", develop since end of 2014, short after changing licence agreements of jqgrid , starting guriddo jqgrid js. free jqgrid have property labelclasses classes. solve problem describe 1 don't need call applyclassestoheaders method. it's enough add classes: "hidden-xs", labelclasses: "hidden-xs" properties corresponding columns of grid. see corresponding jsfiddle demo here: http://jsfiddle.net/olegki/andm1299/5/. publish today version 4.9 of free jqgrid. latest changes included in release.

updated 2: demo http://jsfiddle.net/olegki/andm1299/6/ same previous one, uses released free jqgrid 4.9 cdn jsdelivr.com.