FlexGridFilter Optimizations

The wijmo.grid.filter module provides a FlexGridFilter class that adds an Excel-style filtering UI to each column. The FlexGridFilter provides two types of filters: value filter and condition filter.

The value filter editor contains a list of unique values for the user to choose from. If the grid contains a lot of data, this list of unique values may take a while to generate. Furthermore, if the list contains too many values, it is not very useful. A condition filter may be more appropriate in such cases.

This sample shows how you can optimize the value filters in three ways:

uniqueValues: The 'Rating' column filter specifies the list of possible unique values in the column, so the filter does not have to scan the data to build the list.
maxValues: The 'Sales' column filter specifies that the list should show up to 20 values only. You may use the filter field in the editor to select which values you are interested in.
filterType: The 'Expenses' column filter specifies that the only filter type to be used is condition. A value filter is not even displayed for this column.

Country

Rating

Sales

Expenses

81,732.54

38,401.13

Germany

20,603.32

27,944.24

44,217.79

48,877.49

Japan

29,190.63

23,365.74

Italy

46,951.19

49,107.56

Greece

86,237.02

49,767.35

31,459.18

40,845.40

Germany

99,190.22

1,631.26

52,628.41

46,700.93

Japan

54,681.54

4,055.50

Italy

45,332.72

14,858.59

Greece

64,269.75

38,148.18

38,100.45

17,157.09

// This file locates: "Scripts/Lesson/C1FlexGrid/FilterOptimizations.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // generate some random data
    var view = theGrid.collectionView;
    for (var i = 0; i < view.items.length; i++) {
        view.items[i].Rating = Math.round(Math.random() * 5);
    }
 
    // FlexGridFilter client-side filtering
    var filter = c1.getExtender(theGrid, "theGridFilter");
 
    // ratings are values from 0 to 5
    var filterRating = filter.getColumnFilter('Rating');
    filterRating.valueFilter.uniqueValues = [0, 1, 2, 3, 4, 5];
 
    // limit number of values shown in sales filter
    var filterSales = filter.getColumnFilter('Sales');
    filterSales.valueFilter.maxValues = 20;
 
    // filter expenses only by condition
    var filterExpenses = filter.getColumnFilter('Expenses');
    filterExpenses.filterType = 'Condition';
});

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Text2) 
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Text3)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Text4)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Text5)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.FilterOptimizations_Text6)
    </li>
</ol>
 
@(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("Rating").Header("Rating");
        cs.Add().Binding("Sales").Header("Sales");
        cs.Add().Binding("Expenses").Header("Expenses");
    })
    .Filterable(f=>f.Id("theGridFilter"))
)