How to add class for a entire column in JQGrid while selecting column

Question

I'm using JqGrid. I want to apply css class for entire column while selecting the columns. In grid the selected columns are hidden but while i exporting it exported the entire div. so if specific class applied to entire column based on that i can exclude the columns which classes are applied for.

What you mean under "selecting the columns"? Do you mean *sorting* the column? If the user clicks on the column header the data will be resorted by the column. Do you want additionally to add CSS class on the cells of the sorted column (to change the background color for example)? It's unclear for me how the selected column can be hidden. Which version of jqGrid you use and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? — Oleg, Jun 03 '16 at 08:35
hi @Oleg thanks for your comment, yes you are right, while selecting a column header i want to apply class (as u stated background for entire column). I'm using jqgrid version 4.4.4 — Thiyagarajan, Jun 03 '16 at 18:07

score 1 · Answer 1 · edited May 23 '17 at 10:29

I created the demo, which is the modification of the demo from the old answer, to demonstrate how you can use cellattr callback to set class on the sorting column. I set different classes depend on the direction of the sorting. I used the option cmTemplate to set cellattr callback in all columns of colModel.

cmTemplate: {
    cellattr: function(rowId, cellValue, rawObject, cm, rdata) {
        var p = this.p; // $(this).jqGrid("getGridParam")
        if (cm.name === p.sortname) {
            return p.sortorder === "asc" ?
                " class='gradientH1'" :
                " class='gradientH2'";
        }
    }
}

The results looks like on the picture below

Finally, I'd recommend you don't use retro versions of jqGrid like 4.4.4, which you use currently. The version is dead and you probably don't want not use zombies in your production. I'd recommend you to use free jqGrid 4.13.3. It's the fork of jqGrid, which I develop. You can use is from CDN (see the wiki article) or from npm, bower, NuGet, maven (see the readme). For example if you installed the version 4.4.4 from NuGet, then you can uninstall it and install free jqGrid package.

@Thiyagarajan: You are welcome! Is your problem solved now? – Oleg Jun 04 '16 at 19:20 — Oleg, Jun 04 '16 at 19:20

How to add class for a entire column in JQGrid while selecting column

1 Answers1