Search code examples
jqgridtreegrid

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

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: enter image description here

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"},
    
  ];
Solution

  • 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"
    },