FlexGrid
FlexGrid
Binding To XML
This sample shows how you can use XML documents as a hierarchical data source for the FlexGrid control.
Features
Name
Id
Price
Name
Id
Price
Beverages
0
Chai
1
18
Chang
2
19
Guarana Fantastica
24
4.50
Sasquatch Ale
34
14
Condiments
1
Aniseed Syrup
3
10
Chef Anton\s Cajun Seasoning
4
22
Chef Anton\s Gumbo Mix
5
21.35
Grandma\s Boysenberry Spread
6
25
Northwoods Cranberry Sauce
8
40
Genen Shouyu
15
15.50
Confections
2
Pavlova
16
17.45
Teatime Chocolate Biscuits
19
9.20
Sir Rodney\s Marmalade
20
81
Sir Rodney\s Scones
21
10
NuNuCa Nuß-Nougat-Creme
25
14
Gumbär Gummibärchen
26
31.23
Schoggi Schokolade
27
43.90
Dairy Products
3
Queso Cabrales
11
21
Queso Manchego La Pastora
12
38
Gorgonzola Telino
31
12.50
Mascarpone Fabioli
32
32
Geitost
33
2.50
0
loading...
Description
This sample shows how you can use XML documents as a hierarchical data source for the FlexGrid control. It loads a XML document into a XElement object and loops through the XElement to build a list with "category" items, each with a "products" list. The list is used as an itemsSource and the ChildItemsPath property is used to show the products for each category as a tree.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Serialization; using C1.Web.Mvc; using System.Xml.Linq; using System; using System.Collections.Generic; using Microsoft.AspNetCore.Hosting; using System.IO; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult BindingToXML() { return View(); } #if NETCORE31 public ActionResult GetProductsByCategory([C1JsonRequest] CollectionViewRequest<TCategory> requestData, [FromServices] IWebHostEnvironment environment) #else public ActionResult GetProductsByCategory([C1JsonRequest] CollectionViewRequest<TCategory> requestData, [FromServices] IHostingEnvironment environment) #endif { var items = new List<TCategory>(); var xml = XElement.Load(Path.Combine(environment.WebRootPath, "Content/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; } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | @section Styles{ <style> .custom-flex-grid { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); margin-bottom: 12px; } .custom-flex-grid .wj-cell { background-color: #fff; border-bottom: none; font-size: 10pt; } .custom-flex-grid .wj-state-selected { background: #000; color: #fff; } .custom-flex-grid .wj-state-multi-selected { background: #222; color: #fff; } .custom-flex-grid .wj-header { background-color: #d0cccc; font-size: 10pt; } </style> } <c1-flex-grid id="grid" class="custom-flex-grid" width="700px" child-items-path="Products" auto-generate-columns="false" headers-visibility="Column" selection-mode="Row" tree-indent="25"> <c1-items-source read-action-url="@Url.Action("GetProductsByCategory")"></c1-items-source> <c1-flex-grid-column binding="Name" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="Id" width="80" align="center"></c1-flex-grid-column> <c1-flex-grid-column binding="Price" width="80" align="center"></c1-flex-grid-column> </c1-flex-grid> @section Description { @Html.Raw(FlexGridRes.TreeGrid_BindingXml_Description) } |