詳細行

FlexGridは詳細行機能をサポートしており、テンプレート化された展開可能な行をコントロールに追加できます。FlexGridの任意の行に対して詳細セクションを追加でき、データをテンプレートにグループ化してオプションで表示できます。これによりエンドユーザーは、単に行を選択するだけで、その行に関連する追加データを表示できます。

組み込みの展開/折りたたみボタンも用意されており、展開可能な行に含まれるデータの表示/非表示を制御します。詳細行の内部にグリッド内グリッドを追加して、階層グリッドインタフェースを作成できます。

次の図は、Detail Row を持つFlexGridを示しています。例では、ローカルNorthWindデータベースファイルC1NWind.mdfからCustomerデータを使用しています。

次のコード例は、FlexGridで詳細行を有効にする方法を示します。

コードの場合

DetailRowController.cs

C#	コードのコピー
{ public class DetailRowController : Controller { private C1NWindEntities db = new C1NWindEntities(); public ActionResult DetailRow() { return View(db.Customers.Take(10).ToList()); } public ActionResult DetailRow_Read([C1JsonRequest]CollectionViewRequest<Orders> requestData) { string customerID = requestData.ExtraRequestData["CustomerID"].ToString(); return this.C1Json(CollectionViewHelper.Read(requestData, db.Orders.Where(s => s.CustomerID == customerID).ToList())); } }

コードのコピー

{
    public class DetailRowController : Controller
    { 
    private C1NWindEntities db = new C1NWindEntities();
        public ActionResult DetailRow()
        {
            return View(db.Customers.Take(10).ToList());
        }

        public ActionResult DetailRow_Read([C1JsonRequest]CollectionViewRequest<Orders> requestData)
        {
            string customerID = requestData.ExtraRequestData["CustomerID"].ToString();
            return this.C1Json(CollectionViewHelper.Read(requestData, db.Orders.Where(s => s.CustomerID == customerID).ToList()));
        }
    }

DetailRow.cshtml

HTML	コードのコピー
@model IEnumerable<CustomerWithOrders> <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" header="ID" width=""> </c1-flex-grid-column> <c1-flex-grid-column binding="CompanyName" header="会社名" width="2"> </c1-flex-grid-column> <c1-flex-grid-column binding="Country" header="国名" width="2"> </c1-flex-grid-column> <c1-flex-grid-column binding="City" header="都市" width="2"> </c1-flex-grid-column> <c1-flex-grid-detail detail-visibility-mode="DetailVisibilityMode .ExpandSingle" row-has-detail="hasDetail"> <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>

HTML

コードのコピー

@model IEnumerable<CustomerWithOrders>

<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" header="ID" width="*">
</c1-flex-grid-column>
    <c1-flex-grid-column binding="CompanyName" header="会社名" width="2*">
</c1-flex-grid-column>
    <c1-flex-grid-column binding="Country" header="国名" width="2*">
</c1-flex-grid-column>
    <c1-flex-grid-column binding="City" header="都市" width="2*">
</c1-flex-grid-column>
    <c1-flex-grid-detail detail-visibility-mode="DetailVisibilityMode
.ExpandSingle" row-has-detail="hasDetail">
   <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>

パブリッククラスCustomerWithOrdersはCustomerクラスを継承しており、CustomerWithOrdersという名前のモデルで次のように定義できることに注意してください。

C#	コードのコピー
public class CustomerWithOrders : Customer { public List<Order> Orders { get; set; } }