0

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

bhargav
  • 619
  • 2
  • 14
  • 30

2 Answers2

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • i got the solution myself by using subGridBeforeExpand subGridBeforeExpand: function(subgrid_id, IssueDetailsID) { $("#" + IssueDetailsID).find("td").css("background-color", "#99FF99"); } where IssueDetailsID is the id of that particular row that's clicked inorder to open the subgrid – bhargav Apr 22 '11 at 08:01
  • @oleg thanx for the links im referring them – bhargav Apr 22 '11 at 08:07
  • 1
    @bhargav: In the way you will set the background color or **the row** (all `` elements) and not "the particular cell" hiw you wrote in your question. Moreover if you can self the problem yourself in less then an hour you should not ask the question on the stackoverflow. In the way you just spend the time of other people. – Oleg Apr 22 '11 at 08:10
  • @olex actually i got the solution form an old application which i didnt knw it existed... – bhargav Apr 22 '11 at 09:29
  • @oleg i got the solution aftr working for abt 3hrs on it....and i posted it here aftr working on problem for abt 2hrs and so.... – bhargav Apr 22 '11 at 09:40
1

Thanks for posting answer here. I done this in Rails. So code will be changed accordingly in rails application. I have done following code for working this in my application. I am posting this as this may help other who are using rails application.

:subGridBeforeExpand => JqgridView::Javascript.new(

         %Q^function(subgrid_id, AppID) {

               jQuery("#" + AppID).find("td").css("background-color", "#C5C5C5");
           }^),

:subGridRowColapsed => JqgridView::Javascript.new(

          %Q^function(subgrid_id, AppID) {

               jQuery("#" + AppID).find("td").css("background-color", "#f3f3f3");
           }^)
Sateesh
  • 31
  • 2