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.Web.Mvc; using System.Data.Entity.Validation; using System.Linq; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using System.Collections.Generic; 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> function hasDetail(row) { return row.dataItem.Country.length > 5; } </script> } <script id="detailTemplate" type="text/template"> @(Html.C1().FlexGrid() .Height("200px") .AutoGenerateColumns(false) .IsReadOnly(true) .TemplateBind("ItemsSource", "Orders") .Columns(columns => { columns.Add(column => column.Binding("ShippedDate").Width("*")); columns.Add(column => column.Binding("Freight").Width("*").Align("Center")); columns.Add(column => column.Binding("ShipVia").Width("*").Align("Center")); }) .ToTemplate() ) </script> @(Html.C1().FlexGrid() .ShowDetailRow(d => d.DetailRowTemplateId("detailTemplate").RowHasDetail("hasDetail").DetailVisibilityMode(C1.Web.Mvc.Grid.DetailVisibilityMode.ExpandMulti).IsAnimated(true)) .Id("detailRowFlexGrid") .AutoGenerateColumns(false) .IsReadOnly(true) .Bind(Model) .Columns(columns => { columns.Add(column => column.Binding("CustomerID").Width("*")); columns.Add(column => column.Binding("CompanyName").Width("2*").Align("Center")); columns.Add(column => column.Binding("Country").Width("2*").Align("Center")); columns.Add(column => column.Binding("City").Width("2*").Align("Center")); }) ) @section Description{ @Html.Raw(Resources.FlexGrid.DetailRow_Text0) }
Documentation