Load On Demand no childs shown => not populating child nodes

[Georg Poweleit]

Hi Team,

I am trying to get my TreeView running with Load On Demand. I've built it up like in the tutorial:

http://mvc.syncfusion.com/demos/ui/tools/TreeView/LoadOnDemand

I think the problem is: there is no expand triangle on my root node, so the OverviewTreeData gets never called.

Here is my code:

View:

@* Why is this? *@

@using (Ajax.BeginForm("LoadOnDemand", new AjaxOptions() { UpdateTargetId = "updatePanel" }))

{

    <div class="height">

    </div>

    <div id="updatePanel">

        @(Html.Syncfusion().TreeView("ComponentOverview", "OverviewTreeData")

        .AllowEdit(true)

        .AllowKeyboardNavigation(true)

        .LoadOnDemand(true)

        .RequestMapper("OverviewTreeData") // This is the action Name?

        .ShowLines(true)

        .DataSource(Model.OverviewRootNodes) // Here are my root nodes... They are shown but no expand icon

        .BindTo(bind =>

            bind.Id("ID")

            .Text("Name")

            .ParentId("ParentID")

            .Children("HasChildren") // What does Children say?

        ))

        @Html.Syncfusion().WaitingPopup("Accordion_Overlay").TargetId("updatePanel")

    </div> 

}

Controller:

        public ActionResult Index()

        {

            OverviewViewModel model = new OverviewViewModel()

            {

                OverviewRootNodes = new TreeViewNodeModel[] {

                    new TreeViewNodeModel() { 

                        ID = "Sensors",

                        Name = "Sensors",

                        HasChildren = true

                    }

                }

            };

            return View(model);

        }

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult OverviewTreeData(TreeViewModel treeViewModel, TreeViewItem b)

        {

            return Json( new TreeViewNodeModel[] {

                    new TreeViewNodeModel() { 

                        ID = "Sensors",

                        Name = "Sensors"

                    }

                });

        }

Thanks in advance.

[Ezhil S]

Hi Georg,

 

Thank you for using Syncfusion products.

 

To create a treeview with loadondemand, prepare datasource model with Id,ParentId and text field. The Child node should have Id of the corresponding parent node in ParentId field. Please refer the following code snippet,

<code>

[View]

@{Html.Syncfusion().TreeView("MyTreeView").DragandDrop(true).LoadOnDemand(true).RequestMapper("GetPostData")

                         .ShowLines(true).ShowCheckbox(true).DataSource(Model)

                         .Width(300).Height(460)

                         .BindTo(bind =>

                          bind.Id("Code").ParentId("PCode").Text("Name").Children("PCode")).Render();}

 

[Controller]

public ActionResult Index()

        {

            var data = new FirstLevelList().ListTot;

            return View(data);

        }

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult GetPostData(TreeViewModel treeViewModel, BaseItem b)

        {

            var nodes = new FirstLevelList().ListTot;

            var subNodes = nodes.Where(c => c.PCode == Convert.ToInt32(b.Value));

            return new JsonResult { Data = subNodes };

        }

 

</code>

 

Please download the sample from the following link:

Treeview.zip

 

Kindly let us know if you have further queries.

 

Regards,

Ezhil S

[Georg Poweleit]

Hello Ezhil,

I am a bit confused about the tutorial. In the example you download the full datasource at the beginning.

Isn't it possible to load the Items when a tree node is opened?

First I see: (and there are no subnodes right now)

- Node1

- Node2

When I click one of the nodes, it should call the Controller and download the childs of this node.

Regards, Georg.

[Ezhil S]

Hi Georg,

 

Thanks for the update.

 

On using LoadOnDemand in TreeView only the root nodes are loaded initially in the web page. The child nodes are loaded only on expanding the root node. Please refer the attached video file in the HTML you can see that root nodes are loaded initially and child nodes are loaded only after expanding the node.

 

Kindly let us know if you require further assistance on this.

 

Regards,

Ezhil S

Attachment: f116053_e648dd50.zip