title: Responsive jqGrid with bootstrap classes to the column headers
body: <p>I have the below simple jQGrid. All I need is responsive table with some columns hidden in mobile view using bootstrap helper classes such as hidden-xs</p>
  
  <pre><code> 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
  </code></pre>
  
  <p>The column ComboDuration I want to hide for mobile devices. So I tried the following code that called from gridComplete event. </p>
  
  <pre><code>var applyClassesToHeaders = function (grid) {
      var trHead = jQuery("thead:first tr", grid.hdiv);
      var colModel = grid.getGridParam("colModel");    
      for (var iCol = 0; iCol &lt; colModel.length; iCol++) {
          var columnInfo = colModel[iCol];
          if (columnInfo.classes) {
              var headDiv = jQuery("th:eq(" + iCol + ")", trHead);            
              headDiv.addClass(columnInfo.classes);
          }
      }
  };
  </code></pre>
  
  <p>It successfully adds the classes to the header, but unfortunately jgGrid generates a code like below</p>
  
  <p><code>&lt;th class="ui-state-default ui-th-column ui-th-ltr hidden-xs" role="columnheader" id="categorysummary_ComboDuration" style="width: 122px;"&gt;</code> Look at the style width:122px. How to get rid of this?</p>
  
  <p><strong><a href="http://plnkr.co/edit/glYfyqGoB3k8KTd4CVkk?p=preview" rel="nofollow">DEMO LINK</a></strong></p>