CollectionView Filtering

Use the CollectionView.filter property to specify a filter function that defines which items should be included in the view.

Choose one of the options to see it in action:

No Filter US only Sales > 50,000 Downloads > 150,000

Result (200 items):

Country

Downloads

Sales

Expenses

145,248

81,732.54

38,401.13

Germany

111,632

20,603.32

27,944.24

181,205

44,217.79

48,877.49

Japan

54,740

29,190.63

23,365.74

Italy

126,531

46,951.19

49,107.56

Greece

6,073

86,237.02

49,767.35

135,436

31,459.18

40,845.40

Germany

169,610

99,190.22

1,631.26

139,988

52,628.41

46,700.93

Japan

137,524

54,681.54

4,055.50

Italy

37,424

45,332.72

14,858.59

Greece

197,708

64,269.75

38,148.18

6,078

38,100.45

17,157.09

// This file locates: "Scripts/Lesson/C1Mvc/CVFiltering.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var view = theGrid.collectionView;
 
    // show filtered item count
    view.collectionChanged.addHandler(function () {
        var cnt = document.getElementById('cnt');
        cnt.textContent = wijmo.format('{length:n0}', view.items)
    })
 
    // initialize item count display
    view.onCollectionChanged();
 
    // change the filter
    document.addEventListener('change', function (e) {
        var filterType = e.target.value;
        view.filter = function (item) {
 
            switch (filterType) {
                case 'Country':
                    return item.Country == 'US';
                case 'Sales':
                    return item.Sales > 50000;
                case 'Downloads':
                    return item.Downloads > 150000;
                default:
                    return true;
            }
        }
    });
});

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1Mvc.CVFiltering_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text2)
</p>
 
<label>
    <input type="radio" name="filter" value="" checked="true" />
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text3)
</label>
<label>
    <input type="radio" name="filter" value="Country" />
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text4)
</label>
<label>
    <input type="radio" name="filter" value="Sales" />
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text5)
</label>
<label>
    <input type="radio" name="filter" value="Downloads" />
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text6)
</label>
 
<p>
    @Html.Raw(Resources.C1Mvc.CVFiltering_Text7)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(250)
    .Bind(b=>b.Bind(Model).DisableServerRead(true))
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("Id").Header("ID");
        cs.Add().Binding("Country").Header("Country");
        cs.Add().Binding("Downloads").Header("Downloads");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .ShowAlternatingRows(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
)