Adding a row filter to System.Web.Helpers.WebGrid

ASP.NET MVC 3 web grid doesn't have a row filter out of the box but it could be easily added in case of need.

Suppose we have such model:

Passing it to a view with the markup showed below

gives this output

We use autocomplete attribute to tell browser do not store previously used filters thus drop-down list won't hide the grid. Also we have attached onchange event handler which will submit the form every time we change the filter value.

Unfortunately if rows in the grid are sorted somehow, applying a filter resets this order. To keep sort order during form submit we should add two hidden inputs:

To obtain necessary values we make use of SortFieldName, SortColumn, SortDirectionFieldName and SortDirection properties of WebGrid class.

As these field values are passed to WebGrid automatically we need only add filter parameter to controller method and use it, for example, in Enumerable.Where() method:

The grid with applied filter looks like:

WebGrid control is smart enough to add current filter value to URLs in grid's header, so sorting doesn't reset filter!

Sort indicator in System.Web.Helpers.WebGrid

ASP.NET MVC 3 has a new long expected native class System.Web.Helpers.WebGrid which is highly customizable and could be used in a number of different scenarios. Among other the grid is able to automatically sort data by selected column.

I would like to show how to add a sort indicator near the column title. It's not too difficult, but as I know, can't be done by configuring WebGrid itself. This sample is using new Razor view engine.

This markup

renders to:

As you can see column titles are linked to the same page but these links now have two extra parameters sort and sortdir which are considered by WebGrid during rendering process. These parameters are mapped to SortColumn and SortDirection properties respectively. Thus we can check if data is sorted, determine selected column using jQuery selector and add a little triangle to it's title:

The indicator will look like this:

This sample of course could be expanded for real world usage.