CODEWITHSUNDEEP
jqueryajaxjsonkendo-uikendo-treeview
M.I.T.
M.I.T.

Reputation: 1042

kendo ui treeview with json speed issue

i have done kendo ui tree with external json file

this is working fine if i have nodes arround 200

but it is taking to much time if i have large amount of data

check this http://infinitelyinfinite.com/treeview/

here is my jQuery code

$.getJSON("/testTree.json", function (data) {
    $("#treeview").kendoTreeView({
        dataSource: data
    });
})

and here is the sample of my JSON file

[
    {
        "id"   :100,
        "text" :"Region",
        "items":[
            {
                "id"   :1,
                "text" :"Asia",
                "parent_id" :100, 
                "items":[
                    {
                        "id"   :2,
                        "text" :"Central Asia",
                        "parent_id" :1, 
                        "items":[
                            {
                                "id"  :3,
                                "text":"Afghanistan",
                                "parent_id" :2, 
                            },
                            {
                                "id"  :4,
                                "text":"Azerbaijan",
                                "parent_id" :2, 
                            }
                        ]
                    },
                    {
                        "id"   :5,
                        "text" :"East Asia",
                        "parent_id" : 1,
                        "items":[
                            {
                                "id"  :6,
                                "text":"China"
                            }
                        ]
                    }
                ]
            },
            {
                "id"   :7,
                "text" :"Europe",
                "parent_id" :100, 
                "items":[
                    {
                        "id"   :8,
                        "text" :"Central Europe",
                        "parent_id" :7, 
                        "items":[
                            {
                                "id"   :9,
                                "text" :"Austria",
                                "parent_id" :8, 
                                "items":[
                                    {
                                        "id"  :10,
                                        "parent_id" :9, 
                                        "text":"Carinthia"
                                    }
                                ]
                            },
                            {
                                "id"   :11,
                                "text" :"Czech Republic",
                                "parent_id" :8, 
                                "items":[
                                    {
                                        "id"  :12,
                                        "text":"Carinthia",
                                        "parent_id" :11, 
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        ]
    }
]

is there any way to make it fast??? it is taking some time 30S or 40S

Upvotes: 3

Views: 1687

Answers (1)

OnaBai
OnaBai

Reputation: 40897

Change your code to:

$.getJSON("/testTree.json", function (data) {
    $("#treeview").kendoTreeView({
        dataSource: {
            data : data
        }
    });
});

Initializing the DataSource from an object instead of from an array seems to be much faster.

The code in your web-site would read (after some minor cleaning) as:

<head>
    <title> Json Tree</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet"/>
    <link href="styles/kendo.default.min.css" rel="stylesheet"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>

<div class="demo-section" style="float:left;">
    <h3 class="title">Select Continents</h3>

    <div id="treeview" class="demo-section"></div>
</div>
<body>
<script type="text/javascript" charset=utf-8>
    //  $(document).ready(function () {
    $.getJSON("/js/region_tree.json", function (data) {
        $("#treeview").kendoTreeView({
            dataSource    : {
                data: data
            },
            dataTextField : "text",
            dataValueField: "id"
        });
    });

    //  });
</script>
</body>

You might also do:

<script type="text/javascript" charset=utf-8>
    $(document).ready(function () {
        var tree = $("#treeview").kendoTreeView({
            dataTextField : "text",
            dataValueField: "id"
        }).data("kendoTreeView");

        $.getJSON("/js/region_tree.json", function (data) {
            tree.dataSource.data(data);
        });
    });
</script>

Where after reading the JSON using getJSON I directly assign it to the dataSource of the tree.

Upvotes: 3

Related Questions