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)
}
マニュアル