FlexGrid
Boolean Checker
Use the BooleanChecker extender to add checkboxes to groups and column header of boolean column for checking all values in groups or column.
Features
ID
Date
Time
Country
Product
Amount
Amount2
Color
Active
Country: German (1 items)
1
1/25/2025
12:00 AM
German
Gadget
581.61
1,030.17
Green
Country: Italy (2 items)
2
2/25/2025
1:30 AM
Italy
Gadget
-4,673.75
3,499.71
Green
15
3/25/2025
2:00 PM
Italy
Widget
199.60
4,148.18
Green
Country: China (3 items)
3
3/25/2025
2:00 AM
China
Gadget
-2,265.49
4,535.49
Black
14
2/25/2025
1:30 PM
China
Gadget
-397.56
1,702.41
Green
16
4/25/2025
3:30 PM
China
Gadget
-176.56
506.04
Green
Country: France (3 items)
4
4/25/2025
3:30 AM
France
Widget
3,964.40
432.90
Green
6
6/25/2025
5:30 AM
France
Gadget
4,276.37
1,106.71
Red
19
7/25/2025
6:00 PM
France
Gadget
-1,397.67
3,784.00
Green
Country: UK (3 items)
5
5/25/2025
4:00 AM
UK
Widget
-1,744.99
3,355.18
Red
12
12/25/2025
11:30 AM
UK
Gadget
1,556.19
1,705.14
Red
20
8/25/2025
7:30 PM
UK
Widget
-3,476.95
4,926.25
Black
Country: US (2 items)
7
7/25/2025
6:00 AM
US
Widget
-4,376.92
1,408.24
Green
10
10/25/2025
9:30 AM
US
Widget
-2,973.96
4,568.15
Green
Country: Japan (2 items)
8
8/25/2025
7:30 AM
Japan
Gadget
1,996.52
3,077.04
Black
18
6/25/2025
5:30 PM
Japan
Gadget
4,319.97
4,562.80
Red
Country: Korea (1 items)
9
9/25/2025
8:00 AM
Korea
Widget
-3,442.35
4,068.26
Red
Country: Canada (3 items)
ID
Date
Time
Country
Product
Amount
Amount2
Color
Active
0
Settings
Show Check All: True
Show Check Groups: True
Description
In this sample, the BooleanChecker is attached to "Active" column for checking all active values.
To show checkboxes in groups header, need setting Aggregate property of the "Active" column as Aggregate.First.
Note that the BooleanChecker only works with the boolean column. Therefore, with remote data binding, you should manually set the DataType of the column as DataType.Boolean.
Use the BigCheckboxes property to sets a value that determines whether the checkboxes used to edit boolean columns should extend to cover the whole cell width.
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 | using C1.Web.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using C1.Web.Mvc.Serialization; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static List<Sale> _source = Sale.GetData(20).ToList<Sale>(); public ActionResult BooleanChecker() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary< string , object []> { { "ShowCheckAll" , new object []{ "True" , "False" }}, { "ShowCheckGroups" , new object []{ "True" , "False" }} } }; return View(_source); } public ActionResult GridBooleanCheckerUpdate([C1JsonRequest]CollectionViewEditRequest<Sale> requestData) { return this .C1Json(CollectionViewHelper.Edit(requestData, sale => { string error = string .Empty; bool success = true ; var fSale = _source.Find(item => item.ID == sale.ID); fSale.Country = sale.Country; fSale.Amount = sale.Amount; fSale.Start = sale.Start; fSale.End = sale.End; fSale.Product = sale.Product; fSale.Active = sale.Active; fSale.Amount2 = sale.Amount2; fSale.Color = sale.Color; return new CollectionViewItemResult<Sale> { Error = error, Success = success && ModelState.IsValid, Data = fSale }; }, () => _source)); } } } |
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 | @model IEnumerable< Sale > @ { ViewBag.DemoSettings = true ; var controlId = (ViewBag.DemoSettingsModel as ClientSettingsModel).ControlId; } @section Scripts{ <script type="text/javascript"> function customChangeShowCheckAll(grid, value) { let selector = c1.getExtenders(grid, wijmo.grid.selector.Selector)[0]; selector.showCheckAll = (value == 'False' ? false : true ); grid.endUpdate(); } function customChangeShowCheckGroups(grid, value) { grid.getColumn( 'Active' ).aggregate = (value == 'True' ? 'First' : 'None' ); grid.endUpdate(); } </script> } @ (Html.C1().FlexGrid< Sale >() .Id(controlId) .AutoGenerateColumns( false ) .Bind(bl => bl.Update(Url.Action( "GridBooleanCheckerUpdate" )) .Bind(Model)) .GroupBy( "Country" ).ShowGroups( true ) .Columns(bl => { bl.Add(cb => cb.Binding( "ID" ).Width( "0.4*" ).IsReadOnly( true )); bl.Add(cb => cb.Binding( "Start" ).Header( "Date" ).Width( "*" ).Format( "d" )); bl.Add(cb => cb.Binding( "End" ).Header( "Time" ).Width( "*" ).Format( "t" )); bl.Add(cb => cb.Binding( "Country" ).Width( "1.5*" )); bl.Add(cb => cb.Binding( "Product" ).Width( "1.5*" )); bl.Add(cb => cb.Binding( "Amount" ).Format( "n2" ).Width( "1.5*" )); bl.Add(cb => cb.Binding( "Amount2" ).Format( "n2" ).Width( "1.5*" )); bl.Add(cb => cb.Binding( "Color" ).Width( "1.5*" )); bl.Add(cb => cb.Binding( "Active" ).Width( "1.5*" ).Aggregate(C1.Web.Mvc.Grid.Aggregate.First)); }) .CssStyle( "height" , "500px" ) .BooleanChecker(bc => bc.Column( "Active" )) .BigCheckboxes( true ) ) @section Summary{ @Html .Raw(Resources.FlexGrid.BooleanChecker_Text0) } @section Description{ < p > @Html .Raw(Resources.FlexGrid.BooleanChecker_Text1)</ p > < p > @Html .Raw(Resources.FlexGrid.BigCheckboxes_Text0)</ p > } |