CODEWITHSUNDEEP
jquerycssjquery-pluginsjqgrid
C Bauer
C Bauer

Reputation: 5103

jqGrid change background color of specific column headers

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.

Upvotes: 0

Views: 5884

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 1

Related Questions