0

I am trying to apply background color for headers in jqgridusing the following code:

$("#" + gridId).jqGrid("setLabel", "Action", "Website", { "background": "red" });

Its working, however if the column's frozen, it's not working. Please help.

Rustin Cohle
  • 161
  • 1
  • 1
  • 12
  • check this out: http://stackoverflow.com/questions/31760966/how-can-i-change-style-in-jqgrid-frozen-columns – JustLearning Mar 15 '16 at 06:49
  • You can use `labelClasses` if you use [free jqGrid](https://github.com/free-jqgrid/jqGrid) fork of jqGrid. See [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/alignLabel.htm). – Oleg Mar 15 '16 at 07:59
  • @Oleg I am not using free-jqgrid. My version is 4.6.0. – Rustin Cohle Mar 15 '16 at 08:02
  • @oleg I was trying to use your columnchooser, i couldnt get the design, should I include any plugin? – Rustin Cohle Mar 15 '16 at 08:04

1 Answers1

1

Frozen columns implementation is buggy in jqGrid 4.6.0. The most easy way to implement your requirements: upgrade to free jqGrid 4.13.1 and to use labelClasses property of colModel (see the demo). Setting of CSS on the column header will be the smallest problem. Free jqGrid is provided under the same licenses (MIT/GPLv2) like jqGrid 4.6.

Only if you really can't update to free jqGrid currently then you will have to set the CS style of the column headers manually. The corresponding code could be like

var $grid = $("#" + gridId);
$($grid[0].grid.hDiv)
    .find("tr.ui-jqgrid-labels th")
    .eq(pos)
    .add(
        $($grid[0].grid.fhDiv)
            .find("tr.ui-jqgrid-labels th")
            .eq(pos))
    .css({ background: "red" });

where pos is the index of the column.

To use columnChooser you should include ui.multiselect.css, jquery-ui.min.js and ui.multiselect.js. You will find ui.multiselect.* in plugins subdirectory of jqGrid.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks. Is there a way to find these files in NuGet? – Rustin Cohle Mar 15 '16 at 09:45
  • @RustinCohle: You are welcome! I published free jqGrid of NuGet too of cause. See https://www.nuget.org/packages/free-jqGrid/4.13.1. [The readme](https://github.com/free-jqgrid/jqGrid/blob/master/README.md) provided other sources where you can get free jqGrid: [npm](https://www.npmjs.com/package/free-jqgrid) [bower](http://bower.io/search/?q=free-jqgrid) and so on. The recommended way is CDN like [cdnjs](https://cdnjs.com/libraries/free-jqgrid). The clients will load the files the mostly effectively and will hold in the cache of web browsers permanently. – Oleg Mar 15 '16 at 09:58
  • @RustinCohle: You can use local files only for fallback scenario. See [here](http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx) for example the idea of different implementations of the fallback scenario. – Oleg Mar 15 '16 at 10:01
  • I cannot update it to 4.13. I am sorry. Is there a way to download the multiselect files alone from NuGet? I am using the jquery version 1.11.3. – Rustin Cohle Mar 15 '16 at 10:05
  • 1
    @RustinCohle: Sorry, but if you get free jqGrid package from [NuGet](https://www.nuget.org/packages/free-jqGrid/4.13.1) then **no file will be included of any HTML page of your project**. You should add the reference of the file *explicitly*. You can see [here](https://github.com/free-jqgrid/jqGrid/commits/master/plugins/ui.multiselect.js) the full history of changes of `ui.multiselect.js`. `ui.multiselect.css` is unchanged. You can use the files with old version of jqGrid if you want. – Oleg Mar 15 '16 at 10:14
  • @RustinCohle: You should clear understand that jqGrid 4.6 is dead. No bugs will be fixed no compatibility with new web browsers, new jQuery, jQuery UI and so on will be tested and fixed. There are many known bugs in jqGrid 4.6 which are fixed later. If your web site will stop working after the next update of Chrome (like [the problem](http://stackoverflow.com/a/10621951/315935)), than you will have to solve the problem yourself. There are two main forks of jqGrid now: free jqGrid, which I develop, and commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334). You should choose once. – Oleg Mar 15 '16 at 10:20
  • Yes, I belong to lower part of management chain. Cant convince them. They made me change 4.6, in the way I cant update it anymore. Thanks for your help. – Rustin Cohle Mar 15 '16 at 10:47
  • @RustinCohle: You are welcome! You can informs you chef about the risk of the usage of old version of jqGrid. – Oleg Mar 15 '16 at 11:05