ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / TreeGrid / Binding to XML
In This Topic
    Binding to XML
    In This Topic

    You can use XML documents as a hierarchical data source for the FlexGrid control and display the data as tree as shown in the following image.

    MVC FlexGrid TreeGrid binding with XML

    The following example shows how you can use XML documents as a hierarchical data source for the FlexGrid control. It uses XElement.Load method to load the XML element from file that contains the content of the XML document and loops through the XML element to build an array with "category" items, each with a "products" array. The array is used as an ItemsSource and the ChildItemsPath property is used to show the products for each category as a tree. The example uses ProductCategories.xml file as a data source.

    Controller code

    TreeGridXMLController.cshtml
    Copy Code
    public IActionResult TreeGridXML()
    {
        return View();
    }
    
    public ActionResult GetProductsByCategory([C1JsonRequest] CollectionViewRequest<TCategory> requestData)
    {
        var items = new List<TCategory>();
        var xml = XElement.Load(Path.Combine(Directory.GetCurrentDirectory(),@"wwwroot\data\ProductCategories.xml"));
        // get categories
        var categories = xml.Elements("category");
        foreach (var cg in categories)
        {
            items.Add(new TCategory
            {
                Id = Convert.ToInt32(cg.Attribute("id").Value),
                Name = cg.Attribute("name").Value,
                Products = new List<TProduct>()
            });
            // get products in this category
            var products = cg.Elements("product");
            foreach (var p in products)
            {
                items[items.Count - 1].Products.Add(new TProduct
                {
                    Id = Convert.ToInt32(p.Attribute("id").Value),
                    Name = p.Attribute("name").Value,
                    Price = Convert.ToDouble(p.Attribute("price").Value)
                });
            }
        }
        return this.C1Json(CollectionViewHelper.Read(requestData, items));
    }
    
    public class TCategory
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<TProduct> Products { get; set; }
    }
    
    public class TProduct
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public double Price { get; set; }
    }
    

    View code

    TreeGridXML.razor
    Copy Code
    <c1-flex-grid id="grid" child-items-path="Products" auto-generate-columns="false" height="500px">
        <c1-items-source read-action-url="@Url.Action("GetProductsByCategory")"></c1-items-source>
        <c1-flex-grid-column binding="Name" header="Name" width="*"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Id" header="ID" width="80"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Price" header="Price" width="80"></c1-flex-grid-column>
    </c1-flex-grid>