Question

Hi all this is my jqgrid that has subgrid enabled…..

jQuery("#issuegrid").jqGrid({
                    url: 'griddata.aspx/IssueData?id=2',
                    datatype: 'json',
                    mtype: 'POST',
                    colNames: ['Edit', 'IssueDetailsID', 'IssueCode', 'Title', 'Type', 'Project', 'Status', 'Priority', 'EstTime', 'EstimatedTime', 'EstimatedTimeFormat', 'AssignTo', 'AssignBy', 'AssignDate', 'ModifiedBy', 'ModifiedDate'],
                    colModel: [
                        { name: 'Edit', index: 'Edit', width: 20, sortable: false, align: 'center' },
                        { name: 'IssueDetailsID', index: 'Issue_Details_ID', width: 15, hidden: true },
                        { name: 'IssueCode', index: 'ProjectCode', width: 45 },
                        { name: 'Title', index: 'IssueTitle', width: 75 },
                        { name: 'Type', index: 'IssueName', width: 70 },
                        { name: 'Project', index: 'ProjectName', width: 100, align: 'center' },
                        { name: 'Status', index: 'IssueStatus', width: 30, align: 'center' },
                        { name: 'Priority', index: 'IssuePriority', width: 30, align: 'center' },
                        { name: 'EstTime', index: 'EstTime', width: 40, align: 'center', sortable: false },
                        { name: 'EstimatedTime', index: 'EstimatedTime', width: 40, align: 'center', hidden: true },
                        { name: 'EstimatedTimeFormat', index: 'EstimatedTimeFormat', width: 40, align: 'center', hidden: true },
                        { name: 'AssignTo', index: 'UserName', width: 80, align: 'left' },
                        { name: 'AssignBy', index: 'UserName', width: 80, align: 'left' },
                        { name: 'AssignDate', index: 'AssignedDate', width: 80, align: 'left' },
                        { name: 'ModifiedBy', index: 'UserName', width: 50, align: 'left' },
                        { name: 'ModifiedDate', index: 'ModifiedDate', width: 50, align: 'left', sortable: false}],


                    pager: '#pager1',
                    rowList: [10, 20, 30],
                    sortname: 'IssueTitle',
                    rowNum: 10,
                    sortorder: "desc",
                    loadtext: "Loading....",
                    shrinkToFit: true,
                    emptyrecords: "No records to view",
                    width: x - 20,
                    height: 250,
                    rownumbers: true,
                    multiselect: false,
                    subGrid: true,
                    subGridRowExpanded: function(subgrid_id, IssueDetailsID) {
                        var subgrid_table_id, pager_id;
                        subgrid_table_id = subgrid_id + "_t";
                        pager_id = "p_" + subgrid_table_id;
                        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
                        jQuery("#" + subgrid_table_id).jqGrid({
                            url: 'griddata.aspx/IssueData_Child?id=4&IssueId=' + IssueDetailsID,
                            datatype: 'json',
                            height: 50,
                            type: 'POST',
                            width: 920,
                            contentType: 'application/json; charset=utf-8',
                            colNames: ['Issue_Details_ID', 'IssueCode', 'IssueTitle', 'Comments'],
                            colModel: [
                             { name: 'Issue_Details_ID_Key', index: 'Issue_Details_ID_Key', hidden: true, width: 60 },
                             { name: 'IssueCode', index: 'IssueCode', width: 60 },
                             { name: 'IssueTitle', index: 'IssueTitle', width: 60 },
                             { name: 'Comments', index: 'Comments', width: 190 }

                             ],
                            multiselect: false,
                            caption: "View Comments",
                            rowNum: 10,
                            pager: '#ChildPager',
                            rowList: [10, 15, 20, 30, 50, 100],
                            sortname: 'Issue_Details_ID_Key',
                            sortorder: "desc",
                            loadtext: "Loading....",
                            shrinkToFit: true,
                            emptyrecords: "No records to view",
                            rownumbers: true,
                            viewrecords: true
                   });
                        jQuery("#ChildGrid").jqGrid('navGrid', '#ChildPager', { edit: false, add: false, del: false });


                    },
                    subGridRowColapsed: function(subgrid_id, IssueDetailsID) {
                        // this function is called before removing the data
                        var subgrid_table_id;
                        subgrid_table_id = subgrid_id + "_t";
                        jQuery("#" + subgrid_table_id).remove();
                    }



                });

                jQuery("#issuegrid").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false });
            });

this wil enable a subgrid to open for the particular row and show the details onclicking the plus button….my problem is i have to change the color of that particular cell(row) that has subgrid opened

Thanx in advance

Answer 1

The setting the background color of the cell in the subgrid work exactly in the same way as for the grid. Look at the following old answers which shows different ways how one can change the the background color: this, this and if you use jqGrid 4.0 then this also.