New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

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?

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

Razor
@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));
    })
)
C#
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

Razor
@(Html.Kendo().TreeView()
    .Name("ajaxTree")
    .DataTextField("name")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Employees", "Home");
        });
    })
)
C#
    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.

Binding the TreeView to XML Data

Environment

Description

Solution

More ASP.NET MVC TreeView Resources

See Also