Filtering

You can use the grid's collectionView.filter property directly. This is easy to use and very flexible, but you have to implement the filter UI yourself.

For example, this grid filters the data by country:

// This file locates: "Scripts/Lesson/C1FlexGrid/Filtering.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');

    document.getElementById('filter').addEventListener('input', function (e) {
        var filter = e.target.value.toLowerCase();
        theGrid.collectionView.filter = function (item) {
            return filter.length == 0 || item.Country.toLowerCase().indexOf(filter) > -1
        }
    });
});

using System.Web.Mvc;

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

@model IEnumerable<FlexGridData.Sale>

<h1>
    @Html.Raw(Resources.C1FlexGrid.Filtering_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Filtering_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Filtering_Text2)
</p>
<div class="input-group">
    <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div>
    <input id="filter" class="form-control" placeholder="@Resources.C1FlexGrid.Filtering_Text3">
</div>
@Html.C1().FlexGrid().Id("theGrid").Bind(b=>b.Bind(Model).DisableServerRead(true)).Height(250)