ASP.NET MVC Controls | ComponentOne
Working with Controls / CollectionView / Work with CollectionView / Client- Side Operations / Filtering
In This Topic
    In This Topic

    The CollectionView class supports filtering through the ICollectionView interface, similar to .NET. To enable filtering, set the CollectionView.filter property to a function that determines which objects to be included in the view.

    The following image shows how the FlexGrid appears after filtering is applied to the FlexGrid control.

    Make sure that the DisableServerRead property of ItemSource is set to True if filtering, paging, sorting is to be performed on data available at client side only.

    The example uses C1NWind data source, which was configured in the application in the Quick Start:

    Flexgrid with textbox to filter the grid data

    Input any character to filter the grid data. For instance, the image below displays how the FlexGrid appears when we enter eA.

    Character entered in textbox to filter the grid data

    The following code example demonstrates how apply filtering in FlexGrid using CollectionView.

    In Code


    Copy Code
    private C1NWindEntities db = new C1NWindEntities();
    public ActionResult Index()
        return View(db);


    Copy Code
        <input id="filteringInput" type="text" class="form-control app-pad"
          placeholder="Please input the character you want filter by Customer ID" />
        .Bind(b => b.Bind(Model.Customers).DisableServerRead(true))
        .Columns(columns => columns
            .Add(c => c.Binding("CustomerID"))
            .Add(c => c.Binding("CompanyName"))
            .Add(c => c.Binding("ContactName"))
            .Add(c => c.Binding("City"))
            .Add(c => c.Binding("Country"))
            .Add(c => c.Binding("Phone"))
    Copy Code
        $(document).ready(function () {
            // create collectionview, grid, filter with timeout, textbox for inputting filter.
            filteringGrid = wijmo.Control.getControl('#filteringGrid');
            cvFiltering = filteringGrid.itemsSource;
            filteringInput = document.getElementById('filteringInput');
            // apply filter when input
            filteringInput.addEventListener('input', filterGrid);
        // create collectionview, grid, filter with timeout, textbox for inputting filter.
        var cvFiltering = null,
            filteringGrid = null,
            filteringInput = null;
        // define the filter function for the collection view.
        function filterFunction(item) {
            var filter = filteringInput.value.toLowerCase();
            if (!filter) {
                return true;
            return item.CustomerID.toLowerCase().indexOf(filter) > -1;
        // apply filter (applied on a 500 ms timeOut)
        function filterGrid() {
            if (toFilter) {
            toFilter = setTimeout(function () {
                toFilter = null;
                if (cvFiltering.filter === filterFunction) {
                else {
                    cvFiltering.filter = filterFunction;
            }, 500);