Chaining Filters
The CollectionView.filter property allows you to specify one filtering function for each collection.
In some cases, you may want to use two or more independent filter functions. For example, you may want to apply a filter on the incoming data and let the FlexGridFilter apply a second level of filtering to the data.
To achieve this, you can chain multiple CollectionView objects so the output of one collection serves as input for the next.
This example creates a view collection with a filter based on an input field, and a second view2 collection based on the first collection's output. It binds a grid to second collection which has an additional, independent filter:
Result (200 items):
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/CVChaining.js".c1.documentReady(function () { // a CollectionView based on the raw data var view = c1.getService("collectionView"); // create a second CollectionView based on the first one var view2 = new wijmo.collections.CollectionView(view.items, { collectionChanged: function (s) { var cnt = document.getElementById('cnt'); cnt.textContent = wijmo.format('{length:n0}', s.items) } }); // bind a grid to the second CollectionView var theGrid = wijmo.Control.getControl('#theGrid'); theGrid.itemsSource = view2; // update the filter on the first CollectionView when the text changes document.getElementById('theFilter').addEventListener('input', function (e) { // update first CollectionView's filter var filterText = e.target.value.toLowerCase(); view.filter = function (item) { return filterText ? item.Country.toLowerCase().indexOf(filterText) > -1 : true; } // update second collection view's sourceCollection view2.sourceCollection = view.items; });}); |
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: CVChaining public ActionResult CVChaining() { 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 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1Mvc.CVChaining_Title)</h1><p> @Html.Raw(Resources.C1Mvc.CVChaining_Text1)</p><p> @Html.Raw(Resources.C1Mvc.CVChaining_Text2)</p><p> @Html.Raw(Resources.C1Mvc.CVChaining_Text3)</p><p> @Html.Raw(Resources.C1Mvc.CVChaining_Text4)</p>@Html.C1().CollectionViewService().Id("collectionView").Bind(Model).DisableServerRead(true)<input id="theFilter" name="filter" placeholder="@Resources.C1Mvc.CVChaining_Text5" /><p> @Html.Raw(Resources.C1Mvc.CVChaining_Text6)</p>@(Html.C1().FlexGrid().Id("theGrid").Height(250) .ShowAlternatingRows(false) .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column) .Filterable()) |