We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: UWP |
Control: SfDataGrid |
.NET Framework: 4.5
Tags: filtering

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.

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.


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.
        //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);

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

Excel-like Filtering before customizing ItemsSource:

Filter Element 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:

Filtering after customization

Figure 3: Excel-like Filtering after Customizing ItemsSource

Refer the sample from the following location.

Sample Links:





2X faster development

The ultimate UWP UI toolkit to boost your development speed.
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile