Header Filter

A Header filter can operate in the four modes listed below. A specific filter mode can be specified for individual columns using a column's GridDataColumnHeaderFilterSettings.Mode property.

The following two list modes are available for all grid columns.

• List. The header filter is displayed as a regular list of filter items. Clicking an item invokes a corresponding action and automatically closes the dropdown.

  

• CheckedList. The header filter is displayed as a checked list of filter items. In this mode, an end-user can select multiple items simultaneously. When the dropdown window is closed by clicking the OK button, the grid will display those records that contain checked values.

  

The following two list modes are available for date columns only.

• DateRangeCalendar. The header filter displays a calendar and a set of predefined items. The calendar settings can be customized using the GridViewDataColumnHeaderFilterSettings.DateRangeCalendarSettings property.

  

• DateRangePicker. The header filter displays a date range picker and a set of predefined items. The editors' settings can be customized using the GridViewDataColumnHeaderFilterSettings.DateRangePickerSettings property.

  

The ASPxGridView allows you to create custom filter values, define filter criteria for them and display these values within a column's filter dropdown. To do this, handle the ASPxGridView.HeaderFilterFillItems event. Within the event, you can access the filter default values using the ASPxGridHeaderFilterEventArgs.Values event parameter, and clear them if you so require. To add a new filter item, use the ASPxGridHeaderFilterEventArgs.AddValue method. In the List mode, you can use the ASPxGridHeaderFilterEventArgs.AddShowAll method to add a ShowAll button to the list.

The FilterValue.CreateShowAllValue, FilterValue.CreateShowBlanksValue, and FilterValue.CreateShowNonBlanksValue methods can be used to create the corresponding filter items.

This example shows how to create custom filter items and display them within the Units On Order column's filter dropdown.

The image below shows the result:

protected void ASPxGridView1_HeaderFilterFillItems(object sender, DevExpress.Web.ASPxGridViewHeaderFilterEventArgs e) {
     if (e.Column.FieldName != "UnitsOnOrder") return;
     e.AddValue("nonzero", string.Empty, "[UnitsOnOrder] != 0");
     e.AddValue(String.Format("from {0} to {1}", 0, 50), string.Empty, String.Format("[UnitsOnOrder] > {0} and [UnitsOnOrder] < {1}", 0, 50));
     e.AddValue(String.Format(">= {0}", 50), string.Empty, String.Format("[UnitsOnOrder] >= {0}", 50));
}

The ASPxGridView header filter allows you to use HTML tags in an item text. This example demonstrates how you can set numbers in bold by using HTML tags within an item's format pattern. The image below shows the result.

protected void grid_HeaderFilterFillItems(object sender, ASPxGridViewHeaderFilterEventArgs e) {
     if(e.Column.FieldName == "Quantity")
          PrepareQuantityFilterItems(e);
     ...
}

protected virtual void PrepareQuantityFilterItems(ASPxGridViewHeaderFilterEventArgs e) {
     int max = 0;
     for(int i = 0; i < e.Values.Count; i++) {
          int value;
          if(!int.TryParse(e.Values[i].Value, out value)) continue;
          if(value > max) max = value;
     }
     e.Values.Clear();
     int step = 10;
     for(int i = 0; i < max / step + 1; i++) {
          int start = step * i;
          int end = start + step - 1;
          e.AddValue(string.Format("from <b>{0}</b> to <b>{1}</b>", start, end), "", string.Format("[Quantity] >= {0} and [Quantity] <= {1}", start, end));
     }   
}