Load a treetable with json

Webix JS
1

Hi.
I would like to create a treetable like this:
http://webix.com/snippet/91675b78

Data is generated with Json (vbnet):


 <WebMethod()> _
 <ScriptMethod(UseHttpGet:=True, ResponseFormat:=ResponseFormat.Json)> _
Public Function GetData () As Object
Dim serializer As New JavaScriptSerializer()
serializer.MaxJsonLength = Int32.MaxValue

Dim jsonData2 As String
jsonData2 = "[{ 'id':'2', 'value':'The Godfather', webix_kids: true, 'data':[{ 'id':'2.1', 'value':'Part 2', 'chapter':'beta' }]}]"

Return serializer.DeserializeObject(jsonData2)
End Function

Retrieved with Ajax:


$.ajax( {
                type: 'GET',
                async: true, 
                url: 'WebServicesPool.asmx/GetData',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',

                success: function (data) {
                    var records = [];
                    $.each(data, function (k, val) {
                        for (var i = 0; i < val.length; i++) {
                            records.push({
                                id: val[i].id, 
                                value: val[i].value, 
                                chapter: val[i].chapter 
                            })
                        }
                    });
                  $$('gridA').parse(records);
                },
                error: function () {
                    alert('Error');
                }
            });
        });

The treetable create is:


webix.ui({
                view: "scrollview",
                body: {
                    type: "space",
                    rows: [
      
                        {
                           view: "treetable",
                            id:"gridA",
                            columns: [
                                { id: "id", header: "", css: { "text-align": "right" }, width: 50 },
                                {
                                    id: "value", header: "Film title", width: 250,
                                    template: "{common.treetable()} #value#"
                                },
                                { id: "chapter", header: "Mode", width: 200 }
                            ],
                            autoheight: true,
                            autowidth: true,
                                },
                    ]
                }
            });

The result is not what I expect, is inserted only one row

As in this example ( http://webix.com/snippet/b5830da2 )

Thank you in advance …

2

Hi,

Remove webix_kids attribute from the data
This attribute instructs the tree to load childs data for that branch from the server side instead of using data sub-collection

http://webix.com/snippet/e360d797

3

By the way, you can use

$$("gridA").load("WebServicesPool.asmx/GetData");

to get the data directly in the component, without separate ajax loading and parsing ( both solution are equally good though )

4

Now functioning properly.
Thanks for your patience …