Expander Arrows Don't Display Even Though Load On Demand and HasChildren Are Set To True

[John]

Hi,

I'm doing some testing with TreeView and want just the top level(level = 0) nodes to be loaded initially. I only want
to load second level nodes(level = 1) when I click on the arrow next to one of the top level nodes.

I set LoadOnDemand to true in the View file, and HasChildren to true for all of the top level nodes in the Controller,
but I still don't get arrows next to my top level nodes.

Here's the code from my View file that creates the TreeView:

              @(
                 Html.Kendo().TreeView()
                 .Name("treeview")
                 .HtmlAttributes(new { style = "font-size: 11px; vertical-align: middle;" })
                 .Events(events => events
                       .Select("onSelect")
                       .Expand("onExpand")
                 )
                 .LoadOnDemand(true)
                 .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.Regions)
              )

And here's the code from my Controller class that creates the collection of Regions that I bind to the tree in the View file:

                List<TreeViewItemModel> regions = new List<TreeViewItemModel>();
                foreach (DataRow r in dt.Rows)
                {
                    TreeViewItemModel theModel = new TreeViewItemModel();
                    theModel.Text = (string)r["regionName"];
                    theModel.ImageUrl = "~/Shared/Images/db78.png";
                    theModel.HasChildren = true;
                    theModel.Id = r["RegionId"].ToString();
                    regions.Add(theModel);
                }
                ViewBag.Regions = regions;

 

If anyone can point me in the right direction, it would be greatly appreciated.

Thanks,

John

[Dimitar]

Hi John,

In general, the BindTo() option is used to bind the TreeView to a list of items and is usually referred as a 'local binding'. This means that all of the nodes data will be available on page load. 

In order to achieve the desired result for retrieving the nodes after expand, a remote DataSource for the TreeView should be setup. This is demonstrated on the following demo:

• TreeView Remote Binding Demo.

In addition to the above, you could refer to the following documentation article for a detailed guide on how to configuring the Kendo UI TreeView for ASP.NET MVC to do Ajax binding using Entity Framework and the Northwind database:

• TreeView Ajax Binding.

Regards,
Dimitar
Progress Telerik