FlexGrid
カスタムヘッダーテンプレート
このサンプルは、カスタムヘッダーテンプレートの基本的な使用方法を示しています。
機能
サンプル
財務テーブルの例
説明
この例は、財務データを含む表を示しています。 データには2つの列グループがあり、1つはファンドの実績を示し、もう1つはファンドの構成を示します。
ソース
CustomHeaderTemplateController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
#if !NETCORE31
using Microsoft.AspNetCore.Http.Internal;
#endif
using Microsoft.Extensions.Primitives;
using Microsoft.AspNetCore.Http;
namespace MvcExplorer.Controllers
{
public class DataRepresentation
{
public DataRepresentation(params string[] args)
{
name = args[0];
currency = args[1];
ytd = args[2];
m1 = args[3];
m6 = args[4];
m12 = args[5];
stock = args[6];
bond = args[7];
cash = args[8];
other = args[9];
}
public string name;
public string currency;
public string ytd;
public string m1;
public string m6;
public string m12;
public string stock;
public string bond;
public string cash;
public string other;
}
public partial class FlexGridController : Controller
{
private static List<DataRepresentation> _data = new List<DataRepresentation>
{
new DataRepresentation("Constant Growth IXTR", "USD", "0.0523%", "0.0142%", "0.0443%", "0.0743%", "0.17%", "0.32%", "0.36%", "0.15%"),
new DataRepresentation("Optimus Prime MMCT", "EUR", "3.43%", "4.30%", "2.44%", "5.43%", "61%", "80%", "90%", "22%"),
new DataRepresentation("Serenity Now ZTZZZ", "YEN", "5.22%", "1.43%", "4.58%", "7.32%", "66%", "9%", "19%", "6%")
};
public ActionResult CustomHeaderTemplate_Bind([C1JsonRequest] CollectionViewRequest<DataRepresentation> DataRepresentation)
{
return this.C1Json(CollectionViewHelper.Read(DataRepresentation, _data));
}
public ActionResult CustomHeaderTemplate(IFormCollection collection)
{
return View();
}
}
}
CustomHeaderTemplate.cshtml
@using C1.Web.Mvc.Grid
@model IEnumerable<MvcExplorer.Controllers.DataRepresentation>
@section Scripts{
<script>
c1.documentReady(function () {
var fg = c1.mvc.grid.FlexGrid.getControl("#fnFlexGrid");
var columns = fg.columns;
for (var i = 0; i < columns.length; ++i) {
columns[i].align = 'center';
}
});
</script>
}
@{
var customHeader = new C1.Web.Mvc.HeaderTemplate();
customHeader.RowCount = 2;
customHeader.Cells = new List<C1.Web.Mvc.HeaderTemplateCell>();
{
customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 0, 2, 1, "Name"));
customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 1, 2, 1, "Currency"));
customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 2, 1, 4, "Performance"));
customHeader.Cells.Add(new C1.Web.Mvc.HeaderTemplateCell().Set(0, 6, 1, 4, "Allocation"));
};
}
<h2 style="font:bold">
@Html.Raw(FlexGridRes.HeaderTemplate_Table_Description)
</h2>
<br />
<br />
<c1-flex-grid id="fnFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true"
header-template="@customHeader"
sorting-type="None"
>
<c1-items-source read-action-url="@Url.Action("CustomHeaderTemplate_Bind")"></c1-items-source>
<c1-flex-grid-column binding="name" width="*" min-width="120"></c1-flex-grid-column>
<c1-flex-grid-column binding="currency"></c1-flex-grid-column>
<c1-flex-grid-column binding="ytd"></c1-flex-grid-column>
<c1-flex-grid-column binding="m1"></c1-flex-grid-column>
<c1-flex-grid-column binding="m6"></c1-flex-grid-column>
<c1-flex-grid-column binding="m12"></c1-flex-grid-column>
<c1-flex-grid-column binding="stock"></c1-flex-grid-column>
<c1-flex-grid-column binding="bond"></c1-flex-grid-column>
<c1-flex-grid-column binding="cash"></c1-flex-grid-column>
<c1-flex-grid-column binding="other"></c1-flex-grid-column>
</c1-flex-grid>
@section Summary{
<p>@Html.Raw(FlexGridRes.HeaderTemplate_Sumary)</p>
}
@section Description{
@Html.Raw(FlexGridRes.HeaderTemplate_Description)
}
マニュアル