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
CustomerID
CompanyName
Country
City
CustomerID
CompanyName
Country
City
ALFKI
Alfreds Futterkiste
Germany
Berlin
ANATR
Ana Trujillo Emparedados y helados
Mexico
México D.F.
ANTON
Antonio Moreno Taquería
Mexico
México D.F.
AROUT
Around the Horn
UK
London
BERGS
Berglunds snabbköp
Sweden
Luleå
BLAUS
Blauer See Delikatessen
Germany
Mannheim
BLONP
Blondel père et fils
France
Strasbourg
BOLID
Bólido Comidas preparadas
Spain
Madrid
BONAP
Bon app'
France
Marseille
BOTTM
Bottom-Dollar Markets
Canada
Tsawassen
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) } |