CODEWITHSUNDEEP
razorkendo-uitreeviewkendo-treeviewkendo-ui-mvc
Srééjîth Náîr
Srééjîth Náîr

Reputation: 341

Kendo Tree view - How to load child node on expand kendo treeview

I've a huge tree view to bind, So need to render all the parents , then when expand render the children. How to load child node on expand kendo treeview ?

I had taken a look at the below thread, but not sure where is the reference of the "Node" and "HasNodes" comes from in his last post saying Problem solved.

Appreciate the help.

How to load child node on expand kendo treeview

Upvotes: 0

Views: 2857

Answers (1)

Will
Will

Reputation: 196

I have been playing around with this myself over the past few days...

first of all you need to define a method that allows you to pass a node Id (the one you are expanding) or null if getting the root nodes and returns a list of node objects.

When configuring your treeview, ensure that you are not setting your model to use the 'children' field - this prevents any ondemand loading for some reason and set the loadOnDemand to true (this is by default anyway).

Once you have set that up you need to configure the transport.read.data to get the id of the node and pass that through to your method call.

In my examples I have defined my tree model as an object with an ItemId, ItemName, HasChildItems and ParentTreeId properties.

Setting HasChildItems to true ensures the expand capability is available for the node.

Examples:-

Demo Configuration

// the Datasource
var demoDataSource= new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: urlforyouraction_dataretrieval,
                    cache: false,
                    type: 'POST',
                    dataType: "json",
                    traditional: true,
                    data: function (e) {
                        return {
// e is the node passed in, this is null on initial read
                            ParentTreeId: !e.id ? null : e.id
                        }
                    }
                }
            },
            schema: {
                model: {
                    id: "ItemId",
                    Name: "ItemName",
                    hasChildren: "HasChildItems",
                    parentTreeId: "ParentTreeId"
                }
            }
        });

    // the treeview
    var demoTree = $("#treeview-left").kendoTreeView({
                loadOnDemand: true,
                dataSource: demoDataSource,
                dataTextField: "ItemName"
            }).data("kendoTreeView");

Upvotes: 2

Related Questions