jQGrid - Change background color of grouping header

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?

Odontalgia

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);
        }
    }
}

Foundling

Excellent! Thanks a million Oleg! – Odontalgia

@FastTrack: You are welcome! If I'll find the time in the next days I'll post to trirand my suggestions how to change the code of groupingRender method of jqGrid to allow to apply rowattr to the grouping headers. – Foundling

That would be great! I'm sure this is a feature most people would like to have available. – Odontalgia