jQGrid - Change background color of grouping heade

Question

I'm using jQGrid with grouping. Each group header will have one of three possibilites: Pending, Duplicate, Not Duplicate.

Based on that text, I want to change the background color of my grouping header. I'm already using the rowattr property of jQGrid to change the background color of my grid rows, but I can't figure out how to change the grouping header color.

Here is my implementation of rowattr, which I believe should be similar to the grouping header background color:

gridview: true,
rowattr: function (rd) {
    alert(rd.duplicateStatusName);
    if (rd.duplicateStatusName === "Pending Review") {
        return { "class": "css_trStatusBackground_pending" };
    }
    else if (rd.duplicateStatusName === "Duplicate") {
        return { "class": "css_trStatusBackground_dup" };
    }
    else if (rd.duplicateStatusName === "Not a duplicate") {
        return { "class": "css_trStatusBackground_notdup" };
    }
},

Here is a screenshot of my current grid:

I want that dark gray header color to be a different color (similar to my row color) based on that text in the header.

Is this possible?

Answer 1

Current implementation of groupingRender don't allow to use some kind of rowattr to style the grouping headers. So You have to iterate over the groups groupingView.groups, test the value and add the css class manually inside of loadComplete.

The demo demonstrates possible implementation of the approach:

The corresponding code could be the following:

grouping: true,
groupingView: {
    groupField: ["name"], // column name by which we group
    groupColumnShow: [true],
    groupCollapse: true
},
rowattr: function (rd) {
    switch (rd.name) {
    case "test1":
        return { "class": "class1" };
    case "test2":
        return { "class": "class2" };
    case "test3":
        return { "class": "class3" };
    default:
        return {};
    }
},
loadComplete: function () {
    var i, group, cssClass, headerIdPrefix = this.id + "ghead_",
        groups = $(this).jqGrid("getGridParam", "groupingView").groups,
        l = groups.length;
    for (i = 0; i < l; i++) {
        group = groups[i];
        switch (group.value) {
        case "test1":
            cssClass = "class1";
            break;
        case "test2":
            cssClass = "class2";
            break;
        case "test3":
            cssClass = "class3";
            break;
        default:
            cssClass = "";
            break;
        }
        // listghead_0_1
        if (cssClass !== "") {
            $("#" + headerIdPrefix + group.idx + "_" + i).addClass(cssClass);
        }
    }
}