New to Telerik UI for ASP.NET Core? Download free 30-day trial

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.

More ASP.NET Core TreeView Resources

See Also

In this article