DevExpress-Examples / asp-net-mvc-grid-filter-dates-by-month

Create an unbound column, populate it with data from a data source, and customize header filter items.

Grid View for ASP.NET MVC - How to filter dates by month

This example demonstrates how to create an unbound column, populate it with data from a data source, and customize header filter items.

Overview

Follow the steps below to filter dates by month:

1. Add an unbound column that stores month numbers. To enable this behavior, set the column's UnboundType to Integer.

   settings.Columns.Add(column => {
       column.FieldName = "Month";
       column.ColumnType = MVCxGridViewColumnType.DateEdit;
       column.UnboundType = DevExpress.Data.UnboundColumnType.Integer;
       column.SettingsHeaderFilter.Mode = GridHeaderFilterMode.CheckedList;
   })

2. Handle the grid's CustomUnboundColumnData event. In the handler, get date values from the specified bound column and populate the unbound column cells with month numbers.

   settings.CustomUnboundColumnData = (sender, e) => {
       if (e.Column.FieldName == "Month") {
           DateTime value = (DateTime)e.GetListSourceFieldValue("C5");
           e.Value = value.Month;
       }
   };

3. To display full dates in the unbound column, handle the grid's CustomColumnDisplayText event and specify its DisplayText argument property.

   settings.CustomColumnDisplayText = (sender, e) => {
       if (e.Column.FieldName == "Month") {
           DateTime realValue = ((DateTime)e.GetFieldValue("C5"));
           e.DisplayText = realValue.ToString("dd MMM yyyy");
       }
   };

4. Handle the grid's HeaderFilterFillItems event to add custom header filter items based specified by the month number.

   settings.HeaderFilterFillItems = (sender, e) => {
       if (e.Column.FieldName == "Month") {
           e.Values.Clear();
           e.AddValue("January", "1");
           e.AddValue("February", "2");
           e.AddValue("March", "3");
           e.AddValue("April", "4");
           e.AddValue("May", "5");
           e.AddValue("June", "6");
           e.AddValue("July", "7");
           e.AddValue("August", "8");
           e.AddValue("September", "9");
           e.AddValue("October", "10");
           e.AddValue("November", "11");
           e.AddValue("December", "12");
       }
   };

Files to Review

• _GridViewPartial.cshtml
• Index.cshtml

Documentation

• Unbound Columns
• Header Filter

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)