JQGrid subgrid all rows displaying first row data throughout the grid

Question

I'm trying to implement 3 level nested grid, the data is binding to the arrays is looking fine. The subgrids are returning NULL data. Here is the code

   var removeSubgridIcon = function () {
            var $this = $(this),
                idPrefix = $this.jqGrid("getGridParam", "idPrefix");
            $this.find(">tbody>tr.jqgrow>td.ui-sgcollapsed").filter(function () {
                var rowData = $this.jqGrid("getLocalRow",
                                           $.jgrid.stripPref(idPrefix, $(this).closest("tr.jqgrow").attr("id")));
                return rowData.subgrid === null;
            }).unbind("click").html("");
        };

        var isHasSubrids = function (data) {

            if (data == null) { return false; }
            else
            {
                var l = data.length, i;
                for (i = 0; i < l; i++) {
                    if (data[i].subgrid !== null) {
                        return true;
                    }
                }
            }

        };

        $gridName.jqGrid({
            datatype: 'local',
            data: records,
            colNames: ['ContractId', 'Description', 'Status', 'Classification', 'Start Date', 'End Date', 'Cancel Date'], // #PF - add opp id column later
            colModel: [
                { name: 'contractid', width: 100, fixed: true },
                // #PFG - 3/17/2014 - LATER { name: 'opportunity', index: 'opportunity', width: 100, fixed: true }, 
                { name: 'description', width: 200, fixed: true },
                { name: 'status', autowidth: true, align: 'center' },
                { name: 'classification', align: 'center' },
                { name: 'startdate', align: 'center' },
                { name: 'enddate', align: 'center' },
                { name: 'canceldate', align: 'center' }
            ],
            gridview: true,
            idPrefix: "m",
            rownumbers: true,
            autoencode: true,
            viewrecords: true,
            sortname: 'contractid',
            sortorder: 'desc',
            height: '100%',
            subGrid: isHasSubrids(records),
            loadComplete: function () {
                removeSubgridIcon.call(this);
            },
            subGridRowExpanded: function (subgridDivId1, rowId1) {
                var $subgrid1 = $("<table id='" + subgridDivId1 + "_t'></table>"),
                    localRowData1 = $(this).jqGrid("getLocalRow", rowId1);
                $subgrid1.appendTo("#" + $.jgrid.jqID(subgridDivId1));
                $subgrid1.jqGrid({
                    datatype: 'local',
                    data: localRowData1.subgrid,
                    colNames: ['ContractLineId', 'Item Name', 'Start Date', 'End Date', 'Cancel Date', 'Description', 'Vendor Name', 'IsShipped'],
                    colModel: [
                        { name: "contractlineid", width: 130, key: true, fixed: true },
                        { name: "itemname", fixed: true, align: 'center' },
                        { name: "startdate", fixed: true, align: 'center' },
                        { name: "enddate", fixed: true, align: 'center' },
                        { name: "canceldate", fixed: true, align: 'center' },
                        { name: "description", width: 330, fixed: true, align: 'center' },
                        { name: "vendorname", fixed: true, align: 'center' },
                        { name: "isshipped", fixed: true, align: 'center' }
                    ],
                    gridview: true,
                    idPrefix: "s" + rowId1 + "_",
                    rowNum: 300,
                    rownumbers: true,
                    autoencode: true,
                    sortname: 'contractlineid',
                    sortorder: "desc",
                    height: "100%",
                    //loadComplete: removeSubgridIcon,
                    subGrid: isHasSubrids(localRowData1.subgrid),
                    subGridOptions: {
                        "plusicon": "ui-icon-triangle-1-e",
                        "minusicon": "ui-icon-triangle-1-s",
                        "openicon": "ui-icon-arrowreturn-1-e",
                        // load the subgrid data only once
                        // and the just show/hide
                        "reloadOnExpand": false,
                        // select the row when the expand column is clicked
                        "selectOnExpand": true
                    },
                    subGridRowExpanded: function (subgridDivId2, rowId2) {
                        // Sub grid2 holding product details
                        var $subgrid2 = $("<table id='" + subgridDivId2 + "_t'></table>"),
                            localRowData2 = $(this).jqGrid("getLocalRow", rowId2);
                        $subgrid2.appendTo("#" + $.jgrid.jqID(subgridDivId2));
                        $subgrid2.jqGrid({
                            datatype: 'local',
                            data: localRowData2.subgrid,
                            colNames: ['ProductId', 'Name', 'Description'],
                            colModel: [
                                { name: "productid", key: true, fixed: true, align: 'center' },
                                { name: "name", fixed: true, align: 'center' },
                                { name: "description", width: 500, fixed: true, align: 'center' }
                            ],
                            gridview: true,
                            autowidth: true,
                            idPrefix: "s" + rowId1 + "_" + rowId2 + "_",
                            rownumbers: true,
                            autoencode: true,
                            sortname: 'productid',
                            sortorder: "desc",
                            height: '100%',
                            subGrid: isHasSubrids(localRowData2.subgrid),
                            subGridOptions: {
                                "plusicon": "ui-icon-triangle-1-e",
                                "minusicon": "ui-icon-triangle-1-s",
                                "openicon": "ui-icon-arrowreturn-1-e",
                                // load the subgrid data only once
                                // and the just show/hide
                                "reloadOnExpand": false,
                                // select the row when the expand column is clicked
                                "selectOnExpand": true
                            }
                            //loadComplete: removeSubgridIcon
                        });
                    }
                });
            }
        });


            //============================================================
            // set grid width
            //============================================================
        $gridName.setGridWidth($('#account-page').width() - 15, true);
    } else {
        $('#account-contract-content').html('No records exists.');
    }

data: records has the entire tree structure

localRowData1 = $(this).jqGrid("getLocalRow", rowId1);

localRowData1 is not getting any subgrid rows subGrid: isHasSubrids(localRowData1.subgrid) here localRowData1.subgrid is returning NULL

this is how my data looks like:

 -0:Object
  |
  |  -0:Object
  |   |
  |   |     -0:Object
  |   |      |
  |   |      |
  |   |       Description:
  |   |       Name:
  |   |       Prouductid:
  |   |
  |   |      1:Object
  |   | 
  |   |      2:Object
  |   |        
  |   |      3:Object
  |   |
  |   |
  |   |
  |    canceldate:
  |    contractlineid:
  |    Description:
  |    EndDate:
  |    Isshipped:
  |  
  |   +1:Object
  |   
  |   +2:Object
  |
  |   +3:Object
  |   
  |
  | 
  |
   canceldate:
   classification:
   contractid:
   description:
   enddate:
   startdate:
   status:

  +1:Object

  +2:Object

  +3:Object

score 0 · Answer 1 · edited May 23 '17 at 11:56

0

It's very bad choice to fill the grid with data using addRowData. It's not only the slowest way. You use many times addRowData using i + 1 as rowid. If you do so then the key property defined in colModel will be ignored. Instead of that the values 1,2,3... will be used. In case of usage subgids you will have a lot of id duplicates which is evil.

I strictly recommend you to fill grids using data parameter. In the case jqGrid automatically sort the data based on the values of sortname and sortorder parameters. It makes paging of data automatically too. No additional call of .trigger('reloadGrid') is required after the filling of the grid.

Even if you would use correct id value which corresponds native representation of the data you can still have id duplicates in different subgrids or between main grid and some subgrid. So it's strictly recommended to use unique idPrefix for every grid and every subgrid. See the answer or this one for more details.

UPDATED: I fixed your jsfiddle demo to the following working code: http://jsfiddle.net/OlegKi/1ggvpukb/5/

edited May 23 '17 at 11:56

Community

1
1

answered Feb 25 '15 at 23:28

Oleg

220,925
34
403
798

i tried doing the same as you referred but the output see is only the first level data with no subgrids under that. How to bind the data to the arrays so that it looks like the array you reffered ? – Harsha oddiraj Feb 26 '15 at 17:49
If you want to solve the problem you should append the text of your question with the full modified code which you use including some text data. Having the information one can reproduce the problem which you have and to fix it. – Oleg Feb 26 '15 at 18:13
@Harshaoddiraj: Sorry, but I asked you to post the code with test data, so that one could **reproduces** the problem. It's not important how you fill the input `records` array (see the option `data: records`). Instead of that you could include some code where `records` will be directly initialized with some *test data*: `var records: [{...}, {...}];` Having the code one cold reproduce the problem and to find the reason by *debugging* the code. Alternative you can create the demo in http://jsfiddle.net/. You can get some existing example like http://jsfiddle.net/OlegKi/peysdnqL/ and modify it. – Oleg Feb 26 '15 at 19:31
@Harshaoddiraj: I fixed your code to the following working code http://jsfiddle.net/OlegKi/1ggvpukb/5/ – Oleg Feb 26 '15 at 22:42
i am trying to load the data dynamically into array. I am using 3 arrays for 3 layers . On a row expansion it is throwing exception at isHasSubrids(data) where data is undefined . So, do i need to use only 1 array instead of 3 or is there any way that i can bind so that the array looks like the array filled with test data ? – Harsha oddiraj Feb 27 '15 at 16:40
@Harshaoddiraj: You have a lot of options. You don't need to use `isHasSubrids` at all. You can modify the code of `isHasSubrids` if include the line `if (data == null) {return false;}` as the first line of `isHasSubrids`. So you will test first whether `data` is `null` or `undefined` and only if not then you will safe use `data.length`. – Oleg Feb 27 '15 at 16:52
actually it is suppose to have the subgrid data but when a row is expanded the subgrid rows are returning undefined data. Is that because the way i am filling the records, records1 and records2 arrays ? – Harsha oddiraj Feb 27 '15 at 17:05
here basically my subgrid data is not loading – Harsha oddiraj Feb 27 '15 at 18:25
@Harshaoddiraj: Sorry, but I don't understand your problem. I can't write all your code for you. You had the problem "JQGrid subgrid all rows displaying first row data throughout the grid". I point you to some places which you do wrong and modified your demo example so that it works without any problem. You need just create the input data in the correct way and probably make some other modifications corresponds to your exact requirements. – Oleg Feb 27 '15 at 18:43
I'm sorry i have mentioned my question not clear but your code helps me well. My subgrids are loading they are returning with null data.please help me out one this – Harsha oddiraj Mar 04 '15 at 20:57
i have passed an array which looks like the trees structure mentioned above inot your code jsfiddle.net/OlegKi/1ggvpukb/5 – Harsha oddiraj Mar 04 '15 at 21:11
@Harshaoddiraj: Sorry, but I don't understand which problem you have now. The picture provides no technical details. I have no idea what you exactly do and "they are returning with null data" gives really no information. Sorry. – Oleg Mar 04 '15 at 21:22
i have edited the entire code and added some technical data. let me know if you need any more – Harsha oddiraj Mar 04 '15 at 22:06

JQGrid subgrid all rows displaying first row data throughout the grid

1 Answers1