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

Kapp

Could you add some test data to the question? In the case one will have full demo and I will try modify it. It's important to know which fork of jqGrid and in which version you use? – Fading

@Oleg, Sure. I am working on fiddle. I used ` jqGrid 4.6.0` – Kapp

@Oleg, Somehow made it to hide. But still it is not looking good. Check the fiddle link and preview in full window in chrome and resize to mobile view – Kapp

@Oleg, seems like jqgfirstrow sets the width and gives the blank space for the cells as well – Kapp

I'm back now. Yes the reason is the requirement to apply 'hidden-xs' calsses to the corresponding column of jqgfirstrow, the corresponding <th> of the header (like you do inside of applyClassesToHeaders). The same class needed be set to the column of filterToolbar too, if you use it of cause. I will look in your demo and write later my answer. – Fading

I have to go away for some time, but the code could be something like jsfiddle.net/OlegKi/andm1299. I will write my answer later. – Fading

Answer 1

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.

Fading

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! – Kapp

@MuraliMurugesan: See UPDATED part of my answer – Fading

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