FlexGrid
FlexGrid
Master-Detail
The client side CollectionView has built-in support for currency, which enables you to implement master-detail scenarios with FlexGrid.
Features
Customers:
CustomerID
CompanyName
Country
City
ALFKI
Alfreds Futterkiste
55555sany
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
CustomerID
CompanyName
Country
City
0
All orders of the selected Customer:
OrderID
EmployeeID
OrderDate
ShippedDate
RequiredDate
Freight
ShipVia
ShipName
ShipCountry
ShipCity
ShipAddress
ShipPostalCode
10,643
6
9/25/1995
10/3/1995
10/23/1995
29.46
1
Alfreds Futterkiste
Germany
Berlin
Obere Str. 57
12209
10,692
4
11/3/1995
11/13/1995
12/1/1995
61.02
2
Alfred's Futterkiste
Germany
Berlin
Obere Str. 57
12209
10,702
4
11/13/1995
11/21/1995
12/25/1995
23.94
1
Alfred's Futterkiste
Germany
Berlin
Obere Str. 57
12209
10,835
1
2/15/1996
2/21/1996
3/14/1996
69.53
3
Alfred's Futterkiste
Germany
Berlin
Obere Str. 57
12209
10,952
1
4/15/1996
4/23/1996
5/27/1996
40.42
1
Alfred's Futterkiste
Germany
Berlin
Obere Str. 57
12209
11,011
3
5/9/1996
5/13/1996
6/6/1996
1.21
1
Alfred's Futterkiste
Germany
Berlin
Obere Str. 57
12209
OrderID
EmployeeID
OrderDate
ShippedDate
RequiredDate
Freight
ShipVia
ShipName
ShipCountry
ShipCity
ShipAddress
ShipPostalCode
0
loading...
Description
The client side CollectionView has built-in support for currency, which enables you to implement master-detail scenarios with FlexGrid. You can refer to the currentItem and use it as a binding source for any elements on the page.
Note that you have to update the details view when the current item changes. To do that, attach a handler to the currentChanged event and update the details view as needed.
Note that you have to update the details view when the current item changes. To do that, attach a handler to the currentChanged event and update the details view as needed.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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 { // GET: /<controller>/ public ActionResult MasterDetail() { return View(_db.Customers.Take(10).ToList()); } public ActionResult DetailData([C1JsonRequest] CollectionViewRequest<Order> requestData) { string customerID = requestData.ExtraRequestData[ "CustomerID" ].ToString(); return this .C1Json(CollectionViewHelper.Read(requestData, _db.Orders.Where(s => s.CustomerID == customerID).ToList())); } } } |
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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | @model IEnumerable< Customer > @section Scripts{ <script type="text/javascript"> var grid, cv, detail, cvDetail, currentItem; c1.documentReady( function () { grid = wijmo.Control.getControl( "#Customer" ); cv = grid.collectionView; cv.currentChanged.addHandler(getOrders); cv.moveCurrentToFirst(); }); function getOrders() { detail = wijmo.Control.getControl( "#Orders" ); cvDetail = detail.collectionView; cvDetail.refresh(); } function getCustomer(sender, e) { if (e.extraRequestData == null ) { e.extraRequestData = {}; } grid = wijmo.Control.getControl( "#Customer" ); if (grid) { currentItem = grid.collectionView.currentItem; e.extraRequestData[ "CustomerID" ] = currentItem ? currentItem.CustomerID : "" ; } } </script> } < h4 > @Html .Raw(FlexGridRes.MasterDetail_Text0)</ h4 > < c1-flex-grid id = "Customer" auto-generate-columns = "false" is-read-only = "true" selection-mode = "Row" > < c1-flex-grid-column binding = "CustomerID" width = "*" /> < c1-flex-grid-column binding = "CompanyName" width = "2*" /> < c1-flex-grid-column binding = "Country" width = "2*" /> < c1-flex-grid-column binding = "City" width = "2*" /> < c1-items-source source-collection = "Model" /> </ c1-flex-grid > < br /> < h4 > @Html .Raw(FlexGridRes.MasterDetail_Text1)</ h4 > < c1-flex-grid id = "Orders" auto-generate-columns = "false" is-read-only = "true" > < c1-flex-grid-column binding = "OrderID" /> < c1-flex-grid-column binding = "EmployeeID" /> < c1-flex-grid-column binding = "OrderDate" /> < c1-flex-grid-column binding = "ShippedDate" /> < c1-flex-grid-column binding = "RequiredDate" /> < c1-flex-grid-column binding = "Freight" /> < c1-flex-grid-column binding = "ShipVia" /> < c1-flex-grid-column binding = "ShipName" /> < c1-flex-grid-column binding = "ShipCountry" /> < c1-flex-grid-column binding = "ShipCity" /> < c1-flex-grid-column binding = "ShipAddress" /> < c1-flex-grid-column binding = "ShipPostalCode" /> < c1-items-source read-action-url = "@Url.Action(" DetailData ")" query-data = "getCustomer" /> </ c1-flex-grid > @section Description{ @Html .Raw(FlexGridRes.MasterDetail_Text2) } |