Header Filter

• Jun 17, 2021
• 3 minutes to read

Column headers can display filter buttons. End users can click a filter button to invoke a filter drop-down (which lists unique values within that column) to apply filter criteria to the column. These buttons are hidden by default. To show filter buttons, set the ASPxGridSettings.ShowHeaderFilterButton property to true. Note that if a filter is applied to a column, other column header filters display unique values of the sorted cards. To show the full list of values (including values of cards hidden by the sort operation), hold down SHIFT and click a header filter button.

Header Filter Modes

Four list modes are available for filter drop-downs - GridHeaderFilterMode.List, GridHeaderFilterMode.CheckedList, GridHeaderFilterMode.DateRangePicker and GridHeaderFilterMode.DateRangeCalendar. You can use a column’s GridDataColumnHeaderFilterSettings.Mode property to specify a filter mode for individual columns. If this property is set to CheckedList for a particular column, the column’s header filter drop-down contains a check box list that allows end users to select multiple items to be included in the filter criteria.

If the GridDataColumnHeaderFilterSettings.Mode property is set to DateRangePicker or DateRangeCalendar, the column’s header filter drop-down contains a date range picker or a calendar, respectively.

Custom Header Filter Items

The ASPxCardView allows you to create custom filter values, define a filter criteria for them, and display these values within a column’s filter drop-down. To do this, handle the ASPxCardView.HeaderFilterFillItems event. Within the event, you can use the ASPxGridHeaderFilterEventArgs.Values event parameter to access the filter’s default values, and clear them if required. To add a new filter item, use the ASPxGridHeaderFilterEventArgs.AddValue method. In 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.

ASPX

<dx:ASPxCardView ID="ASPxCardView1" OnHeaderFilterFillItems="ASPxCardView1_HeaderFilterFillItems" >
    <Settings ShowHeaderFilterButton="true" ShowHeaderPanel="true" />
    <Columns>
        <dx:CardViewTextColumn FieldName="ProductName" VisibleIndex="0" .>
        <dx:CardViewTextColumn FieldName="UnitPrice" VisibleIndex="1" .>
    </Columns>
</dx:ASPxCardView>

C#

protected void ASPxCardView1_HeaderFilterFillItems(object sender, ASPxCardViewHeaderFilterEventArgs e)
{
    if (e.Column.FieldName != "UnitPrice") return;
    e.AddValue(String.Format("from {0} to {1}", 0, 100), string.Empty, String.Format("[UnitPrice] > {0} and [UnitPrice] < {1}", 0, 100));
    e.AddValue(String.Format(">= {0}", 100), string.Empty, String.Format("[UnitPrice] >= {0}", 100));
}

Result:

Using HTML Tags in Item Text

ASPxCardView’s header filter allows HTML tags in item text. The following example uses the HTML <b> tag within an item’s format pattern to highlight numbers in bold. The image below shows the result.

C#

    protected void CardView_HeaderFilterFillItems(object sender, ASPxCardViewHeaderFilterEventArgs e)
    {
        if (e.Column.FieldName == "Total")
            PrepareTotalFilterItems(e);
        if (e.Column.FieldName == "Quantity")
            PrepareQuantityFilterItems(e);
    }
   ...
    protected virtual void PrepareQuantityFilterItems(ASPxCardViewHeaderFilterEventArgs 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();
        if(e.Column.Settings.HeaderFilterMode == HeaderFilterMode.List)
        e.AddShowAll();
        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));
        }   
    }