FlexGrid
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 | 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); } } } |
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 | @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) } |