Webix not showing the kids data on dynamic loading

Question

I am using webix to show some tree table data.

     webix.ready(function () {
            grida = webix.ui({                        
                container: "testB",
                view: "treetable",
                columns: [
                    { id: "id", header: "", css: { "text-align": "right" } },
                    {
                        id: "SerialNo", header: "Serial No", width: 250,
                        template: "{common.treetable()} #SerialNo#"
                    }
                ],
                url: "/Test/GetTreeItem",
                autoheight: true,
            });
        });

This loads the items perfectly.

Parents;

[{"id":11583,"Id":11583,"SerialNo":"12476127654","webix_kids":1},{"id":11584,"Id":11584,"SerialNo":"125235463","webix_kids":1},{"id":11585,"Id":11585,"SerialNo":"21385423348956","webix_kids":1},{"id":11586,"Id":11586,"SerialNo":"253346346346","webix_kids":1},{"id":11587,"Id":11587,"SerialNo":"123123","webix_kids":1},{"id":11588,"Id":11588,"SerialNo":"52354263","webix_kids":1},{"id":11589,"Id":11589,"SerialNo":"12344444","webix_kids":1},{"id":11590,"Id":11590,"SerialNo":"12344444","webix_kids":1},{"id":11591,"Id":11591,"SerialNo":"12344444","webix_kids":1},{"id":11592,"Id":11592,"SerialNo":"151515","webix_kids":1}]

However when I click the plus button, server returns (I can see the json string when I debug the code) the json but webix not appending the data underneath the parent.

Kids of parent "id":11587;

[{"id":11583,"Id":11583,"SerialNo":"12476127654","webix_kids":1},{"id":11592,"Id":11592,"SerialNo":"151515","webix_kids":1}]

Answer 1

Correcting the JSON output solved my problem.

For the parents;

{  
   "parent":"0",
   "data":[  
      {  
         "Id":11584,
         "id":11584,
         "SerialNo":"125235463",
         "webix_kids":1
      },
      {  
         "Id":11599,
         "id":11599,
         "SerialNo":"3444",
         "webix_kids":1
      }
   ]
}

For the kids;

{  
   "parent":11599,
   "data":[  
      {  
         "id":11583,
         "Id":11583,
         "SerialNo":"12476127654",
         "webix_kids":1
      },
      {  
         "id":11592,
         "Id":11592,
         "SerialNo":"151515",
         "webix_kids":1
      }
   ]
}

Answer 2

id of data object must be unique per component.

Currently, you have for top level

{
"id": 11583,
"Id": 11583,
"SerialNo": "12476127654",
"webix_kids": 1
},

and in kids data you have

{
"id": 11583,
"Id": 11583,
"SerialNo": "12476127654",
"webix_kids": 1
},

both items share the same id, so treetable doesn't add a new item.