How to Customize the Excel like Filtering Items Source in SfDataGrid?

In SfDataGrid, you can easily filter data from multiple columns with enriched UI interactions that resemble the filter drop-down lists in Excel. When you want to restrict some data that is not allowed, you can customize the filter using GridFilterControl ItemsSource.

Excel-like Filtering has two modes of filtering.

1. Checkbox Filtering

2. Advanced Filtering

The following are the control parts of Checkbox Filtering.

Figure 1: Control parts of Checkbox Filtering

GridFilterControl has a list of FilterElements, checkbox options in the list, as ItemsSource that can be customized by using FilterItemsPopulated event in SfDataGrid that is raised whenever the filter list items are populated. The Filter list items are populated whenever the Filter Pop-up is open. The event argument of this event handler, GridFilterItemsPopulatedArgs, has the following properties:

• ItemsSource: Allows you to specify filter values manually.
• Column: Provides information about the column.
• FilterControl: Provides access to GridFilterControl and allows you to change its properties.

You can learn how to add and remove the FilterElement using FilterItemsPopulated event, in this section. In the FilterItemsPopulated event, you can access the column details and you can add or remove the FilterElement from ItemsSource based on the column name. The following are the properties of FilterElement:

• ActualValue: Business object value of the corresponding column.
• IsSelected: Decides whether the added FilterElement should be marked as Selected or not.
• DisplayText: Formatted text of the corresponding column.

Refer the following code example to add and remove the FilterElement from ItemsSource.

C#

void Sfdatagrid_FilterItemsPopulated(object sender, GridFilterItemsPopulatedEventArgs e)
{
    if (e.Column.MappingName == "OrderID")
    {
        var itemsSource = e.ItemsSource as List<FilterElement>;
        //Get the FilterElement to Remove from itemsSource.
        var removeElement = itemsSource.FirstOrDefault(items => items.ActualValue.Equals(10005));
        //Removed the FilterElement from itemsSource.
        itemsSource.Remove(removeElement);
        //Creates the FilterElement to add in itemsSource.
        var filterElement = new FilterElement { ActualValue = 7000, DisplayText = "7000", IsSelected = true };
        var filterElement1 = new FilterElement { ActualValue = 7001, DisplayText = "7001", IsSelected = true };  
        //FilterElements added to itemsSource.
        itemsSource.Add( filterElement);
        itemsSource.Add(filterElement1);
    }

Without customization, the FilterElement 11075 is displayed in FilterElement ItemsSource. Refer the following screenshot.

Excel-like Filtering before customizing ItemsSource:

Figure 2: Excel-like Filtering before customizing ItemsSource

After customization, Filter Element 11075 is removed from the FilterElement ItemsSource and 20000, 20001 are added to the FilterElement ItemsSource. Please refer the following screenshot.

Excel-like Filtering after customizing ItemsSource:

Figure 3: Excel-like Filtering after Customizing ItemsSource

Refer the sample from the following location.

Sample Links:

WPF

WRT

Silverlight

UWP