webixwebix-treetable

Webix not showing the kids data on dynamic loading


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}]

Solution

  • 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
          }
       ]
    }