FlexGrid
FlexGrid
Checkbox Selection
Use the Selector extender to add a checkbox-based scheme for row selection.
Features
Id
Ship Country
Ship City
Shipped Date
Ship Address
Freight
Id
Ship Country
Ship City
Shipped Date
Ship Address
Freight
Ship Country: France (10 items)
$351.65
Ship City: Reims (3 items)
$39.54
10,248
France
Reims
8/16/1994
59 rue de l'Abbaye
$32.38
10,274
France
Reims
9/16/1994
59 rue de l'Abbaye
$6.01
10,295
France
Reims
10/11/1994
59 rue de l'Abbaye
$1.15
Ship City: Lyon (2 items)
$49.90
10,251
France
Lyon
8/15/1994
2, rue du Commerce
$41.34
10,334
France
Lyon
11/28/1994
2, rue du Commerce
$8.56
Ship City: Strasbourg (2 items)
$61.02
10,265
France
Strasbourg
9/12/1994
24, place Kléber
$55.28
10,297
France
Strasbourg
10/11/1994
24, place Kléber
$5.74
Ship City: Nantes (1 items)
$24.69
10,311
France
Nantes
10/27/1994
67, rue des Cinquante Otages
$24.69
Ship City: Marseille (2 items)
$176.50
10,331
France
Marseille
11/21/1994
12, rue des Bouchers
$10.19
10,340
France
Marseille
12/9/1994
12, rue des Bouchers
$166.31
Ship Country: Germany (18 items)
$1,565.14
Ship City: Münster (1 items)
$11.61
10,249
Germany
Münster
8/10/1994
Luisenstr. 48
$11.61
Ship City: Köln (1 items)
$55.09
10,260
Germany
Köln
8/29/1994
Mehrheimerstr. 369
$55.09
Ship City: München (3 items)
$371.67
10,267
Germany
München
9/6/1994
Berliner Platz 43
$208.58
10,337
Germany
München
11/29/1994
Berliner Platz 43
$108.26
10,342
Germany
München
12/5/1994
Berliner Platz 43
$54.83
Ship City: Cunewalde (5 items)
$633.16
0
loading...
Settings
CheckboxColumn: Header
ShowCheckAll: True
Description
The Selector adds checkboxes for row selection. This is very useful on mobile devices, which have no keyboards with shift and control keys for extended selections.
The Selector can be used on header columns as well as regular scrollable/data columns.
The Selector works with flat and hierarchical views. In hierarchical views, users can toggle the selected state for entire groups at once.
The Selector can be set AriaLabel to support screen reader.
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 | using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // // GET: /CheckboxSelection/ public ActionResult CheckboxSelection() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"CheckboxColumn", new object[]{"Header", "OrderID", "ShipCountry", "ShipCity"}}, {"ShowCheckAll", new object[]{"True", "False"}} } }; return View(); } public ActionResult CheckboxSelection_Bind([C1JsonRequest] CollectionViewRequest<Order> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, _db.Orders.Take(100).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 | @model IEnumerable<Order> @{ ViewBag.DemoSettings = true; var controlId = (ViewBag.DemoSettingsModel as ClientSettingsModel).ControlId; } <c1-flex-grid id="@controlId" height="500px" is-read-only="true" auto-generate-columns="false" sorting-type="None" group-by="ShipCountry,ShipCity" show-groups="true"> <c1-items-source read-action-url="@Url.Action("CheckboxSelection_Bind")"></c1-items-source> <c1-flex-grid-column binding="OrderID" header="Id"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipCountry" header="Ship Country"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipCity" header="Ship City"></c1-flex-grid-column> <c1-flex-grid-column binding="ShippedDate" header="Shipped Date"></c1-flex-grid-column> <c1-flex-grid-column binding="ShipAddress" header="Ship Address" width="*"></c1-flex-grid-column> <c1-flex-grid-column binding="Freight" header="Freight" format="c2" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-selector show-check-all="true" aria-label="Select the row here."></c1-flex-grid-selector> </c1-flex-grid> @section Scripts{ <script> function customChangeCheckboxColumn(grid, name) { let selector = c1.getExtenders(grid, wijmo.grid.selector.Selector)[0]; if (name == "Header") { selector.column = grid; } else { selector.column = grid.getColumn(name); } grid.endUpdate(); } function customChangeShowCheckAll(grid, value) { let selector = c1.getExtenders(grid, wijmo.grid.selector.Selector)[0]; selector.showCheckAll = value == "False" ? false : true; grid.endUpdate(); } </script>} @section Summary{ @Html.Raw(FlexGridRes.CheckboxSelection_Text0) } @section Description{ <p>@Html.Raw(FlexGridRes.CheckboxSelection_Text1)</p> <p>@Html.Raw(FlexGridRes.CheckboxSelection_Text2)</p> <br /> } |