Quantcast
Channel: DevExpress Support Center (Examples)
Viewing all articles
Browse latest Browse all 7205

OBSOLETE - ASPxGridView - How to implement a custom HeaderFilter with a calendar for a date column

$
0
0

UPDATED:

Starting with version v2015 vol 2 (v15.2), this functionality is available out of the box. Simply set the GridViewDataColumn.SettingsHeaderFilter.Mode property to DateRangePicker to activate it. Please refer to the ASP.NET Grid View - Data Range Filter, Adaptivity and More (Coming soon in v15.2) blog post and the Date Range Header Filter demo for more information.
If you have version v15.2+ available, consider using the built-in functionality instead of the approach detailed below.


For Older Versions:

This example illustrates how to create a custom HeaderFilter for a date column. The main steps are: 
1) create a custom HeaderTemplate  to prevent default header filter button logic and implement custom one;
2) use ASPxPopupControl to display a Calendar and several additional filters. ASPxFormLayout is used to build a layout;
3) use the client AutoFilterByColumn method to perform filtering from the client side and  the ASPxClientGridView.PerformCallback method to pass a complex filter expression to the server to implement custom filtering;
4) process a custom callback in the ASPxGridView.CustomCallback event handler to get information about the required filter expression on the server;
5) implement the approach described in the ASPxGridView - How to programmatically change the column's filter in the FilterExpression  help article to apply a new filter.

Click on the "Model Date" column to check how this works.

MVC:
T152511: OBSOLETE - GridView - How to implement a custom HeaderFilter with a calendar for a date column


Viewing all articles
Browse latest Browse all 7205

Trending Articles