How to customize the Excel like Filtering Items Source in UWP DataGrid?
In UWP DataGrid, 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:
Conclusion
I hope you enjoyed learning about how to customize the Excel like Filtering Items Source in UWP DataGrid.
You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!