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
Ship Country: France (10 items)
$332.31
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)
$30.56
10,251
France
Lyon
8/15/1994
2, rue du Commerce
$22.00
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/9/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
Id
Ship Country
Ship City
Shipped Date
Ship Address
Freight
0
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 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;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"}} } }; var nwind = new C1NWindEntities(); return View(nwind.Orders.Take(100)); } }} |
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 | @using C1.Web.Mvc.Grid@model IEnumerable<Order>@{ ViewBag.DemoSettings = true; var controlId = (ViewBag.DemoSettingsModel as ClientSettingsModel).ControlId;}@(Html.C1().FlexGrid<Order>().Id(controlId) .Bind(Model) .IsReadOnly(true) .AutoGenerateColumns(false) .SortingType(AllowSorting.None) .GroupBy("ShipCountry", "ShipCity").ShowGroups(true) .Columns(columns => { columns.Add().Binding("OrderID").Header("Id"); columns.Add().Binding("ShipCountry").Header("Ship Country"); columns.Add().Binding("ShipCity").Header("Ship City"); columns.Add().Binding("ShippedDate").Header("Shipped Date"); columns.Add().Binding("ShipAddress").Header("Ship Address").Width("*"); columns.Add().Binding("Freight").Header("Freight").Format("c2").Aggregate(Aggregate.Sum); }) .Height(500) .Selector(sb => sb.ShowCheckAll(true)) )@section Settings{ <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(Resources.FlexGrid.CheckboxSelection_Text0)}@section Description{ <p>@Html.Raw(Resources.FlexGrid.CheckboxSelection_Text1)</p>} |