ASP.NET MVC Controls | ComponentOne
Working with Controls / CollectionView / Work with CollectionView / Client- Side Operations / Filtering
In This Topic
    Filtering
    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

    FilteringController.cs

    C#
    Copy Code 
    private C1NWindEntities db = new C1NWindEntities();

public ActionResult Index()
{
    return View(db);
}

    Filtering.cshtml

    Razor
    Copy Code 
    <div>
    <input id="filteringInput" type="text" class="form-control app-pad"
      placeholder="Please input the character you want filter by Customer ID" />
</div>
@(Html.C1().FlexGrid().Id("filteringGrid").IsReadOnly(true).AllowSorting(false).AutoGenerateColumns(false)
    .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"))
        )
)
    Script
    Copy Code 
    <script>

    $(document).ready(function () {
        //Filtering
        // 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);
    });

    //Filtering
    // create collectionview, grid, filter with timeout, textbox for inputting filter.
    var cvFiltering = null,
        filteringGrid = null,
        toFilter,
        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) {
            clearTimeout(toFilter);
        }

        toFilter = setTimeout(function () {
            toFilter = null;
            if (cvFiltering.filter === filterFunction) {
                cvFiltering.refresh();
            }
            else {
                cvFiltering.filter = filterFunction;
            }
        }, 500);
    };
</script>