This topic provides an overview of filtering feature in WebGrid. You can specify row filter based on a column by typing the filter text in Filter TextBox and press ENTER. You can change the filter type, apply all filters, or clear all filters by clicking the Filter Image.

WebGrid includes intuitive filtering interface such as automatic filter suggestion, filter status indicator, column filter types and more – allowing you to work with data more efficiently.

This topic contains the following sections:

Enable Filtering
Filter Status Indicator
Advanced Column Filter
Automatic Filter Suggestion
Column Filter Types
KeyStroke to Apply Column Filter
Filter Edit Type

Enable Filtering

WebGrid provides built-in column filtering which comes with rich user interface, allowing you to quickly perform data filtering. To enable data filtering in WebGrid, you simply set the AllowFilter property to Yes at LayoutSettings.

Filter Status Indicator

In conjunction with Automatic Filter Suggestion feature, Filter Status Indicator is a new user interface element which appear in the status bar. The filter indicator is useful to represent the current state of data when filter bar is not visible.

When this feature is enabled, it will automatically reflect the user's interaction in Filtering area. For instance, when you perform filtering from either context menu or filter bar, the filter indicator will be marked as active. Likewise, when all filters are removed, the indicator will be marked as disabled (inactive).

To use this feature, simply set ShowFilterStatus property to true and it will automatically reflect the user's interaction in Filtering area. For instance, when you perform filtering from either context menu or filter bar, the filter indicator will be marked as active. Likewise, when all filters are removed, the indicator will be marked as disabled (inactive).

Filter Status Indicator is a new user interface element which appears in the status bar. The filter indicator is useful to represent the current state of data when filter bar is not visible. This feature works best with the AutoFilterSuggestion feature.

The benefits of this feature are:

Quickly determines the current filter state of data.
Easily toggle the filter state by clicking on the filter indicator.
Visually enable filtering without the need to display filter bar.

When set to True, the status bar will show an indicator for the current state of filters. This feature allows you to easily determine the current state of data, as well as easily toggle the filter state.

To enable this feature, set ShowFilterStatus property of LayoutSettings object to True.

The following image illustrates the filter status indicator user interface element:

Advanced Column Filter

Since the initial version, WebGrid has provided predefined filter types that let users easily performing filters from the WebGrid user interface. The supported predefined filters are greater than or equal to, greater than, equal to, like, between, empty, null and more.

Often times, the predefined filter isn't sufficient to meet more complex requirements that involve multiple expressions in a column. WebGrid 7 introduces an advanced column filter that enables developers to write their own expressions per column.

The WebGridFilter object now includes three new properties:

UseAdvancedFilter
Set this property to true to process this filter using custom filter expression.
AdvancedFilterKey
Specifies the key name for this filter.
AdvancedFilterExpression
Specifies the filter expression for this filter.

The advanced filter expression must be compatible with ADO.NET Expression. Furthermore, the advanced expression text will not be displayed in the WebGrid user interface. Some scenarios where advanced filter can be useful are predefined filtering from custom context menu interface or custom filtering from column action interface.

The following C# code shows how to add an advanced filter for the Modified column.

C#	Copy Code
protected void WebGrid1_InitializeLayout(object sender, LayoutEventArgs e) { WebGridFilter customFilter = new WebGridFilter(); DateTime date1 = DateTime.Today.AddMonths(-1); DateTime date2 = DateTime.Today; customFilter.AdvancedFilterKey = "LastMonth"; customFilter.AdvancedFilterExpression = "([modified] > #" + date1.ToShortDateString() + "#" + " and [modified] < #" + date2.ToShortDateString() + "#)"; WebGrid1.RootTable.FilteredColumns.Add(customFilter); }

Copy Code

protected void WebGrid1_InitializeLayout(object sender, LayoutEventArgs e)
{      
   WebGridFilter customFilter = new WebGridFilter();      
   DateTime date1 = DateTime.Today.AddMonths(-1);      
   DateTime date2 = DateTime.Today;       

   customFilter.AdvancedFilterKey = "LastMonth";       
   
   customFilter.AdvancedFilterExpression = "([modified] > #" + date1.ToShortDateString() + "#" + " and [modified] < #" + date2.ToShortDateString() + "#)";                             

   WebGrid1.RootTable.FilteredColumns.Add(customFilter);
}

Automatic Filter Suggestion

WebGrid is further refined to make filtering easier to use and more intuitive to users. Introducing Automatic Filter Suggestion, users cano now easily perform data filtering based on the currently selected cell. This feature automatically adds filter suggestions based on the data type and value of the selected cell. The benefits are:

Allow users to quickly perform filtering without has to type in the filter bar.
AllowFiltering/FilterBar can be turned off while allowing user to perform filtering on existing data.

This feature also allows you to filter wide range of date in the column's or cell's context menu. The special date range filters are like Today, Tomorrow, Yesterday, Next Week, Next Month and so on. Therefore, this feature will boost users productivity by allowing them to quickly perform filter based on the current selected cell data.

To enable this feature, simply set AutoFilterSuggestion property of LayoutSettings object to True. This feature is best used along with Filter Status Indicator feature.

Column Filter Types

WebGridColumn can be filtered by numerous types, such as: EqualTo, GraeterThan, LessThan, Like, Between, NotEqualTo, NotBetween, etc. WebGrid shows different filter types depend on WebGridColumn value type (such as string, int and date).

Below are the lists of WebGrid filter types.

Member	Description
Between	WebGridColumn will be filtered by the value between the FilterText.
Contain
EqualTo	WebGridColumn will be filtered by the value equal to the FilterText.
GreaterThan	WebGridColumn will be filtered by the value greater than the FilterText.
GreaterThanOrEqualTo	WebGridColumn will be filtered by the value greater than or equal to FilterText.
IsEmpty	WebGridColumn will be filtered by the value of FilterText which is empty.
IsNull	WebGridColumn will be filtered by the value of FilterText which is null.
LessThan	WebGridColumn will be filtered by the value less than the FilterText.
LessThanOrEqualTo	WebGridColumn will be filtered by the value less than or equal to the FilterText.
Like	WebGridColumn will be filtered by the value like the FilterText.
NoFilter	WebGridColumn will not be filtered.
NotBetween	WebGridColumn will be filtered by the value not between the FilterText.
NotContain
NotEqualTo	WebGridColumn will be filtered by the value not equal to the FilterText
NotIsEmpty	WebGridColumn will be filtered by the value of FilterText which is not empty.
NotIsNull	WebGridColumn will be filtered by the value of FilterText which is not null.
NotLike	WebGridColumn will be filtered by the value not like the FilterText.
NotSet

KeyStroke to Apply Column Filter

"ShiftEnter" key is used to filter data as default. However, you can change from "ShiftEnter" to "Enter" key to filter data. For more information, please read How-to: Use 'Enter' key to filter data.

Filter Edit Type

Normally, WebGrid will use textbox as the edit type in filtering. However, WebGrid can also use different filter edit type for filtering. Here is the list of Filter edit type.

CalendarCombo	WebGridColumn's filter row can be edited in CalendarCombo style.
Checkbox	WebGridColumn's filter row can be edited in Checkbox style.
DropdownList	WebGridColumn's filter row can be edited in Dropdownlist style.
NoEdit	WebGridColumn's filter row cannot be edited.
SameAsEditType	WebGridColumn's filter row can be edited same as edit type
TextBox	WebGridColumn's filter row can be edited in TextBox style.
WebComboNET	WebGridColumn's filter row can be edited in WebCombo style.

Intersoft WebGrid Documentation
Filtering Data
See Also Send comments on this topic.