Loading level during expanding node

8 posts, 0 answers
  1. Bartosz
    Bartosz avatar
    5 posts
    Member since:
    Oct 2015

    Posted 06 Oct 2015 Link to this post

    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

  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Oct 2015 Link to this post

    Hello Bartosz,

     

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

     

    Regards,
    Boyan Dimitrov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Bartosz
    Bartosz avatar
    5 posts
    Member since:
    Oct 2015

    Posted 16 Nov 2015 in reply to Boyan Dimitrov Link to this post

    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

  5. Bartosz
    Bartosz avatar
    5 posts
    Member since:
    Oct 2015

    Posted 16 Nov 2015 Link to this post

    ... 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

  6. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 18 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Bartosz
    Bartosz avatar
    5 posts
    Member since:
    Oct 2015

    Posted 23 Nov 2015 in reply to Boyan Dimitrov Link to this post

    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
  8. Bartosz
    Bartosz avatar
    5 posts
    Member since:
    Oct 2015

    Posted 23 Nov 2015 in reply to Bartosz Link to this post

    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

  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 24 Nov 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready