CollectionView Filtering
Use the CollectionView.filter property to specify a filter function that defines which items should be included in the view.
Choose one of the options to see it in action:
Result (200 items):
ID
Country
Downloads
Sales
Expenses
0
US
145,248
81,732.54
38,401.13
1
Germany
111,632
20,603.32
27,944.24
2
UK
181,205
44,217.79
48,877.49
3
Japan
54,740
29,190.63
23,365.74
4
Italy
126,531
46,951.19
49,107.56
5
Greece
6,073
86,237.02
49,767.35
6
US
135,436
31,459.18
40,845.40
7
Germany
169,610
99,190.22
1,631.26
8
UK
139,988
52,628.41
46,700.93
9
Japan
137,524
54,681.54
4,055.50
10
Italy
37,424
45,332.72
14,858.59
11
Greece
197,708
64,269.75
38,148.18
12
US
6,078
38,100.45
17,157.09
ID
Country
Downloads
Sales
Expenses
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 | // This file locates: "Scripts/Lesson/C1Mvc/CVFiltering.js".c1.documentReady(function () { var theGrid = wijmo.Control.getControl('#theGrid'); var view = theGrid.collectionView; // show filtered item count view.collectionChanged.addHandler(function () { var cnt = document.getElementById('cnt'); cnt.textContent = wijmo.format('{length:n0}', view.items) }) // initialize item count display view.onCollectionChanged(); // change the filter document.addEventListener('change', function (e) { var filterType = e.target.value; view.filter = function (item) { switch (filterType) { case 'Country': return item.Country == 'US'; case 'Sales': return item.Sales > 50000; case 'Downloads': return item.Downloads > 150000; default: return true; } } });}); |
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: CVFiltering public ActionResult CVFiltering() { 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 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 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1Mvc.CVFiltering_Title)</h1><p> @Html.Raw(Resources.C1Mvc.CVFiltering_Text1)</p><p> @Html.Raw(Resources.C1Mvc.CVFiltering_Text2)</p><label> <input type="radio" name="filter" value="" checked="true" /> @Html.Raw(Resources.C1Mvc.CVFiltering_Text3)</label><label> <input type="radio" name="filter" value="Country" /> @Html.Raw(Resources.C1Mvc.CVFiltering_Text4)</label><label> <input type="radio" name="filter" value="Sales" /> @Html.Raw(Resources.C1Mvc.CVFiltering_Text5)</label><label> <input type="radio" name="filter" value="Downloads" /> @Html.Raw(Resources.C1Mvc.CVFiltering_Text6)</label><p> @Html.Raw(Resources.C1Mvc.CVFiltering_Text7)</p>@(Html.C1().FlexGrid().Id("theGrid").Height(250) .Bind(b=>b.Bind(Model).DisableServerRead(true)) .AutoGenerateColumns(false) .Columns(cs=> { cs.Add().Binding("Id").Header("ID"); cs.Add().Binding("Country").Header("Country"); cs.Add().Binding("Downloads").Header("Downloads"); cs.Add().Binding("Sales").Header("Sales"); cs.Add().Binding("Expenses").Header("Expenses"); }) .ShowAlternatingRows(false) .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)) |