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

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));
    })
)

Razor

<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>

C#

    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

Razor

@(Html.Kendo().TreeView()
    .Name("ajaxTree")
    .DataTextField("name")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Employees", "Home");
        });
    })
)

Razor

<kendo-treeview datatextfield="name" name="ajaxTree">
    <hierarchical-datasource>
        <schema >
            <hierarchical-model id="id"></hierarchical-model>
        </schema>
    </hierarchical-datasource>
</kendo-treeview>

C#

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

• ASP.NET Core TreeView Documentation

• ASP.NET Core TreeView Demos

• ASP.NET Core TreeView Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the TreeView for ASP.NET Core
• Server-Side API Reference of the TreeView for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base