FlexGrid
Detail Row
Adding a row details section enables you to group some data in a template that is optionally visible or collapsed.
Features
0
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 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); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | @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)} |