Globalization and Custom UIs
The FlexGridFilter class is localizable, and you can take advantage of this feature for modifying the UI strings and also the lists of conditions and operators.
In this sample, we customized the list of operators by assigning custom arrays to the filter's stringOperators, numberOperators, dateOperators, and booleanOperators.
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
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 | // This file locates: "Scripts/Lesson/C1Mvc/Customization.js".c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid'); // customize grid filter conditions var filter = wijmo.culture.FlexGridFilter; var Operator = wijmo.grid.filter.Operator; filter.stringOperators = [ { name: '(not set)', op: null }, { name: 'Same', op: Operator.EQ }, { name: 'Different', op: Operator.NE }, { name: 'Bigger', op: Operator.GT }, // added { name: 'Smaller', 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: '(not set)', Operator: null }, { name: 'Same', op: Operator.EQ }, { name: 'Different', op: Operator.NE }, { name: 'Bigger', op: Operator.GT }, //{ name: 'Is Greater than or equal to', op: Operator.GE }, { name: 'Smaller', op: Operator.LT }, //{ name: 'Is Less than or equal to', op: Operator.LE } ]; filter.dateOperators = [ { name: '(not set)', op: null }, { name: 'Same', op: Operator.EQ }, { name: 'Earlier', op: Operator.LT }, { name: 'Later', op: Operator.GT } ]; filter.booleanOperators = [ { name: '(not set)', op: null }, { name: 'Is', op: Operator.EQ }, { name: 'Isn\'t', op: Operator.NE } ];}); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1MvcController : Controller { // GET: Customization public ActionResult Customization() { return View(Models.FlexGridData.GetSales()); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1Mvc.Customization_Title)</h1><p> @Html.Raw(Resources.C1Mvc.Customization_Text1)</p><p> @Html.Raw(Resources.C1Mvc.Customization_Text2)</p>@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(300).Filterable() |