Binding the TreeView to XML Data
Environment
Product | Telerik UI for ASP.NET Core TreeView |
Product Version | Created with version 2024.4.1112 |
Description
How can I bind the TreeView component to XML in ASP.NET Core application?
Solution
The example below uses the System.Xml.Linq
library to convert the XML structure into C# models. The models represent the hierarchical data from the XML file and are then used to populate the TreeView data. Binding data from an XML source can be implemented using the following approaches:
- Server Binding
@model IEnumerable<Telerik.Examples.Mvc.Areas.TreeViewBindingToXml.Models.Employee>
@(Html.Kendo().TreeView()
.Name("serverTree")
.BindTo(Model, (Kendo.Mvc.UI.Fluent.NavigationBindingFactory<TreeViewItem> mappings) =>
{
mappings.For<Telerik.Examples.Mvc.Areas.TreeViewBindingToXml.Models.Employee>(bound => bound.ItemDataBound((node, employee) =>
{
node.Text = employee.name;
node.Id = employee.id.ToString();
})
.Children(e => e.items));
})
)
<kendo-treeview name="serverTree">
<items>
@foreach (var employee in Model)
{
<treeview-item text="@employee.name" id="@employee.id">
<items>
@foreach (var item in employee.items)
{
<treeview-item text="@item.name" id="@item.id"></treeview-item>
}
</items>
</treeview-item>
}
</items>
</kendo-treeview>
public class HomeController : Controller
{
private readonly IWebHostEnvironment _webHostEnvironment;
public HomeController(IWebHostEnvironment webHostEnvironment)
{
_webHostEnvironment = webHostEnvironment;
}
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
XElement element = XElement.Load(Path.Combine(_webHostEnvironment.ContentRootPath, "employees.xml"));
List<Employee> employees = ToEmployees(element);
return View(employees);
}
private List<Employee> ToEmployees(XElement element)
{
if (element != null && element.HasElements)
{
List<Employee> employees = new List<Employee>();
foreach (var child in element.Elements("Employee"))
{
var employee = ToEmployee(child);
if (employee.hasChildren)
{
employee.items = ToEmployees(child.Element("items"));
}
employees.Add(employee);
}
return employees;
}
return null;
}
}
- AJAX Binding
@(Html.Kendo().TreeView()
.Name("ajaxTree")
.DataTextField("name")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Employees", "Home");
});
})
)
<kendo-treeview datatextfield="name" name="ajaxTree">
<hierarchical-datasource>
<schema >
<hierarchical-model id="id"></hierarchical-model>
</schema>
</hierarchical-datasource>
</kendo-treeview>
public class HomeController : Controller
{
private readonly IWebHostEnvironment _webHostEnvironment;
public HomeController(IWebHostEnvironment webHostEnvironment)
{
_webHostEnvironment = webHostEnvironment;
}
public JsonResult Employees(string id)
{
XElement element = XElement.Load(Path.Combine(_webHostEnvironment.ContentRootPath, "employees.xml"));
IEnumerable<Employee> result;
if (!string.IsNullOrEmpty(id))
{
// Search for "id" and return it's child items.
result = FindByID(id, element.Element("Employee")).Element("items").Elements("Employee").Select(e => ToEmployee(e));
}
else
{
// Return first level nodes.
result = element.Elements("Employee").Select(e => ToEmployee(e));
}
return Json(result);
}
private XElement FindByID(string id, XElement element)
{
if (element.Element("employeeId").Value == id)
{
return element;
}
if (element.Element("items") != null)
{
XElement item;
foreach (var child in element.Element("items").Elements("Employee"))
{
item = FindByID(id, child);
if (item != null)
{
return item;
}
}
}
return null;
}
private Employee ToEmployee(XElement element)
{
return new Employee()
{
id = int.Parse(element.Element("employeeId").Value),
name = element.Element("name").Value,
hasChildren = element.Element("items") != null
};
}
}
To see the complete example, refer to the binding the TreeView to XML data in the UI for ASP.NET MVC Examples repository. You can use this as a starting point to configure the same behavior in an ASP.NET Core project.