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,
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:
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:
Get
q
uickly onboarded and successful
with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers.
Learn More
.
