FlexGridFilter

The wijmo.grid.filter module provides a FlexGridFilter class that adds an Excel-style filtering UI to each column.

The FlexGridFilter adds filter icons to the column headers. Users may click the icons to see a drop-down where they can apply filters by value or by condition:

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
11
Greece
Stereos
197,708
64,269.75
38,148.18
12
US
Phones
6,078
38,100.45
17,157.09
1
2
3
4
5
// This file locates: "Scripts/Lesson/C1FlexGrid/FlexGridFilter.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var filter = new wijmo.grid.filter.FlexGridFilter(theGrid);
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: FlexGridFilter
        public ActionResult FlexGridFilter()
        {
            return View(Models.FlexGridData.GetSales(200));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.FlexGridFilter_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.FlexGridFilter_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.FlexGridFilter_Text2)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(b=>b.Bind(Model).DisableServerRead(true)).Height(250)