FlexGrid
Checkbox Selection
Use the Selector extender to add a checkbox-based scheme for row selection.
Features
Sample
Settings
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.
Source
CheckboxSelectionController.cs
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)); } } }
CheckboxSelection.cshtml
@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> }
Documentation