Binding the TreeView to XML Data
Environment
| Product | Telerik UI for ASP.NET MVC TreeView |
| Product Version | Created with version 2024.4.1112 |
Description
How can I bind the TreeView component to XML in ASP.NET MVC 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));
})
)
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message = "Welcome to ASP.NET MVC!";
XElement element = XElement.Load(Server.MapPath("~/App_Data/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");
});
})
)
public class HomeController : Controller
{
public JsonResult Employees(string id)
{
XElement element = XElement.Load(Server.MapPath("~/App_Data/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, JsonRequestBehavior.AllowGet);
}
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.