FlexGrid
XMLに連結
機能
サンプル
説明
このサンプルは、FlexGridコントロールの階層データソースとしてXML文書を使用する方法を示します。XML文書をXElementオブジェクトにロードし、XElementをループ処理して、「products」リストを持つ「category」項目のリストを構築します。リストはitemsSourceとして使用され、ChildItemsPathプロパティは各カテゴリの商品をツリーとして表示するために使用されます。
ソース
BindingToXMLController.cs
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; } } } }
BindingToXML.cshtml
@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) }
マニュアル