You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/datagrid/excel-like-filter.md
+44-46Lines changed: 44 additions & 46 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,17 @@ control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
-
# Excel-like filter in Blazor DataGrid
10
+
# Excel-like Filter in Blazor DataGrid
11
11
12
-
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid provides an Excel-like filter feature that delivers a familiar and intuitive interface for filtering data. This feature simplifies complex filtering operations on individual columns, enabling efficient data exploration and manipulation similar to Microsoft Excel. Excel-like filtering is particularly effective when working with large datasets and advanced filtering requirements.
12
+
## Introduction
13
13
14
-
The following example demonstrates how to render the Excel-like filter in the DataGrid:
14
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid includes an Excel-like filter feature that provides an easy-to-use interface for filtering data. This feature mirrors the filtering tools found in Microsoft Excel, making it intuitive for individuals already familiar with that application.
15
+
16
+
Excel-like filtering proves especially valuable when working with large datasets or when complex filtering operations are required for specific columns. This feature enables rapid data refinement to locate required information.
17
+
18
+
## Getting Started with Excel-like Filter
19
+
20
+
To enable Excel-like filtering in a Blazor DataGrid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** and configure [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) with **FilterType.Excel**.
> * Provides search functionality to find specific values within the filter dialog
104
+
> * Allows clearing of previously applied filters
97
105
98
-
## Checkbox filtering
106
+
## Checkbox Filtering
99
107
100
-
The checkbox filtering feature in the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid enables filtering data based on checkbox selections within a column. This filtering option simplifies the process of narrowing down data and is particularly effective for columns containing categorical values.
101
-
102
-
The following example demonstrates how to render the checkbox filter in the DataGrid:
108
+
Checkbox filtering offers another straightforward approach to filter data. With this method, specific values can be displayed by selecting checkboxes next to each option in a column. This approach works effectively when data contains distinct categories or grouped values.
By default, the filter dialog displays a maximum of **1000** distinct values as a checkbox list for each column. This default value ensures efficient filtering performance, especially when working with large datasets. The filter dialog retrieves distinct values from the first **1000** records bound to the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid. Additional values are retrieved dynamically through the search option within the dialog.
191
+
By default, the filter dialog displays up to **1000** distinct values in the checkbox list for each column. This limit ensures the filter dialog loads promptly and performs efficiently, particularly with large datasets. The limit can be modified based on specific requirements.
186
192
187
-
The number of distinct values shown in the checkbox list of the Excel or checkbox filter dialog can be customized. This configuration is useful when adjusting the default filter choice count to suit specific dataset sizes or performance requirements.
193
+
The filter dialog retrieves values from the first **1000** records in the dataset. If additional values exist, they load automatically when searching in the dialog.
188
194
189
-
To modify the filter choice count, set the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) property in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event.
195
+
### Adjusting the Filter Choice Count
190
196
191
-
The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog:
197
+
The [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) property in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event modifies the number of values displayed in the filter dialog.
* Setting a high filter choice count can significantly degrade performance when opening the Excel-style or checkbox-type filter dialog. A large number of unique values requires more processing and rendering time, which can lead to noticeable delays in the UI.
305
-
To ensure smooth and responsive filtering behavior:
309
+
> **Performance Consideration:** Setting a high `FilterChoiceCount` may slow the filter dialog when it opens. Processing and displaying a large number of values requires additional time, potentially resulting in noticeable delays. To maintain smooth filtering, select a value that balances functional requirements with acceptable performance levels.
306
310
307
-
- Avoid setting excessively high filter choice count values.
308
-
- Restrict the count to a reasonable limit to prevent slow rendering and improve user experience.
311
+
## Display Custom Text in Filter Options
309
312
310
-
## Show customized text in checkbox list data
313
+
The DataGrid supports customization of text displayed in filter checkbox lists. Custom, user-friendly labels can replace raw data values.
311
314
312
-
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid provides flexibility to customize the text displayed in the Excel or checkbox filtering options. This feature enables modification of the default text to present more meaningful and context-specific labels in the filter dialog.
315
+
### Using Custom Filter Item Templates
313
316
314
-
To customize the text in the Excel or checkbox filter, define a [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate)and bind it to the desired column. The `FilterItemTemplate`property allows creation of custom templates for filter items. Any logic and HTML elements can be used within this template to display the required content.
317
+
The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property enables creation of custom templates for filter items, allowing custom logic and HTML elements for displaying specific content.
315
318
316
-
The following example demonstrates how to customize the text displayed in the filter checkbox list for the **Delivered** column. The `FilterItemTemplate` is defined within the column element, using [FilterItemTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterItemTemplateContext.html) to conditionally display**Delivered**when the value is**true**and Not delivered when the value is **false**:
319
+
The following example demonstrates how to customize text in a **Delivered** column filter. Instead of displaying**true**or **false**, it displays**Delivered**or **Not delivered**:
The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property in the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid allows customization of the appearance of filter items in the checkbox list for a specific column. This property is useful for displaying custom UI elements or additional information—such as icons, formatted text, or HTML content—alongside the default filter items.
414
+
## Add Icons and Visual Elements to Filter Options
414
415
415
-
The following example demonstrates how to use the `FilterItemTemplate` to render icons along with category names in the filter checkbox list for the **CategoryName** column:
416
+
Filter options can be enhanced with visual elements such as icons positioned alongside filter text. The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property enables inclusion of custom UI elements including icons, styled text, and other HTML content in filter items.
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid allows customization of the Excel filter dialog appearance using CSS. This enables alignment with specific application aesthetics and user interface requirements.
533
+
The Excel filter dialog appearance can be customized using CSS (Cascading Style Sheets). This enables alignment of the filter dialog with application design and visual requirements.
533
534
534
-
**1.Removing context menu option**
535
+
### Hiding the Context Menu
535
536
536
-
The Excel filter dialog includes features such as the**context menu**, **search box**, and **checkbox list**. In scenarios where the context menu is not required, it can be hidden using the className attribute in the Grid.
537
+
The Excel filter dialog contains several components, including a**context menu**, **search box**, and **checkbox list**. The context menu can be hidden when not required using CSS.
537
538
538
539
```cshtml
539
540
<style>
@@ -543,8 +544,6 @@ The Excel filter dialog includes features such as the **context menu**, **search
543
544
</style>
544
545
```
545
546
546
-
The following example demonstrates how to remove the context menu option in the Excel filter dialog using the above CSS.
**2.Customize the height and width of filter popup**
630
+
### Changing Filter Dialog Size
632
631
633
-
The height and width of each column’s filter dialog can be customized using CSS within the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. This event is triggered before the filter dialog opens, allowing conditional styling based on column configuration.
634
-
635
-
The following example demonstrates how to set custom height and width for the **CustomerID** and **OrderDate** columns using CSS styles.
632
+
The filter dialog height and width can be customized for each column. CSS combined with the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event enables application of custom sizes based on which column is being filtered.
After applying a filter, the DataGrid displays a built-in filtered icon with default styles. This icon can be customized using the**.e-grid .e-filtered::before** CSS class.
755
+
When a filter is applied to a column, the DataGrid displays an icon in that column's header. The**.e-grid .e-filtered::before** CSS class enables modification of the icon appearance.
759
756
760
757
{% tabs %}
761
758
{% highlight razor tabtitle="Index.razor" %}
@@ -838,16 +835,17 @@ public class OrderData
838
835
{% endhighlight %}
839
836
{% endtabs %}
840
837
841
-
## Add current selection to filter
842
-
843
-
By default, the CheckBox and Excel filter types apply filtering only to the currently selected items. When filtering is performed multiple times on the same column, previously selected values are cleared.
844
-
845
-
To retain previously filtered values, enable the Add current selection to filter option. This checkbox appears when data is searched using the search bar in the CheckBox or Excel filter dialog.
838
+
## Combining multiple filter selections
846
839
847
-
The following image illustrates this behavior:
840
+
By default, when a filter is applied multiple times to the same column, the new filter replaces the previous selection. Previously applied filters can be retained by using the **Add current selection to filter** option. This checkbox appears in the filter search bar when searching for values in the CheckBox or Excel filter dialog.
848
841
849
842
N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
846
+
## See Also
847
+
848
+
Comprehensive information about the Syncfusion Blazor DataGrid and its features is available through the following resources:
849
+
850
+
***Feature Overview:** The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour provides a complete overview of available capabilities.
851
+
***Interactive Examples:** The [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) provide practical demonstrations of data presentation and manipulation.
0 commit comments