Custom Filter Operators
The FlexGridFilter class is localizable, and you can take advantage of that not only to customize the strings displayed in the UI, but also which filter conditions to show for each data type.
In this sample, we customized the list of operators by assigning custom arrays to the filter's stringOperators, numberOperators, dateOperators, and booleanOperators. Open the filter drop-downs to see the effect.
This technique allows you to re-order, remove, and include operators for each data type. It does not allow you to create new, custom operators. For that, you would have to fork the source code and customize it.
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
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 | // This file locates: "Scripts/Lesson/C1FlexGrid/CustomFilterOperators.js".c1.documentReady(function () { // customize the FlexGridFilter conditions var filter = wijmo.culture.FlexGridFilter, Operator = wijmo.grid.filter.Operator; filter.stringOperators = [ { name: '(doesn\'t matter)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Is not', op: Operator.NE }, { name: 'Is bigger than', op: Operator.GT }, // added { name: 'Is smaller than', op: Operator.LT }, // added //{ name: 'Begins with', op: Operator.BW }, //{ name: 'Ends with', op: Operator.EW }, //{ name: 'Has', op: Operator.CT }, //{ name: 'Hasn\'t', op: Operator.NC } ]; filter.numberOperators = [ { name: '(doesn\'t matter)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Is not', op: Operator.NE }, { name: 'Is bigger than', op: Operator.GT }, //{ name: 'Is Greater than or equal to', op: Operator.GE }, { name: 'Is smaller than', op: Operator.LT }, //{ name: 'Is Less than or equal to', op: Operator.LE } ]; filter.dateOperators = [ { name: '(doesn\'t matter)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Is earlier than', op: Operator.LT }, { name: 'Is later than', op: Operator.GT } ]; filter.booleanOperators = [ { name: '(not set)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Is not', op: Operator.NE }, ]; var theGrid = wijmo.Control.getControl('#theGrid');}); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1FlexGridController : Controller { // GET: CustomFilterOperators public ActionResult CustomFilterOperators() { return View(Models.FlexGridData.GetSales(200)); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1FlexGrid.CustomFilterOperators_Title)</h1><p> @Html.Raw(Resources.C1FlexGrid.CustomFilterOperators_Text1)</p><p> @Html.Raw(Resources.C1FlexGrid.CustomFilterOperators_Text2)</p><p> @Html.Raw(Resources.C1FlexGrid.CustomFilterOperators_Text3)</p>@(Html.C1().FlexGrid().Id("theGrid").Height(250) .Bind(b=>b.Bind(Model).DisableServerRead(true)) .Filterable(f=>f.DefaultFilterType(FilterType.Condition))) |