FlexGrid
詳細行
機能
サンプル
説明
行の詳細セクションを追加すると、いくつかのデータをテンプレートにまとめて、それを任意に表示/非表示にすることができます。
たとえば、各行にデータのサマリーのみが表示される FlexGrid に行詳細を追加して、ユーザーが行を選択したときにその他のデータを表示することができます。
また、行に詳細があるかどうかを判定するためのコールバック関数を設定できます。
たとえば、各行にデータのサマリーのみが表示される FlexGrid に行詳細を追加して、ユーザーが行を選択したときにその他のデータを表示することができます。
また、行に詳細があるかどうかを判定するためのコールバック関数を設定できます。
ソース
DetailRowController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
public ActionResult DetailRow()
{
var customers = _db.Customers.Take(10).ToList();
var model = customers.Select(c => new CustomerWithOrders
{
CustomerID = c.CustomerID,
CompanyName = c.CompanyName,
Country = c.Country,
City = c.City,
Orders = (_db.Orders.Where(o => o.CustomerID == c.CustomerID).ToList())
});
return View(model);
}
}
}
DetailRow.cshtml
@model IEnumerable<CustomerWithOrders>
@section Scripts{
<script type="text/javascript">
function hasDetail(row) {
return row.dataItem.Country.length > 5;
}
</script>
}
<c1-flex-grid id="detailRowFlexGrid" auto-generate-columns="false" is-read-only="true">
<c1-flex-grid-column binding="CustomerID" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="CompanyName" width="2*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Country" width="2*"></c1-flex-grid-column>
<c1-flex-grid-column binding="City" width="2*"></c1-flex-grid-column>
<c1-flex-grid-detail detail-visibility-mode="ExpandSingle" row-has-detail="hasDetail" is-animated="true">
<c1-flex-grid auto-generate-columns="false" is-read-only="true" height="200px" template-bindings="@(new {ItemsSource="Orders"})">
<c1-flex-grid-column binding="ShippedDate" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="Freight" width="*"></c1-flex-grid-column>
<c1-flex-grid-column binding="ShipVia" width="*"></c1-flex-grid-column>
</c1-flex-grid>
</c1-flex-grid-detail>
<c1-items-source source-collection="Model"></c1-items-source>
</c1-flex-grid>
@section Description{
@Html.Raw(FlexGridRes.DetailRow_Text0)
}
マニュアル