jqGrid change background color of specific column headers

Question

I have a jqGrid and need to change the background-color of certain groups of header columns. I can easily do this in the colModel using {classes: "ColIndicator"}, but have no option for this in the header. What is the best way to handle this scenario?

Edit: Example code:

$("#" + subgrid_table_id).jqGrid({
    url: "@Url.Action("GetInvalidItemsVendorItemsJson")",
    datatype: "json",
    postData: { itemUpc: $("#invalid-items-grid").getRowData(row_id)["i"] },
    autowidth: true,
    colNames: [
        'Vendor', 'Store Number',
        'Item Code',
        'Source1 Description', 'Source1 Case Pack', 'Source1 Size', 'Source1 Case UPC',
        'Source2 Description', 'Source2 Case Pack', 'Source2 Size', 'Source2 Case UPC',
        'Source3 Description', 'Source3 Case Pack', 'Source3 Size', 'Source3 Case UPC'
    ],
    colModel: [
        { name: 'Vendor', index: 'Vendor', classes: "Key" },
        { name: 'StoreNumber', index: 'StoreNumber', classes: "Key" },
        { name: 'ItemCode', index: 'ItemCode', classes: "Key" },
        { name: 'Source1Description', index: 'Source1Description', classes: "Source1" },
        { name: 'Source1CasePack', index: 'Source1CasePack', classes: "Source1" },
        { name: 'Source1Size', index: 'Source1Size', classes: "Source1" },
        { name: 'Source1CaseUpc', index: 'Source1CaseUpc', classes: "Source1" },
        { name: 'Source2Description', index: 'Source2Description', classes: "Source2" },
        { name: 'Source2CasePack', index: 'Source2CasePack', classes: "Source2" },
        { name: 'Source2Size', index: 'Source2Size', classes: "Source2" },
        { name: 'Source2CaseUpc', index: 'Source2CaseUpc', classes: "Source2" },
        { name: 'Source3Description', index: 'Source3Description', classes: "Source3" },
        { name: 'Source3CasePack', index: 'Source3CasePack', classes: "Source3" },
        { name: 'Source3Size', index: 'Source3Size', classes: "Source3" },
        { name: 'Source3CaseUpc', index: 'Source3CaseUpc', classes: "Source3" },
    ],
    loadonce: true,
    gridComplete: function() {
        if ($(this).getDataIDs().length == 0) {
            $("#" + subgrid_table_id).remove();
            $("#" + subgrid_id).html("<div class=\"records-not-found\">No records found for upc <span>" + $("#invalid-items-grid").getRowData(row_id)["i"] + "</span> in Source1, Source3 or Source2</div>");
        }
    }
});

Note the need to have multiple styles (for each in Source1 Source2 Source3) in the grid.

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

1

You can use setLabel method to add class to the column header or assign attributes on the <th> element. For example $("#" + subgrid_table_id).jqGrid("setLabel", "StoreNumber", false, "ui-state-highlight"); will add "ui-state-highlight" class to the column header of the column "StoreNumber" and it will change in the way it's background-color and background-image.

Additionally I would don't recommend you to use $(this).getDataIDs().length == 0 to test the number of records in the grid. The method getDataIDs much more as you need. Instead of then you should use reccount option and test $(this).getGridParam("reccount") === 0. You should add important option gridview: true to the grid which just improves performance of the grid (see the answer for details). I would recommend you to remove all unneeded index properties from colModel. It will reduce the code, but the code will be do the same.

edited May 23 '17 at 10:33

Community

1
1

answered Oct 16 '14 at 16:43

Oleg

220,925
34
403
798

This works however my css is getting overwritten by the grid css. Any tips? – C Bauer Oct 16 '14 at 16:53
1

@CBauer: You should post the CSS rule which you use :-) Most common problem is defining of not specific enough CSS rule or don't removing `background-image`. – Oleg Oct 16 '14 at 16:58
Yeah I'm trying to add `.Source1`. I tried `th.Source1` as well because I can't hit all the fields, only the fields for that source. – C Bauer Oct 16 '14 at 16:59
@CBauer: **Could you post exact CSS rule which you define** for the class `Source1`? I can't help you if I don't know exactly what you do. – Oleg Oct 16 '14 at 17:09
1

@CBauer: For example the CSS rule `.Source1 { background-color: yellow; background-image: none; }` is not specific enough. The rule `.ui-jqgrid-htable .Source1 { background-color: yellow; background-image: none; }` is *more specific*. Another rule `.ui-jqgrid .ui-jqgrid-htable .Source1 { background-color: yellow; background-image: none; }` is even **more specific**. And so on. – Oleg Oct 16 '14 at 17:17
`.ui-jqgrid-htable .Source1` did it! Thanks Oleg – C Bauer Oct 16 '14 at 18:09

jqGrid change background color of specific column headers

1 Answers1