Loading level during expanding node

[Bartosz]

Hi,

my treeview configuration at view:

@Html.Raw((Html.Kendo().TreeView().Name("AppellationTree").LoadOnDemand(true)
                .Events(events => events
                    .Select("TreeView_onSelect"))
                    .Template("# return escapeHtml(item.Name); #")
                .DataSource(d => d
                    .Model(m => m
                        .Id("Id")
                        .HasChildren("HasChildren")
                        .Children("Children")
                        .Field("IsAppellation", typeof(bool)))
                    .Read(r => r.Action("_AppellationTree", "Appellation", new { id = Model.Id })))
                .DataTextField("Name")))

My _AppellationTree method:

[ActionName("_AppellationTree")]
        public JsonResult GetAppellationData(int id)
        {
            var model = new List<TreeItemModel>();
            var appellations = _appellationRepo.GetList(x => x.ParentAppellation.Id == id).OrderBy(x => x.Name);
            foreach (var appellation in appellations)
            {
                var r = new TreeItemModel();
                r.Id = appellation.Id;
                r.Name = appellation.Name;
                r.HasChildren = appellation.HasChildren;
                model.Add(r);
            }

            return Json(model, JsonRequestBehavior.AllowGet);
        }

I'd like to add Expand Action with javascript function and launch loading data during expanding node. How to do it? I think that should possible out of the box with three js lines like:

function onExpand(e)

{

     get data (next level) from server

     attache data to existing data source

     fire expanding

}

Best regards

Bart

[Boyan Dimitrov]

Hello Bartosz,

 

The Kendo UI TreeView has a expand event that is fired before a subgroup gets expanded. 

 

Regards,
Boyan Dimitrov
Telerik

[Bartosz]

Hi Boyan,

thank you for your response, but my main question is how to attache data received during ajax call to existing treeview data structure. I found:

var selectedId = $("#AppellationTree").getKendoTreeView().dataItem(e.node).id;
           
            $.ajax({
                dataType: "json",
                type: 'GET',
                cache: false,
                url: '/Appellation/_GetLevel/' + selectedId,
                success: function (model) {
                    var parentRow = [{ text: "", items: [] }];

                    parentRow.items = model;

                    var ds = new kendo.data.HierarchicalDataSource({
                        data: model,
                        schema: {
                            model: {
                                id: "Id",
                                Name: "Name",
                                hasChildren: "HasChildren",
                                parentTreeId: "ParentId"
                            }
                        }
                    });
                    debugger;

                    var treeview = $("#AppellationTree").kendoTreeView({
                        dataSource: ds,
                        loadOnDemand: true,
                        dataTextField: "Name"
                    }).data("kendoTreeView");
                }
            });

 but it does not work. Could you help me?

Best regards

Bartosz

[Bartosz]

... and new level is passed as a collection of:

    public class TreeItemModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public bool HasChildren { get; set; }
        public int ParentId { get; set; }
    }

Best regards

Bartosz

[Boyan Dimitrov]

Hello Bartosz,

 

Please review http://dojo.telerik.com/amAgE example that shows how to populate the Kendo UI TreeView using the server response. 

 

Regards,
Boyan Dimitrov
Telerik

[Bartosz]

Thank you Boyan, my scenario is:
1. Opening page with tree
2. Expand first level (A).
3. If user clicked on node on level A and node on level A has children, send request to server, get data about children node from level A and expand next level (B)
4. If user clicked on node on level B and node on level B has children, send request to server, get data about children node from level B and expand next level (C)
5. etc.
I have big impression that example which was given in your last post is loading all tree at one. 
I don't want it. 
My tree has 2000 nodes and downloading of them taking too much time. I need download every sublevel separately.

Best regards
Bartosz

[Bartosz]

Thank you Boyan,

my scenario is:
1. Opening page with tree
2. Expand first level (A).
3. If user clicked on node on level A and node on level A has children, send request to server, get data about children of level A and expand this node (A).
4. If user clicked on node on level B and node on level B has children, send request to server, get data about children of level B and expand this node (B).
5. etc.
I have big impression that example which was given in your last post is loading entire tree at once. 
I don't want it. 
My tree has 2000 nodes and downloading of them taking too much time. I need download every sublevel separately.

Best regards
Bartosz

[Boyan Dimitrov]

Hello Bartosz,

 

By default when the Kendo UI TreeView is bound to remote data it automatically sets the loadOnDemand option to true. When enabled the Kendo UI TreeView loads its child items when the parent group is expanded. 

 

Please refer to the demos of the ASP.NET MVC wrappers which are shipped in the distribution package. They can be found in the wrappers\aspnetmvc\Examples\ folder. The TreeView / Remote Data example shows how to use the datasource binding. Also you can check the controller code to see the implementation. 

 

Regards,
Boyan Dimitrov
Telerik