FlexGrid
Filtering
This view shows how to use filtering in FlexGrid.
Features
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
1
1/25/2025
12:00 AM
German
Gadget
Green
$581.61
$1,030.17
14%
2
2/25/2025
1:30 AM
Italy
Gadget
Green
($4,673.75)
$3,499.71
13%
3
3/25/2025
2:00 AM
China
Gadget
Black
($2,265.49)
$4,535.49
20%
4
4/25/2025
3:30 AM
France
Widget
Green
$3,964.40
$432.90
21%
5
5/25/2025
4:00 AM
UK
Widget
Red
($1,744.99)
$3,355.18
12%
6
6/25/2025
5:30 AM
France
Gadget
Red
$4,276.37
$1,106.71
23%
7
7/25/2025
6:00 AM
US
Widget
Green
($4,376.92)
$1,408.24
18%
8
8/25/2025
7:30 AM
Japan
Gadget
Black
$1,996.52
$3,077.04
21%
9
9/25/2025
8:00 AM
Korea
Widget
Red
($3,442.35)
$4,068.26
16%
10
10/25/2025
9:30 AM
US
Widget
Green
($2,973.96)
$4,568.15
1%
11
11/25/2025
10:00 AM
Canada
Widget
Green
($3,217.79)
$4,414.46
14%
12
12/25/2025
11:30 AM
UK
Gadget
Red
$1,556.19
$1,705.14
1%
13
1/25/2025
12:00 PM
Canada
Gadget
Red
($4,981.75)
$4,917.13
24%
14
2/25/2025
1:30 PM
China
Gadget
Green
($397.56)
$1,702.41
19%
15
3/25/2025
2:00 PM
Italy
Widget
Green
$199.60
$4,148.18
14%
16
4/25/2025
3:30 PM
China
Gadget
Green
($176.56)
$506.04
11%
17
5/25/2025
4:00 PM
Canada
Widget
Black
($542.28)
$1,471.61
21%
18
6/25/2025
5:30 PM
Japan
Gadget
Red
$4,319.97
$4,562.80
7%
19
7/25/2025
6:00 PM
France
Gadget
Green
($1,397.67)
$3,784.00
20%
20
8/25/2025
7:30 PM
UK
Widget
Black
($3,476.95)
$4,926.25
1%
21
9/25/2025
8:00 PM
UK
Gadget
Red
$3,295.03
$1,143.47
10%
22
10/25/2025
9:30 PM
China
Widget
Red
($4,598.11)
$3,889.99
9%
23
11/25/2025
10:00 PM
Korea
Widget
Red
($3,396.86)
$4,829.86
11%
24
12/25/2025
11:30 PM
German
Widget
Green
$4,399.82
$2,594.90
5%
25
1/25/2025
12:00 AM
Korea
Gadget
Red
$3,235.00
$1,183.91
21%
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
0
Settings
ExclusiveValueSearch:
Description
This view shows how to use filtering in FlexGrid.
The ExclusiveValueSearch is an advance property to customize the behavior while searching filter value in column filter box.
You can toggle check ExclusiveValueSearch then click on column filter icon, uncheck some values and input value into search box for observing how it works.
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 | using C1.Web.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Web.Mvc; using System.Linq; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static IEnumerable<Sale> _filterDataModel = Sale.GetData(500).ToList(); private static OptionItem CreateOptionItem() { return new OptionItem { Values = new List< string > { "None" , "Condition" , "Value" , "Both" }, CurrentValue = "Both" }; } private readonly ControlOptions _gridFilterModel = new ControlOptions { Options = new OptionDictionary { { "Country" , CreateOptionItem()}, { "Product" , CreateOptionItem()}, { "Color" , CreateOptionItem()}, { "Amount" , CreateOptionItem()}, { "Active" , CreateOptionItem()} } }; public ActionResult Filter(FormCollection data) { _gridFilterModel.LoadPostData(data); ViewBag.DemoOptions = _gridFilterModel; ViewBag.FilterTypes = GetFilterTypes(_gridFilterModel); return View(_filterDataModel); } private Dictionary< string , FilterType> GetFilterTypes(ControlOptions controlOptions) { var filterTypes = new Dictionary< string , FilterType>(); foreach (var item in controlOptions.Options) { filterTypes.Add(item.Key, (FilterType)Enum.Parse( typeof (FilterType), item.Value.CurrentValue)); } return filterTypes; } } } |
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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | @using C1.Web.Mvc.Grid @model IEnumerable< Sale > @ { ControlOptions optionsModel = ViewBag.DemoOptions; Dictionary< string , FilterType> filterTypes = ViewBag.FilterTypes; ViewBag.DemoSettings = true ; } <script type="text/javascript"> function toggleExclusiveValueSearch(e) { var exclusiveValueSearch = e.target. checked ; var filteringGrid = wijmo.Control.getControl( '#filteringGrid' ); var flexGridFilter = c1.getExtenders(filteringGrid, wijmo.grid.filter.FlexGridFilter)[0]; var cols = filteringGrid.columns; for ( var i = 0; i < cols.length ; i++) { var colFilter = flexGridFilter .getColumnFilter(cols[i]); if (colFilter) { colFilter.valueFilter.exclusiveValueSearch = exclusiveValueSearch; } } } </script> @ (Html.C1().FlexGrid< Sale >() .Id( "filteringGrid" ) .AutoGenerateColumns( false ) .Bind(Model) .PageSize(25) .IsReadOnly( true ) .Columns(columns => { columns.Add(column => column.Binding( "ID" )); columns.Add(column => column.Binding( "Start" )); columns.Add(column => column.Binding( "End" ).Format( "t" )); columns.Add(column => column.Binding( "Country" )); columns.Add(column => column.Binding( "Product" )); columns.Add(column => column.Binding( "Color" )); columns.Add(column => column.Binding( "Amount" ).Format( "c" )); columns.Add(column => column.Binding( "Amount2" ).Format( "c" )); columns.Add(column => column.Binding( "Discount" ).Format( "p0" )); columns.Add(column => column.Binding( "Active" )); }) .SelectionMode(SelectionMode.Row) .SortingType(AllowSorting.SingleColumn) .Filterable(f => f.DefaultFilterType(FilterType.Both) .ColumnFilters(cfsb => { foreach (var item in filterTypes) { cfsb.Add(cfb => cfb.Column(item.Key).FilterType(item.Value).ValueFilter(vfb => { vfb.ExclusiveValueSearch( true ); })); } }) ) .CssClass( "grid" ) ) @ (Html.C1().Pager().Owner( "filteringGrid" )) @section Settings{ < p > @Html .Partial( "_OptionsMenu" , optionsModel)</ p > ExclusiveValueSearch: < input id = "exclusiveValueSearch" type = "checkbox" checked = "checked" onchange = "toggleExclusiveValueSearch(event)" /> } @section Description{ < p > @Html .Raw(Resources.FlexGrid.Filter_Text0)</ p > < p > @Html .Raw(Resources.FlexGrid.Filter_Text1)</ p > } |