Adding a child node to the first root node showing as last row in Guriddo Treegrid model

Question

I have created jqGrid TreeGrid (adjacency model) using Guriddo library. When I add new child node to first root node, it is showing as last record in TreeGrid (on browser) instead of showing as child node under parent since this node's id value is higher than other records in database. How to display these kind of child nodes correctly under parent node when it is expanded. Please see the below image for this issue.

Below are the records in database:

ID   NAME         DESCRIPTION         PARENT_ID    LEVEL      IS_LEAF
==============================================================================

1    MGR          Manager             NULL          0          FALSE
2    DMGR         Deputy              1             1          TRUE
3    HR           HR                  NULL          0          FALSE
4    AHR          HR                  3             1          TRUE
5    SMGR        Sales                1             1          TRUE

The below is grid setup code:

$("#orgStrTable").jqGrid({
    //"hoverrows":false,
    //"viewrecords":false,
    //"gridview":true,
    url: u,
    //"editurl" : saveUrl,
    "ExpandColumn":"name",
    //"sortname":"id",
    sortable:false,
    "scrollrows":true,
    "treeGrid":true,
    "treedatatype":"json",
    "treeGridModel":"adjacency",
    //"loadonce":true,
    //"rowNum":1000,
    "treeReader":{
        "parent_id_field":"parentId",
        "level_field":"level",
        "leaf_field":"leaf",
        "expanded_field":"expanded",
        "loaded":"loaded",
        "icon_field":"icon"
    },
    datatype: "json",
    jsonReader : {
        repeatitems : false
    },
    colNames:['ID', 'Name','Desc','Enabled','Parent'],
    "colModel":[
        {"name" :'id',"index":'id', "hidden":true,  "key":true,sortable:false},
        {"name":'name',"index":'name'},
        {"name":'description',"index":'description',"search":false,sortable:false},
        {"name":'active',"index":'active',"search":true,"editable":true,sortable:false},
        {"name":'parentId',"index":'parentId',"hidden":true,sortable:false}
    ],
    "pager": "#pagingDiv3",
    multiselect:false
});

jQuery('#orgStrTable').jqGrid('navGrid','#pagingDiv3',
        {
            "edit":false,
            "add":false,
            "del":false,
            "search":false,
            "refresh":true,
            "view":false,
            "excel":false,
            "pdf":false,
            "csv":false,
            "columns":false
        },
        {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},
        {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150}
        );

Database Table Structure:

CREATE TABLE `org_str` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`description` varchar(500) DEFAULT '',
`active` bit(1) NOT NULL DEFAULT b'1',
`parent_id` bigint(20) DEFAULT NULL,
`level` int(11) NOT NULL,
`is_leaf` bit(1) NOT NULL DEFAULT b'1',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Data Array:

var dataArray = [
    {"id":"1","name":"MGR","description":"Manager","active":"true","parentId":null,"level":0,"isLeaf":"false","loaded":"true","expanded":"true"},
    {"id":"2","name":"DMGR","description":"Deputy","active":"true","parentId":"1","level":1,"isLeaf":"true","loaded":"true","expanded":"true"},
    {"id":"3","name":"HR","description":"HR","active":"true","parentId":null,"level":0,"isLeaf":"false","loaded":"true","expanded":"true"},
    {"id":"4","name":"AHR","description":"HR","active":"true","parentId":3,"level":1,"isLeaf":"true","loaded":"true","expanded":"true"},
    {"id":"5","name":"SAL_MGR","description":"Sales Manager","active":"true","parentId":1,"level":1,"isLeaf":"true","loaded":"true","expanded":"true"},
    
  ];

Answer 1

It worked after making changes to below grid options :

"sortname":"name",
"treeReader":{
        "parent_id_field":"parentId",
        "level_field":"level",
        "leaf_field":"leaf",
        "expanded_field":false,
        "loaded":true,
        "icon_field":"icon"
    }, 

Answer 2

Your example works well and I think that you use addRowData to add a node instead of addChildNode method. See the docs here

The demo of your code is located here

To add a node - select the first row and add the needed data. You will see that the record is added in the appropriate place