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
0
loading...
Settings
Checkbox Column: Header
Show Check All: 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.
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 | @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" ></ 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 > } |