FlexGrid
Binding To XML
Features
Sample
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.
Source
BindingToXMLController.cs
using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Xml.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // GET: BindingToXML public ActionResult BindingToXML() { return View(); } public ActionResult GetProductsByCategory([C1JsonRequest] CollectionViewRequest<TCategory> requestData) { var items = new List<TCategory>(); var xml = XElement.Load(System.Web.HttpContext.Current.Server.MapPath("~/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; } } } }
BindingToXML.cshtml
@using C1.Web.Mvc.Grid @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> } @(Html.C1().FlexGrid().Id("grid").CssClass("custom-flex-grid").Width(700) .Bind("GetProductsByCategory") .ChildItemsPath("Products") .AutoGenerateColumns(false) .Columns(columns => { columns.Add().Binding("Name").Width("*"); columns.Add().Binding("Id").Width("80"); columns.Add().Binding("Price").Width("80"); }) .HeadersVisibility(HeadersVisibility.Column) .TreeIndent(25) ) @section Description { @Html.Raw(Resources.FlexGrid.TreeGrid_BindingXml_Description) }
Documentation