JQgrid - treegrid error

Question

I have looked at the related question This question

and have tried to apply to my tasks. I get headers of the grid with some hanging bubble over it that says "Loading..." and nothing happens. When I run console, in there I see an error that says this:

 SCRIPT5007: Unable to get value of the property 'stype': object is null or undefined 
 jquery.jqGrid.min.js, line 72 character 461

Like this: Screen shot

1) The solution presented by Oleg works great out of the box. That is with his json and his javascript. Thanks.
2) I have a Json data that looks similar to the one used by Oleg. Here it is

{
 "results":[
  {
     "analysisStatus":null,
     "label":"SPR - Test Only - Cost Analyzer 1-GUI Prototype",
     "leaf":false,
     "level":0,
     "lockedBy":"",
     "overrideCostingMRC":955.2800,
     "overrideCostingNRC":3739.7900,
     "overrideCostingUsage":151.7300,
     "overridePricingMRC":1531.4800,
     "overridePricingNRC":2580.0000,
     "overridePricingUsage":210.4800,
     "parent":"",
     "proposedCostingMRC":955.2800,
     "proposedCostingNRC":3739.7900,
     "proposedCostingUsage":151.7300,
     "proposedPricingMRC":1531.4800,
     "proposedPricingNRC":2580.0000,
     "proposedPricingUsage":210.4800,
     "rowId":36624,
     "standardCostingMRC":955.2800,
     "standardCostingNRC":3739.7900,
     "standardCostingUsage":151.7300,
     "standardPricingMRC":1531.4800,
     "standardPricingNRC":2580.0000,
     "standardPricingUsage":210.4800
  },
  {
     "label":"Broadspeed DIA 3.0: 1.5 Mb\/s",
     "leaf":false,
     "level":1,
     "overrideCostingMRC":299.9400,
     "overrideCostingNRC":118.4400,
     "overrideCostingUsage":0.0000,
     "overridePricingMRC":444.0000,
     "overridePricingNRC":800.0000,
     "overridePricingUsage":0.0000,
     "parent":36624,
     "proposedCostingMRC":299.9400,
     "proposedCostingNRC":118.4400,
     "proposedCostingUsage":0.0000,
     "proposedPricingMRC":444.0000,
     "proposedPricingNRC":800.0000,
     "proposedPricingUsage":0.0000,
     "rowId":54130,
     "standardCostingMRC":299.9400,
     "standardCostingNRC":118.4400,
     "standardCostingUsage":0.0000,
     "standardPricingMRC":444.0000,
     "standardPricingNRC":800.0000,
     "standardPricingUsage":0.0000
   },
   {
     "label":"Broadview PRI: Measured GR",
     "leaf":false,
     "level":1,
     "overrideCostingMRC":298.1700,
     "overrideCostingNRC":208.0000,
     "overrideCostingUsage":115.7600,
     "overridePricingMRC":409.6800,
     "overridePricingNRC":800.0000,
     "overridePricingUsage":210.4800,
     "parent":36624,
     "proposedCostingMRC":298.1700,
     "proposedCostingNRC":208.0000,
     "proposedCostingUsage":115.7600,
     "proposedPricingMRC":409.6800,
     "proposedPricingNRC":800.0000,
     "proposedPricingUsage":210.4800,
     "rowId":54131,
     "standardCostingMRC":298.1700,
     "standardCostingNRC":208.0000,
     "standardCostingUsage":115.7600,
     "standardPricingMRC":409.6800,
     "standardPricingNRC":800.0000,
     "standardPricingUsage":210.4800
   },
   {
     "label":"Wild Card - Customer",
     "leaf":true,
     "level":2,
     "overrideCostingMRC":0.0000,
     "overrideCostingNRC":0.0000,
     "overrideCostingUsage":0.0000,
     "overridePricingMRC":234.0000,
     "overridePricingNRC":0.0000,
     "overridePricingUsage":0.0000,
     "parent":54130,
     "proposedCostingMRC":0.0000,
     "proposedCostingNRC":0.0000,
     "proposedCostingUsage":0.0000,
     "proposedPricingMRC":0.0000,
     "proposedPricingNRC":0.0000,
     "proposedPricingUsage":0.0000,
     "rowId":388316,
     "standardCostingMRC":0.0000,
     "standardCostingNRC":0.0000,
     "standardCostingUsage":0.0000,
     "standardPricingMRC":0.0000,
     "standardPricingNRC":0.0000,
     "standardPricingUsage":0.0000
  },
  {
     "label":"Wild Card - Customer",
     "leaf":true,
     "level":2,
     "overrideCostingMRC":0.0000,
     "overrideCostingNRC":0.0000,
     "overrideCostingUsage":0.0000,
     "overridePricingMRC":40.0000,
     "overridePricingNRC":0.0000,
     "overridePricingUsage":0.0000,
     "parent":54130,
     "proposedCostingMRC":0.0000,
     "proposedCostingNRC":0.0000,
     "proposedCostingUsage":0.0000,
     "proposedPricingMRC":0.0000,
     "proposedPricingNRC":0.0000,
     "proposedPricingUsage":0.0000,
     "rowId":404097,
     "standardCostingMRC":0.0000,
     "standardCostingNRC":0.0000,
     "standardCostingUsage":0.0000,
     "standardPricingMRC":0.0000,
     "standardPricingNRC":0.0000,
     "standardPricingUsage":0.0000
  },
  {
     "label":"Wild Card - Customer",
     "leaf":true,
     "level":2,
     "overrideCostingMRC":0.0000,
     "overrideCostingNRC":0.0000,
     "overrideCostingUsage":0.0000,
     "overridePricingMRC":0.0000,
     "overridePricingNRC":0.0000,
     "overridePricingUsage":0.0000,
     "parent":54131,
     "proposedCostingMRC":0.0000,
     "proposedCostingNRC":0.0000,
     "proposedCostingUsage":0.0000,
     "proposedPricingMRC":0.0000,
     "proposedPricingNRC":0.0000,
     "proposedPricingUsage":0.0000,
     "rowId":404098,
     "standardCostingMRC":0.0000,
     "standardCostingNRC":20.0000,
     "standardCostingUsage":0.0000,
     "standardPricingMRC":0.0000,
     "standardPricingNRC":0.0000,
     "standardPricingUsage":0.0000
  },
  {
     "label":"Wild Card - Customer",
     "leaf":true,
     "level":2,
     "overrideCostingMRC":0.0000,
     "overrideCostingNRC":0.0000,
     "overrideCostingUsage":0.0000,
     "overridePricingMRC":3.25,
     "overridePricingNRC":0.0000,
     "overridePricingUsage":0.0000,
     "parent":54131,
     "proposedCostingMRC":0.0000,
     "proposedCostingNRC":0.0000,
     "proposedCostingUsage":0.0000,
     "proposedPricingMRC":0.3000,
     "proposedPricingNRC":0.0000,
     "proposedPricingUsage":0.0000,
     "rowId":404099,
     "standardCostingMRC":0.0000,
     "standardCostingNRC":0.0000,
     "standardCostingUsage":0.0000,
     "standardPricingMRC":0.0000,
     "standardPricingNRC":0.0000,
     "standardPricingUsage":0.0000
  }

] }

My javascript code with the defined grid looks like this:

    <script type="text/javascript">
    $(document).ready(function (){
        $.getJSON('sources/cost-analyzer2.json', function(data){
            console.log(data.results);
            var this_grid;
            this_grid = $this_app.define_grid("#grid-results", {
                caption: 'Proposals',
                pager: '#pager-results',
                data: $.extend(true, [], data.results),                 
                datatype: "local",
                height: 'auto',

                rowNumbers: true,               
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC',  
                    'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage',
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage'
],
colModel: [                     
    { name: 'rowId', index: 'rowId',  width: 20, hidden:true},      
    { name: 'label', index: 'abel', width: 100},
    { name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70},
    { name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70},
    { name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70},
    { name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70},
    { name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70},
    { name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70},
    { name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70},
    { name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70},
    { name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70},
    { name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70},
    { name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70},
    { name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70},
    { name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70},
    { name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70},
    { name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70},
    { name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70},
    { name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70},
    { name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70} 
            ],
                localReader: {
                    repeatitems: false,                     
                    root: "data.results"                    
                },// end of localReader
                treeGrid: true,
                treeGridModel: 'adjacency',
                treedatatype: "local",
                ExpandColumn: 'label',
                inline_editing: false
            });// end of define_grid -->    

            $("#grid-results").jqGrid('gridResize');
            $("#grid-results").jqGrid('setGroupHeaders', {
    useColSpanStyle: false, 
    groupHeaders:[
{startColumnName: 'standardPricingMRC', numberOfColumns: 6, titleText: 'Standard'},
{startColumnName: 'proposedPricingMRC', numberOfColumns: 6, titleText: 'Proposed'},
{startColumnName: 'overridePricingMRC', numberOfColumns: 6, titleText: 'Override'}
                  ] 
                });

            $("#grid-results").jqGrid('setGroupHeaders', {
                  useColSpanStyle: true, 
                  groupHeaders:[
{startColumnName: 'standardPricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'standardPricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'standardPricingUsage', numberOfColumns: 2, titleText: 'Usage'},
{startColumnName: 'proposedPricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'proposedPricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'proposedPricingUsage', numberOfColumns: 2, titleText: 'Usage'},
{startColumnName: 'overridePricingMRC', numberOfColumns: 2, titleText: 'MRC'},
{startColumnName: 'overridePricingNRC', numberOfColumns: 2, titleText: 'NRC'},
{startColumnName: 'overridePricingUsage', numberOfColumns: 2, titleText: 'Usage'}
                  ] 
                });


        }); <!-- end of getJSon() -->
    });<!-- end of ready() -->    
</script>

If I remove the following lines, I will see my data in a grid fine, but with NO TREE.

    treeGrid: true,
treeGridModel: 'adjacency',
treedatatype: "local",
ExpandColumn: 'label',

Can anyone help? what am I doing wrong?

Thanks

Could you give the jQuery Version you use and the version of [jqGrid](http://www.trirand.com/blog/?page_id=6). It would be ideal if you could put a sample online at [jsfiddle](http://jsfiddle.net/) or at [plnkr.co](http://plnkr.co/) — surfmuggle, Aug 02 '13 at 19:52
@threeFourOneSixOneThreeless I use 10.2.0 version of jQuery (jquery-1.10.2.min.js) and jqGrid 4.5.2. I don't think I can put a sample online, since it's a part of larger system. But, with jquery included and jqgrid included, what I posted, should be workable as stand-alone unit. — Dima R., Aug 02 '13 at 21:24
If you use `jquery.jqGrid.src` it would be easier to pinpoint where in the source the error occurs. In the file `jquery.jqGrid.min.js` the line 72 contains three times `stype`. May be i misunderstood you but if it works standalone the error must be in the combination of different javascript files in your system; without more input it is difficult to help. — surfmuggle, Aug 02 '13 at 22:07

zs2020 · Answer 1 · 2013-08-06T05:28:49.540

I fixed it for you please check the demo. The problem was the parent IDs for the last 4 records were pointed to the first node rather than the 3 one. And you need to add id field so that parent field can point to. Here is the object hierarchy you need to configure as:

The reason why that 2 items show below the 2nd item at the level one because you put the data after the 2nd item, you just need to move it before that 2nd item at the level one.

[
   {
      "leaf":false,
      "level":0,
      "parent":"",
      "rowId":36624,
      id:36624,
      expanded:true,
      loaded:true
   },
   {
      "leaf":false,
      "level":1,
      "parent":36624,
      "rowId":54130,
      id:54130,
      isLeaf:false
   },
   {
      "leaf":true,
      "level":2,
      "parent":54131,
      "rowId":388316,
      id:388316,
      isLeaf:true,
      expanded:false
   },
   {
      "leaf":true,
      "level":2,
      "parent":54131,
      "rowId":404097,
      id:404097,
      isLeaf:true
   },
   {                    
      "leaf":false,        ---> This obj goes after the 2 before.
      "level":1,
      "parent":36624,
      "rowId":54131,
      id:54131,
      isLeaf:false
   },
   {
      "leaf":true,
      "level":2,
      "parent":54131,
      "rowId":404098,
      id:404098,
      isLeaf:true
   },
   {
      "leaf":true,
      "level":2,
      "parent":54131,
      "rowId":404099,
      id:404099,
      isLeaf:true
   }
]

Hope it helps.

Demo

Thanks, @sza. I have already came to solution. It didn't like the nesting of the items in my json - rather wanted me to have them strictly one after another, and children right next to parents, etc.. a little complicated, but doable from the back end I have — Dima R., Aug 14 '13 at 19:59

score 0 · Accepted Answer · answered Aug 05 '13 at 17:08

I have resolved this problem. Apparently, it is required for the id column to be called actually "id" and not driven by how my data is. I had to change the back end to get the names properly. Also, it was requiring the dataobject that maps to json data to have a method getIsLeaf, instead of how Java (back end) commonly creates getter for booleans - just isLeaf(). The only problem remains, is that the tree seems a little crooked. if I have two rows, and expand the first one, the expanded subtree appears underneath the last element of the grid. enter image description here

Updated javascript code is here.

    <script type="text/javascript">
    $(document).ready(function (){
        var mydata ;
        $.getJSON('sources/cost-analyzer2.json', function(data){
            mydata=$.extend(true, [], data.results) ;           
            console.log(mydata);

            $("#grid-results").jqGrid({
                datatype: "local",
                data: mydata, // will not used at the loading,
             // but during expanding/collapsing the nodes
 colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 
        'Price Usage', 'Cost Usage',
    'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage',
        'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage'
 ],
colModel: [                     
    { name: 'id', index: 'id',  width: 20, hidden:true},        
    { name: 'label', index: 'label', width: 100},
    { name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70},
    { name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70},
    { name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70},
    { name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70},
    { name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70},
    { name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70},
    { name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70},
    { name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70},
    { name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70},
    { name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70},
    { name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70},
    { name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70},
    { name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70},
    { name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70},
    { name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70},
    { name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70},
    { name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70},
    { name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70} 
            ],
                height:'auto',
                //pager : "#ptreegrid",
                sortname: 'id',
                treeGrid: true,
                treeGridModel: 'adjacency',
                treedatatype: "local",
                ExpandColumn: 'label',
                caption: "Sample Tree View Model"
            });

            $("#grid-results")[0].addJSONData({
                total: 1,
                page: 1,
                records: mydata.length,
                rows: mydata
            });
            $("#grid-results").jqGrid('gridResize');

        });
        });
</script>

Any idea why it is so? Also does anyone know if the events were implemented on Jqgrid - tree?

JQgrid - treegrid error

2 Answers2