Responsive jqGrid with bootstrap classes to the column headers

Question

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

 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 I want to hide for mobile devices. So I tried the following code that called from gridComplete event.

var applyClassesToHeaders = function (grid) {
    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);
        }
    }
};

It successfully adds the classes to the header, but unfortunately jgGrid generates a code like below

<th class="ui-state-default ui-th-column ui-th-ltr hidden-xs" role="columnheader" id="categorysummary_ComboDuration" style="width: 122px;"> Look at the style width:122px. How to get rid of this?

DEMO LINK

Solution

If you need to remove inline CSS style width you can use call like .css("width", "");, but I don't think that it's the problem which you have. I think that what you really need to do is to apply the class hidden-xs on the corresponding cell of the first row (tr.jqgfirstrow) of the grid and on the corresponding cells of every row of the column header. The function applyClassesToHeaders can be changed to the 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");     
    for (iCol = 0; iCol < colModel.length; iCol++) {
        columnInfo = colModel[iCol];
        if (columnInfo.classes) {
            for (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 the results on the modified demo http://jsfiddle.net/OlegKi/andm1299/2/

By the way, the same code works even if you use filterToolbar: see http://jsfiddle.net/OlegKi/andm1299/3/

The last remark. The above demos looks correctly, but jqGrid still work not full correctly in setGridWidth function. It "sees" not the hidden column because of the applied class as hidden. It take in consideration only the value of hidden property of colModel. So if you will find some problems in another more complex example you will have to add setting of hidden property (or the call of hideCol method). I will analyse the problem more and add the corresponding changes in free jqGrid code, but if you have to use jqGrid 4.6 than you have to follows described above steps.

UPDATED: I made the corresponding changes in the code of jqGrid in the fork "free jqGrid", which I develop since the end of 2014, short after changing the Licence agreements of jqGrid and starting Guriddo jqGrid JS. Free jqGrid have the property labelClasses together with classes. Thus to solve the problem which you describe one don't need to call any applyClassesToHeaders method. It's enough just add classes: "hidden-xs", labelClasses: "hidden-xs" properties to the corresponding columns of the grid. See the corresponding JSFiddle demo here: http://jsfiddle.net/OlegKi/andm1299/5/. I will publish today version 4.9 of free jqGrid. So the latest changes will be included in the release.

UPDATED 2: The demo http://jsfiddle.net/OlegKi/andm1299/6/ is the same as the previous one, but it uses just released free jqGrid 4.9 from CDN jsDelivr.com.

Comments

[Murali Murugesan]

This is excellent. I put them in my application and make it work. I will get back to you in case if I find any other problem. You saved a lot. Thank you!

[Oleg]

@MuraliMurugesan: See UPDATED part of my answer

[Chait]

Excellent, exactly what I was looking for! Thanks Oleg!