devexpress-examples / asp-net-mvc-grid-filter-dates-by-month Goto Github PK

View Code? Open in Web Editor NEW

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

License: Other

C# 8.77% JavaScript 85.50% HTML 5.57% ASP.NET 0.16%

asp-net-mvc-grid-filter-dates-by-month's Introduction

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:

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;
})

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;
    }
};

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");
    }
};

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");
    }
};