CODEWITHSUNDEEP
jqueryjqgridcolors
FastTrack
FastTrack

Reputation: 8980

jQGrid - Change background color of grouping header

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:

enter image description here

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?

Upvotes: 3

Views: 7912

Answers (1)

Oleg
Oleg

Reputation: 221997

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:

enter image description here

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

Upvotes: 6

Related Questions