FlexGrid
Detail Row
Features
Sample
Description
Adding a row details section enables you to group some data in a template that is optionally visible or collapsed.
For example, you can add row details to a FlexGrid that presents only a summary of the data for each row, but presents more data when the user selects a row.
Also, you can set a callback function that determines whether a row has details.
For example, you can add row details to a FlexGrid that presents only a summary of the data for each row, but presents more data when the user selects a row.
Also, you can set a callback function that determines whether a row has details.
Source
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)
}
Documentation