How set background color of each level in hierarch

Question

I use free jqgrid(v5.1.1) in my asp.net mvc project. In my view,I have 5 level hierarchical jqgrid. how can I set background color of header of each level? for example header of first level has "blue" color,second level has "green" color,third level has "light blue" color and....

here is my code:

 //************************************fill grid level 1 **********************************
function FillJQueryGrid(ProjectIdVal) {

    $("#jqGrid").jqGrid({
        url: '@Url.Action("GetCodingCodeSumLists", "Report")' + '?ProjectId=' + ProjectIdVal,// jqgrid_data,

        jsonReader: {
            repeatitems: false,
            root: function (obj) {
                return obj.records;
            }
        },
        datatype: "json",
        height: 'auto',
        page: 1,
        colModel: [
            { label: 'Fieco Doc No.', name: 'comp_code', key: true},
            { label: 'Subject', name: 'Comp_Subject' },
            { label: 'Delay', name: 'sum_delay_count' },

        ],
        width:"100%",
        loadonce: true,
        autowidth: true,
        rowNum: 20,
        subGrid: true,
        subGridRowExpanded: showChildGridrevision,
        pager: "#jqGridPager"
    });
        };

//***********************************fill grid level 2 *******************************************
    function showChildGridrevision(parentRowID, parentRowKey) {
        var childGridID = parentRowID + "_table";
        var childGridPagerID = parentRowID + "_pager";

        var childGridURL = '@Url.Action("GetRevisionSumLists", "Report")' + '?CompCode=' + parentRowKey;

        $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

        $("#" + childGridID).jqGrid({
            url: childGridURL,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {
                    return obj.records;
                }
            },
            datatype: "json",
            height: 'auto',
            width: "100%",

            page: 1,
            colModel: [
                {label:'CompCode_Revision',name:'CompCode_Revision',key:true,hidden:true},
                { label: 'comp_code', name: 'comp_code', hidden: true },
                { label: 'revision', name: 'revision',width:500 },
                { label: 'Delay', name: 'sum_delay_count',width:500 }
            ],
            loadonce: true,
            subGrid: true,
            subGridRowExpanded: showChildGridTransmital,
            pager: "#" + childGridPagerID
        });

    }

    //***********************************fill grid level 3 *******************************************
    function showChildGridTransmital(parentRowID2, parentRowKey2) {
        debugger;
        var childGridID2 = parentRowID2 + "_table";
        var childGridPagerID2 = parentRowID2 + "_pager";

        var childGridURL2 = '@Url.Action("GetTransmitalSumLists", "Report")' + '?CompCode_Revision=' + parentRowKey2;

        $('#' + parentRowID2).append('<table id=' + childGridID2 + '></table><div id=' + childGridPagerID2 + ' class=scroll></div>');

        $("#" + childGridID2).jqGrid({
            url: childGridURL2,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {
                    return obj.records;
                }
            },
            datatype: "json",
            height:'auto',
            page: 1,
            colModel: [
                { label: 'CompCode_Revision_Transmital', name: 'CompCode_Revision_Transmital', key: true,hidden:true},
                { label: 'CompCode_Revision', name: 'CompCode_Revision', hidden: true },
                { label: 'transmital no', name: 'trans_ref_no' ,width:200},
                { label: 'transmital subject', name: 'ChkMain_Subject' ,width:400},
                { label: 'transmital date', name: 'trans_date',width:200 },
                { label: 'Delay', name: 'sum_delay_count',width:200 }
            ],

            width:'100%',
            loadonce: true,
            subGrid: true,
            subGridRowExpanded: showChildGridReceiver,
            pager: "#" + childGridPagerID2
        });

    }

    //***********************************fill grid level 4 *******************************************
    function showChildGridReceiver(parentRowID, parentRowKey) {
        debugger;
        var childGridID = parentRowID + "_table";
        var childGridPagerID = parentRowID + "_pager";

        var childGridURL = '@Url.Action("GetReceiverSumLists", "Report")' + '?CompCode_Revision_Transmital=' + parentRowKey;

        $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

        $("#" + childGridID).jqGrid({
            url: childGridURL,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {

                    return obj.records;
                }
            },
            datatype: "json",
            page: 1,
            colModel: [
                { label: 'CompCode_Revision_Transmital_receiver', name: 'CompCode_Revision_Transmital_receiver', key: true, hidden: true },
                { label: 'receiver_id', name: 'receiver_id',hidden:true },
                { label: 'Receiver Name', name: 'receiver_name',width:500 },
                { label: 'Delay', name: 'sum_delay_count', width: 500 }
            ],
            loadonce: true,
            height: '100%',
            subGrid: true,
            subGridRowExpanded: showChildGridLetter,
            pager: "#" + childGridPagerID
        });

    }
    //***********************************fill grid level 5 *******************************************
    function showChildGridLetter(parentRowID, parentRowKey) {
        debugger;
        var childGridID = parentRowID + "_table";
        var childGridPagerID = parentRowID + "_pager";

        var childGridURL = '@Url.Action("GetLettersOfCodingWithDelayLists", "Report")' + '?CompCode_Revision_Transmital_Receiver=' + parentRowKey;

        $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

        $("#" + childGridID).jqGrid({
            url: childGridURL,
            jsonReader: {
                repeatitems: false,
                root: function (obj) {

                    return obj.records;
                }
            },
            datatype: "json",
            page: 1,

            colModel: [
                { label: 'DCC_letter_id', name: 'DCC_letter_id', key: true, hidden: true },
                { label: 'CommentLetter No', name: 'Let_no'},
                { label: 'Subject', name: 'Let_subject' ,width:300},
                { label: 'Estimate Date', name: 'estimate_date_of_letter' },
                { label: 'Send Date', name: 'Let_date' },
                { label: 'Delay', name: 'delay_count_of_letter'}
            ],
            loadonce: true,
            height: '100%',
            subGrid: false,
            pager: "#" + childGridPagerID
        });

    }

Answer 1

First of all, I want to mention, that there are no free jqGrid v5.1.1. It's commercial version, which price you can see under under link, which you see in the comment at the beginning of jquery.jqGrid.min.js: "License: http://guriddo.net/?page_id=103334%22". Free jqGrid is alternative fork of jqGrid, which I develop starting with the end of 2014, after the end of "jqGrid" and renaming the fork to "Guriddo jqGrid JS".

The second important common remark: it's important, that one has no id duplicates on HTML page. Thus one should choose unique id values. In case of usage subgrids one can easy get id duplicates if multiple subgrids are opened. One can solve the problem in very easy way, by usage idPrefix in all subgrids. For example you can use

idPrefix: parentRowKey + "_" // or parentRowKey2 + "_"

Now about your main problem. There are many ways to use background-color to allow the user to see the level of the grid. For example, every subgrid consist of two parts: td.subgrid-cell and td.subgrid-data. One can set background color on td.subgrid-cell. You will have the results like on the picture below

One more option will be setting background color on the column headers of every subgrid. The results will be like

If you would use free jqGrid, then you can use labelClasses property of colModel. You need just add the property labelClasses: "blue" to colModel and to define the following CSS rule:

.ui-jqgrid-labels .blue {
    background-color: #b3d9ff;
    background-image: none;
}

To add labelClasses: "blue" option to all columns of subgrid you can use `cmTemplate``option of the subgrid:

cmTemplate: { labelClasses: "blue" }

The code of subGridRowExpanded could be the following:

subGridRowExpanded: function (subgridDivId, rowid) {
    var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
        subgridData = $(this).jqGrid("getLocalRow", rowid).details,
        $subgridDataDiv = $("#" + subgridDivId),
        $subgridCell = $subgridDataDiv.closest(".subgrid-data").prev(".subgrid-cell");

    $subgridCell.addClass("blue"); // set background color on td.subgrid-cell
    $subgridDataDiv.append($subgrid);
    $subgrid.jqGrid({
        idPrefix: rowid + "_",
        data: subgridData,
        colModel: [
            { name: "c1", label: "Col 1" },
            { name: "c2", label: "Col 2" },
            { name: "c3", label: "Col 3" }
        ],
        cmTemplate: { labelClasses: "blue" }, // set background color on column headers
        iconSet: "fontAwesome",
        autowidth: true,
        autoencode: true,
        sortname: "c1"
    });
}

One will be need to add CSS rule like the following

.ui-jqgrid .ui-subgrid .subgrid-cell.blue {
    background-color: #b3d9ff;
    background-image: none;
}

See the demo https://jsfiddle.net/OlegKi/q5j6vnLa/.

If you have to use old jqGrid of Guriddo, then you can't use labelClasses, but you can use setLabel method, for example, to assign class on the column header.