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 ( items):

// 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;
    });
});

using System.Web.Mvc;

namespace LearnMvcClient.Controllers
{
    public partial class C1MvcController : Controller
    {
        // GET: CVChaining
        public ActionResult CVChaining()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}

@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()
)