JQgrid - treegrid error

Question 1

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?

Question 2

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