From 2749bc91d72fcea290a00a650bbcf183dc9b0e99 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Fri, 7 Nov 2025 11:08:32 +0530 Subject: [PATCH 1/4] 991627: Updated the UG content and samples for Filtering in Blazor DataGrid --- blazor/datagrid/excel-like-filter.md | 10 +- blazor/datagrid/filter-bar.md | 52 ++++++----- blazor/datagrid/filter-menu.md | 34 +++---- blazor/datagrid/filtering.md | 133 ++++++++++++--------------- 4 files changed, 106 insertions(+), 123 deletions(-) diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md index 4a824f61eb..8f19f2139b 100644 --- a/blazor/datagrid/excel-like-filter.md +++ b/blazor/datagrid/excel-like-filter.md @@ -1,17 +1,17 @@ --- layout: post title: Excel Like Filter in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Excel like filter in Syncfusion Blazor DataGrid and much more details. +description: Check out and learn here all about Excel like filter in Syncfusion Blazor DataGrid and much more details. platform: Blazor control: DataGrid documentation: ug --- -# Excel like filter in Blazor DataGrid +# Excel-like filter in Blazor DataGrid The Syncfusion® Blazor DataGrid offers an Excel-like filter feature, providing a familiar and user-friendly interface for filtering data within the Grid. This feature simplifies complex filtering operations on specific columns, allowing for quick data location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large datasets and complex filtering requirements. -Here is an example that showcasing how to render the Excel like filter within the Grid: +Here is an example that showcases how to render the Excel like filter within the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,14 +92,14 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVfZVDQLqvKxcHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * The Excel-like filter feature supports various filter conditions, including text-based, number-based, date-based, and boolean-based filters. +> * The Excel-like filter feature supports various filter conditions, including text-based filters that allow searching for exact or partial matches, number-based filters with operators like equals, greater than, or between ranges, date-based filters for specific date ranges or conditions such as today, this week, or custom ranges, and boolean-based filters for true/false values. > * The filter dialog provides additional options, such as searching for specific values, and clearing applied filters. ## Checkbox filtering The checkbox filtering feature in the Syncfusion® Blazor DataGrid enables you to filter data based on checkbox selections within a column. This powerful filtering option simplifies the process of narrowing down data, providing a more efficient and user-friendly experience. The check box filter feature is particularly useful when dealing with columns containing categorical data. -Here is an example that showcasing how to render the check box filter within the Grid: +Here is an example that showcases how to render the check box filter within the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/filter-bar.md b/blazor/datagrid/filter-bar.md index 49eb386297..5fd3f8337d 100644 --- a/blazor/datagrid/filter-bar.md +++ b/blazor/datagrid/filter-bar.md @@ -9,12 +9,12 @@ documentation: ug # Filter bar in Blazor DataGrid -The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing you to enter filter criteria and instantly see the filtered results. +The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing entry of filter criteria and instant viewing of filtered results. -By defining the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) to true, then filter bar row will be rendered next to header which allows you to filter data. You can filter the records with different expressions depending upon the column type. +Enable the filter bar by setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) to true, rendering a filter bar row below the header for data filtering. Filter records using different expressions depending on column type. **Filter bar expressions** -You can enter the following filter expressions (operators) manually in the filter bar. +Enter the following filter expressions (operators) manually in the filter bar. Expression |Example |Description |Column Type -----|-----|-----|----- @@ -26,10 +26,10 @@ Expression |Example |Description |Column Type <=|<=value|LessThanOrEqual |Number * |*value |StartsWith |String % |%value |EndsWith |String -N/A |N/A | **equal** operator will always be used for date filter. |Date -N/A |N/A |**equal** operator will always be used for Boolean filter. |Boolean +N/A |N/A | **Equal** operator always used for date filter. |Date +N/A |N/A | **Equal** operator always used for Boolean filter. |Boolean -The following example demonstrates how to activate default filtering in the Grid: +The following example demonstrates activation of default filtering in the Grid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -42,7 +42,7 @@ The following example demonstrates how to activate default filtering in the Grid - + @@ -50,7 +50,7 @@ The following example demonstrates how to activate default filtering in the Grid @code { - public List GridData { get; set; } + private List GridData; SfGrid Grid; @@ -71,18 +71,18 @@ public class OrderData public OrderData() {} public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, string ShipCity, string ShipName) { - this.OrderID = OrderID; + this.OrderID = OrderID; this.CustomerID = CustomerID; this.OrderDate = OrderDate; this.ShipCity = ShipCity; - this.ShipName = ShipName; + this.ShipName = ShipName; } public static List GetAllRecords() { if (Orders.Count() == 0) { - + int OrderID = 10247; for (int i = 1; i < 3; i++) @@ -116,15 +116,15 @@ public class OrderData ## Filter bar modes -The Syncfusion® Blazor DataGrid refers to two different ways in which the Grid’s filter bar can operate when filtering criteria are applied. These modes, **OnEnter Mode** and **Immediate Mode**, offer users different experiences and behaviors when interacting with the filter bar. +The Syncfusion® Blazor DataGrid refers to two different ways the Grid’s filter bar operates: **OnEnter Mode** and **Immediate Mode**, offering distinct user experiences. **OnEnter Mode:** -By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property as [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), the filter bar captures the filter criteria entered but doesn’t initiate filtering until the **Enter** key is pressed. This allows multiple criteria modifications without triggering immediate filtering actions. +Set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) as [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) in [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This captures criteria but applies filtering only on Enter key press, allowing modifications without triggering actions. **Immediate Mode:** -By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property as [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), the filter bar instantly applies filtering as filter criteria are entered. Filtering actions take place as soon as criteria are input or modified, providing real-time previews of filtering results. +Set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) as [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) in [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This applies filtering instantly as criteria are entered, providing real-time previews. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -143,7 +143,7 @@ By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusio - + @@ -233,9 +233,9 @@ public class OrderData ## Display filter text in pager -The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides you with a clear understanding of the applied filters and the criteria used for filtering. +The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides users with a clear understanding of applied filters and criteria used for filtering. -To enable the display of filter text within the pager, you should set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. +To enable display of filter text within the pager, set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -254,7 +254,7 @@ To enable the display of filter text within the pager, you should set the [ShowF - + @@ -355,7 +355,7 @@ public class OrderData ## Prevent filtering for particular column -In the Syncfusion® Blazor DataGrid, you can prevent filtering for a specific column by utilizing the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object and setting it to **false**. This feature is useful when you want to disable filtering options for a particular column. +In the Syncfusion® Blazor DataGrid, prevent filtering for a specific column by utilizing the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object and setting it to **false**. This feature is useful when disabling filtering options for a particular column. Here’s an example that demonstrates how to remove the filter bar for the **CustomerID** column in Grid: @@ -435,9 +435,9 @@ public class OrderData ## Hide filter bar for template column -By default, the filter bar is set to a disabled mode for template columns in the Syncfusion® Blazor DataGrid. However, in certain cases, you may want to hide the filter bar for a template column to provide a customized filtering experience. +By default, the filter bar is set to a disabled mode for template columns in the Syncfusion® Blazor DataGrid. However, customize the filter bar for a template column to provide a customized filtering experience. -To hide the filter bar for a template column, you can use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows you to define a custom template for the filter bar of a column. +To hide the filter bar for a template column, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows definition of a custom template for the filter bar of a column. Here’s an example that demonstrates how to hide the filter bar for a template column in the Grid: @@ -521,9 +521,9 @@ public class OrderData ## Filter bar template with custom component -The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid allows you to customize the components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows you to use various components, such as [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp), within the filter bar based on your specific requirements. +The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid allows customization of components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows use of various components, such as [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp), within the filter bar based on specific requirements. -To utilize this feature, you can define a custom template for the filter bar by setting the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) in your Blazor application: +To utilize this feature, define a custom template for the filter bar by setting the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) in the Blazor application: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -552,7 +552,7 @@ To utilize this feature, you can define a custom template for the filter bar by - + @@ -722,4 +722,6 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for groundbreaking representations. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to present and manipulate data. \ No newline at end of file diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 0d6d6d5c38..4b89eca908 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -9,9 +9,9 @@ documentation: ug # Filter menu in Blazor DataGrid -The filter menu in the Syncfusion® Blazor DataGrid allows you to enable filtering and provides a user-friendly interface for filtering data based on column types and operators. +The filter menu in the Syncfusion® Blazor DataGrid enables filtering data using column-specific operators, offering enhanced control over dataset views. -To enable the filter menu, you need to set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu**. This property determines the type of filter UI that will be rendered. The filter menu UI allows you to apply filters using different operators. +To enable the filter menu, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu**. This renders filter icons in column headers when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) is **true**, allowing interactive filtering with various operators. Here is an example that demonstrates the usage of the filter menu in the Grid: @@ -97,11 +97,11 @@ public class OrderData ## Custom component in filter menu -You can enhance the filtering experience in the Syncfusion® Blazor DataGrid by customizing the filter menu with custom components. This allows you to replace the default search box with custom components like dropdowns or textboxes. By default, the filter menu provides an [Autocomplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) for string type columns, a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for number type columns, and a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for boolean type columns, making it easy to search for values. +Enhance filtering with custom components by utilizing the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows replacement of default inputs with alternatives like dropdowns or textboxes. -To customize the filter menu, you can make use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property. This property allows you to integrate your desired custom filter component into a specific column of the Grid. To implement a custom filter UI, you need to define the following functions: +By default, the filter menu provides an [Autocomplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) for string type columns, a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for number type columns, and a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for boolean type columns, facilitating value selection. -For example, you can replace the standard search box in the filter menu with a `DropDownList`. This enables you to perform filtering operations by selecting values from the dropdown list, rather than manually typing in search queries. +Replace the standard search box in the filter menu with a `DropDownList` for the **OrderID** column. Here is a sample code demonstrating how to render a `DropDownList` for the **OrderID** column: @@ -116,7 +116,7 @@ Here is a sample code demonstrating how to render a `DropDownList` for the **Ord - + @@ -199,7 +199,7 @@ public class OrderData ## Show 24 hours time format in filter dialog -The Syncfusion® Blazor DataGrid provides a feature to display the time in a 24-hour format in the date or datetime column filter dialog. By default, the filter dialog displays the time in a 12-hour format (AM/PM) for the date or datetime column. However, you can customize the default format by setting the type as **DateTime** and the format as **MM/dd/yyyy HH:mm**. To enable the 24-hour time format in the filter dialog, you need to handle the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property is used to add custom components to a particular column and set the `TimeFormat` of the `DateTimepicker` to **HH:mm**. +Display time in 24-hour format in date or datetime column filter dialogs. By default, the dialog shows time in 12-hour format (AM/PM). Customize using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Set the `TimeFormat` of the `DateTimepicker` to **HH:mm**. Here is an example that demonstrates how to show 24 hours time format in filter dialog: @@ -214,13 +214,13 @@ Here is an example that demonstrates how to show 24 hours time format in filter - + - + @@ -293,17 +293,17 @@ public class OrderData ## Customizing filter menu operators list -The Syncfusion® Blazor DataGrid enables you to customize the default filter operator list by utilizing the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event of the Grid. You can customize operators for string, number, date, and boolean data types. +Customize the default filter operator list using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. Support customization for string, number, date, and boolean data types. -The available options for customization are: +Available customization options: -* **StringOperator**- defines customized string operator list. +* **StringOperator** - Defines customized string operator list. -* **NumberOperator** - defines customized number operator list. +* **NumberOperator** - Defines customized number operator list. -* **DateOperator** - defines customized date operator list. +* **DateOperator** - Defines customized date operator list. -* **BooleanOperator** - defines customized boolean operator list. +* **BooleanOperator** - Defines customized boolean operator list. Here is an example of how to customize the filter operators list in the Grid: @@ -318,7 +318,7 @@ Here is an example of how to customize the filter operators list in the Grid: - + @@ -557,7 +557,7 @@ public class Orders ## Customize the default input component of filter menu dialog -You have the flexibility to customize the default settings of input components within the menu filter by utilizing the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property is used to add custom components to a particular column, allowing you to modify the behavior of specific filter components to better suit your needs. +Customize default input components in menu filter dialogs using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). | Column Type | Default component |Customization | API Reference | | ----------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- | diff --git a/blazor/datagrid/filtering.md b/blazor/datagrid/filtering.md index b811dc1b6f..9689bd1336 100644 --- a/blazor/datagrid/filtering.md +++ b/blazor/datagrid/filtering.md @@ -9,9 +9,9 @@ documentation: ug # Filtering in Blazor DataGrid -Filtering is a powerful feature in the Syncfusion® Blazor DataGrid that enables you to selectively view data based on specific criteria. It allows you to narrow down large datasets and focus on the information you need, thereby enhancing data analysis and decision-making. +Filtering in the Syncfusion® Blazor DataGrid allows selective viewing of data based on criteria, narrowing datasets to focus on needed information for better data analysis and decision-making. -To enable filtering in the Grid, you need to set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the Grid to true. Once filtering is enabled, you can configure various filtering options through the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This property allows you to define the behavior and appearance of the filter. +To enable filtering in the Grid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the Grid to true. This configures various filtering options through the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) property. Here is an example that demonstrates the default filtering feature of the Grid: @@ -89,12 +89,12 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/VNrfZCsImdiJgcDd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * You can apply and clear filtering by using **FilterByColumnAsync** and **ClearFilteringAsync** methods. +> * Apply and clear filtering using **FilterByColumnAsync** and **ClearFilteringAsync** methods. > * To disable filtering for a particular column, set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering) property of **GridColumn** as **false**. ## Initial filter -To apply an initial filter, you need to specify the filter criteria using the [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). The `Predicate` object represents the filtering condition and contains properties such as field, operator, and value. +Apply an initial filter by specifying filter criteria using the [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). The `Predicate` object represents the filtering condition and contains properties such as field, operator, and value. Here is an example of how to configure the initial filter using the `Predicate` object: @@ -154,7 +154,7 @@ public class OrderData int OrderID = 10248; for (int i = 1; i < 3; i++) { - Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevalier")); + Orders.Add(new OrderData(OrderID+1, "VINET", "Reims", "Vins et alcools Chevalier")); Orders.Add(new OrderData(OrderID+2, "TOMSP", "Münster", "Toms Spezialitäten")); Orders.Add(new OrderData(OrderID+3, "HANAR", "Rio de Janeiro", "Hanari Carnes")); Orders.Add(new OrderData(OrderID+4, "VICTE", "Lyon", "Victuailles en stock")); @@ -181,11 +181,9 @@ public class OrderData ### Initial filter with multiple values for same column -In the Syncfusion® Blazor DataGrid, you can establish an initial filter containing multiple values for a particular column, which helps you to preset filter conditions for a specific column using multiple values. This functionality allows you to display a filtered records in the Grid right after the Grid is initially loaded. +Set an initial filter with multiple values for a single column by using the [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This applies multiple conditions at Grid load. -To apply the filter with multiple values for same column at initial rendering, set the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -The following example demonstrates, how to perform an initial filter with multiple values for same **CustomerID** column using `Columns` property of `GridFilterSettings` and `Predicate`. +The following example demonstrates how to perform an initial filter with multiple values for the **CustomerID** column using `Columns` property of `GridFilterSettings` and `Predicate`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -306,9 +304,7 @@ The following example demonstrates, how to perform an initial filter with multip ### Initial filter with multiple values for different columns -In the Syncfusion® Blazor DataGrid, you can establish an initial filter containing multiple values for a different column, which helps you to preset filter conditions for a different column using multiple values. This functionality allows you to display a filtered records in the Grid right after the Grid is initially loaded. - -To apply the filter with multiple values for different column at initial rendering, set the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). +Apply an initial filter with multiple values across different columns by using the [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This presets conditions for multiple columns at Grid load. The following example demonstrates how to perform an initial filter with multiple values for different **Order ID** and **Customer ID** columns using `Columns` property of `GridFilterSettings` and `Predicate`: @@ -449,9 +445,9 @@ The following example demonstrates how to perform an initial filter with multipl ## Filter operators -The Syncfusion® Blazor DataGrid provides various filter operators that can be used to define filter conditions for columns. The filter operator for a column can be defined using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`. +The Syncfusion® Blazor DataGrid provides various filter operators to define filter conditions for columns. Define the filter operator using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`. -The available operators and its supported data types are, +The available operators and their supported data types are, Operator |Description |Supported Types -----|-----|----- @@ -477,13 +473,13 @@ Between |Filter the values based on the range between the start and end specifie ## WildCard and Like operator filter -**WildCard** and **Like** filter operators filter value based on the given string pattern, and they apply to string-type columns. But it will work slightly differently. +**WildCard** and **Like** filter operators filter value based on given string patterns, applied to string-type columns, with differences in pattern usage. ### WildCard filtering -The **WildCard** filter can process one or more search patterns using the “*” symbol, retrieving values matching the specified patterns. +**WildCard** filtering uses the **“*”** symbol to process one or more search patterns, retrieving matching values across types in the Grid. -* The **WildCard** filter option is supported for the Grid that has all search options. +* **WildCard** supports all search options. Operator |Description -----|----- @@ -491,36 +487,30 @@ a*b | Everything that starts with “a” and ends with “b”. a* | Everything that starts with “a”. *b | Everything that ends with “b”. a | Everything that has an “a” in it. -ab* | Everything that has an “a” in it, followed by anything, followed by a “b”, followed by anything. +ab* | Everything that has an “a” in it, followed by “b”, followed by anything. -The following GIF represent a WildCard operator filtering. - -![Blazor DataGrid with WildCard operator filtering.](./images/blazor-datagrid-wildcard-operator-filtering.gif) +![Blazor DataGrid with WildCard operator filtering](./images/blazor-datagrid-wildcard-operator-filtering.gif) ### Like filtering -The Like filter can process single search patterns using the “%” symbol, retrieving values matching the specified patterns. The following Syncfusion® Blazor DataGrid features support Like filtering on string-type columns: +Like filtering uses the **“%”** symbol to process single search patterns, retrieving matching values on string-type columns for Grid features supporting it. -* Filter Menu -* Filter Bar using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. -* Custom Filter of Excel filter type. +* Like filtering supports Filter Menu, Filter Bar with [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator), and custom Excel filter. -**For example** +**Examples:** | Operator | Description | | ----- | ----- | -| %ab% | Returns all the value that are contains “ab” character. | -| ab% | Returns all the value that are ends with “ab” character. | -| %ab | Returns all the value that are starts with “ab” character. | - -The following GIF represent a Like operator filtering. +| %ab% | Returns values containing “ab”. | +| ab% | Returns values ending with “ab”. | +| %ab | Returns values starting with “ab”. | -![Blazor DataGrid with like operator filtering.](./images/blazor-datagrid-like-operator-filtering.gif) +![Blazor DataGrid with like operator filtering](./images/blazor-datagrid-like-operator-filtering.gif) ## Filtering with case sensitivity -The Syncfusion® Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. This feature is useful when you want to control whether filtering operations should consider the case of characters. It can be achieved by using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). +The Syncfusion® Blazor DataGrid supports case sensitivity in filtering using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). -Below is an example code demonstrating how to enable or disable case sensitivity while filtering: +The following example demonstrates enabling or disabling case sensitivity in filtering: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -621,11 +611,9 @@ public class OrderData ## Enable different filter for a column -The Syncfusion® Blazor DataGrid offers the flexibility to customize filtering behavior for different columns by enabling various types of filters such as **Menu**, **Excel**, **Checkbox**. This feature allows you to tailor the filtering experience to suit the specific needs of each column in your Grid. For example, you might prefer a menu-based filter for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column. +Enable various filter types such as **Menu**, **Excel**, or **Checkbox** for different columns by adjusting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. -It can be achieved by adjusting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration based on your requirements. - -Here’s an example where the menu filter is enabled by default for all columns, but you can dynamically modify the filter types through a `DropDownList`: +The following example demonstrates enabling different filter types dynamically through a dropdown: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -645,7 +633,7 @@ Here’s an example where the menu filter is enabled by default for all columns, - + @@ -780,9 +768,9 @@ public class OrderData ## Change default filter operator for particular column -The Syncfusion® Blazor DataGrid provides the flexibility to change the default filter operator for a particular column. By default, the filter operator for string-type columns is **StartsWith**, for numerical-type columns is **Equal**, and for boolean-type columns is also **Equal**. However, you may need to customize the filter operator to better match the nature of the data in a specific column. This can be achieved using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. +Change the default filter operator for a column using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. -Here’s an example that demonstrates how to change the default filter operator column: +The following example demonstrates changing the default operator dynamically: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -943,11 +931,9 @@ public class OrderData ## Filter Blazor DataGrid programmatically with single and multiple values using method -Programmatic filtering in the Syncfusion® Blazor DataGrid with single and multiple values allows you to apply filters to specific columns in the Grid without relying on interactions through the interface. - -This can be achieved by utilizing the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_) method of the Grid. +Filter the Grid programmatically with single or multiple values using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_) method of the Grid. -The following example demostrates, how to programmatically filter the Grid using single and multiple values for the **OrderID** and **CustomerID** columns. This is accomplished by calling the `FilterByColumnAsync` method within an external button click function: +The following example demonstrates how to filter the Grid programmatically using single and multiple values for the **OrderID** and **CustomerID** columns, called within button click functions: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -956,7 +942,7 @@ The following example demostrates, how to programmatically filter the Grid using @using Syncfusion.Blazor.Buttons Filter with single value - Filter with multiple values +Filter with multiple values @@ -1043,15 +1029,15 @@ public class OrderData ## How to get filtered records -Retrieving filtered records in the Syncfusion® Blazor DataGrid is essential when you want to work with data that matches the currently applied filters. You can achieve this using available methods and properties in the Grid. +Obtaining filtered records in the Syncfusion® Blazor DataGrid is useful for working with data matching current filters. -**1.Using the GetFilteredRecordsAsync() method** +### Using the GetFilteredRecordsAsync() method -The [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync) method is used to obtain an array of records that match the currently applied filters on the Grid. +The [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync) method retrieves an array of records matching applied filters. -This method retrieves an array of records that match the currently applied filters on the Grid. +This method retrieves an array of records matching applied filters. -Here’s an example of how to get the filtering data in a Grid using the `GetFilteredRecordsAsync` method: +The following example demonstrates getting the filtering data using the `GetFilteredRecordsAsync` method: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1203,9 +1189,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hjhpZCiFKFFRoZzt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -**2.Using the GetFilteredRecordsAsync() method for remote data** +### Using the GetFilteredRecordsAsync() method for remote data -Use the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync) method to retrieve the details of the filtered records from the Grid. The `GetFilteredRecordsAsync` method returns the filtered records in the form of objects when using a remote data source. So, you need to deserialize the object to retrieve the filtered records. +For remote data sources, the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync) method returns records as objects. Deserialize the object to retrieve filtered records. ```cshtml @using Syncfusion.Blazor.Data @@ -1307,31 +1293,25 @@ Use the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLTXiUChxbmPDxX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}. - -**3.Using the properties in the FilteredEventArgs object** - -Alternatively, you can use the properties available in the FilteredEventArgs object to obtain the filter record details. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLTXiUChxbmPDxX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -* [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilteredEventArgs.html#Syncfusion_Blazor_Grids_FilteredEventArgs_ColumnName): This property returns the column name that is currently filtered. +### Using the properties in the FilteredEventArgs object -* [FilterPredicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilteredEventArgs.html#Syncfusion_Blazor_Grids_FilteredEventArgs_FilterPredicates): This property returns the object containing filter predicate model details that is currently filtered. - -To access these properties, you can use the [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) event handler as shown below: +Alternatively, use properties in the FilteredEventArgs object to obtain filter details. Use the [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) event handler as follows: ```cshtml - public async Task FilteredHandler(FilteredEventArgs args) - { - var columnname = args.ColumnName; - var FilterPredicates = args.FilterPredicates; - } +public async Task FilteredHandler(FilteredEventArgs args) +{ + var columnname = args.ColumnName; + var FilterPredicates = args.FilterPredicates; +} ``` ## Clear filtering using methods -The Syncfusion® Blazor DataGrid provides a method called [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) to clear the filtering applied to the Grid. This method is used to remove the filter conditions and reset the Grid to its original state. +Use the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to clear applied filters and reset the Grid to its original state. -Here’s an example of how to clear the filtering in a Grid using the `ClearFilteringAsync` method: +The following example demonstrates clearing filtering using the `ClearFilteringAsync` method: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1418,11 +1398,9 @@ public class OrderData ## Filtering events -Filtering events allow you to customize the behavior of the Syncfusion® Blazor DataGrid when filtering is applied. You can prevent filtering for specific columns, show messages to users, or perform other actions to suit your application’s needs. - -To implement filtering events in the Syncfusion® Blazor DataGrid, you can utilize the available events such as [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered). These events allow you to intervene in the filtering process and customize it as needed. +Filtering events allow customization of DataGrid behavior during filtering. Use available events such as [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) to intervene in the filtering process. -In the given example, the filtering is prevented for ShipCity column during `Filtering` event: +In the example, filtering is prevented for the ShipCity column during the `Filtering` event: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1533,9 +1511,9 @@ public class OrderData ## Filter enum column -Filter the enum type data in the Syncfusion® Blazor DataGrid column using the Filter Template feature of the Grid. +Filter enum-type column data using the Filter Template feature of the Grid. -In the following sample, the `SfDropDownList` is rendered in the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the Type column. The enumerated list data can be bound to the Type column. In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`, dynamically filter the Type column using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_) method of the Grid. +In the example, the `SfDropDownList` renders in the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the Type column. Enum lists bind to the Type column. In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`, filter the Type column dynamically using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_) method. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1651,5 +1629,8 @@ public enum FileType : short {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## See also +* [How to Perform Multiple Value Filtering for Same Column in Grid](https://support.syncfusion.com/kb/article/10996/how-to-perform-multiple-value-filtering-for-same-column-in-grid?isInternalRefresh=False) \ No newline at end of file From e31a236e3af784f6f87638df70013e344fef2b18 Mon Sep 17 00:00:00 2001 From: SadhanaBaskaran Date: Sat, 8 Nov 2025 03:24:57 +0530 Subject: [PATCH 2/4] 991627: Updated the UG content and samples for Filtering in Blazor DataGrid --- blazor/datagrid/excel-like-filter.md | 60 +++++++------ blazor/datagrid/filter-bar.md | 48 ++++++----- blazor/datagrid/filter-menu.md | 115 ++++++++++++------------- blazor/datagrid/filtering.md | 124 +++++++++++++++------------ 4 files changed, 185 insertions(+), 162 deletions(-) diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md index 8f19f2139b..40790f93d7 100644 --- a/blazor/datagrid/excel-like-filter.md +++ b/blazor/datagrid/excel-like-filter.md @@ -1,7 +1,7 @@ --- layout: post title: Excel Like Filter in Blazor DataGrid | Syncfusion -description: Check out and learn here all about Excel like filter in Syncfusion Blazor DataGrid and much more details. +description: Implement Excel-like filtering in Syncfusion Blazor DataGrid for efficient data management in Blazor applications. platform: Blazor control: DataGrid documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Excel-like filter in Blazor DataGrid -The Syncfusion® Blazor DataGrid offers an Excel-like filter feature, providing a familiar and user-friendly interface for filtering data within the Grid. This feature simplifies complex filtering operations on specific columns, allowing for quick data location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large datasets and complex filtering requirements. +The Syncfusion® 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. -Here is an example that showcases how to render the Excel like filter within the Grid: +The following example demonstrates how to render the Excel-like filter in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,14 +92,14 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVfZVDQLqvKxcHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * The Excel-like filter feature supports various filter conditions, including text-based filters that allow searching for exact or partial matches, number-based filters with operators like equals, greater than, or between ranges, date-based filters for specific date ranges or conditions such as today, this week, or custom ranges, and boolean-based filters for true/false values. +> * The Excel-like filter feature supports various filter conditions, including text-based, number-based, date-based, and boolean-based filters. > * The filter dialog provides additional options, such as searching for specific values, and clearing applied filters. ## Checkbox filtering -The checkbox filtering feature in the Syncfusion® Blazor DataGrid enables you to filter data based on checkbox selections within a column. This powerful filtering option simplifies the process of narrowing down data, providing a more efficient and user-friendly experience. The check box filter feature is particularly useful when dealing with columns containing categorical data. +The checkbox filtering feature in the Syncfusion® 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. -Here is an example that showcases how to render the check box filter within the Grid: +The following example demonstrates how to render the checkbox filter in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -182,13 +182,13 @@ public class OrderData ## Customize the filter choice count -By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 records bind to the Syncfusion® Blazor DataGrid to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. +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® Blazor DataGrid. Additional values are retrieved dynamically through the search option within the dialog. -The Grid allows you to customize the number of distinct data displayed in the checkbox list of the Excel/Checkbox type filter dialog. This can be useful when you want to customize the default filter choice count values while using large datasets. +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. -However, you have the flexibility to increase or decrease the filter choice count based on your specific requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) value. +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. -The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event, you can set the `FilterChoiceCount` property to the desired value: +The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -300,15 +300,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVfXVjhBrOeigOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The specified filter choice count value determines the display of unique items as a checkbox list in the Excel/Checkbox type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value. +N> +* 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. +To ensure smooth and responsive filtering behavior: + +- Avoid setting excessively high filter choice count values. +- Restrict the count to a reasonable limit to prevent slow rendering and improve user experience. ## Show customized text in checkbox list data -The Syncfusion® Blazor DataGrid provides you with the flexibility to customize the text displayed in the Excel/Checkbox filtering options. This allows you to modify the default text and provide more meaningful and contextual labels for the filtering. +The Syncfusion® 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. -To customize the text in the Excel/Checkbox filter, you can define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows you to create custom templates for filter items. You can use any logic and HTML elements within this template to display the desired text or content. +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. -In the example below, you can see how you can customize the text displayed in the filter checkbox list for the **Delivered** column. This is achieved by defining a `FilterItemTemplate` within the element for that specific column. Inside the template, you can use FilterItemTemplateContext to conditionally display **Delivered** if the data value is true and **Not delivered** if the value is **false**: +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**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -405,9 +410,9 @@ public class OrderData ## Show template in checkbox list data -The `FilterItemTemplate` property in the Syncfusion® Blazor DataGrid allows you to customize the appearance of filter items in the Grid’s filter checkbox list for a specific column. This property is useful when you want to provide a custom UI or additional information within the filter checkbox list, such as icons, text, or any HTML elements, alongside the default filter items. +The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property in the Syncfusion® 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. -In this example, you can see how to use the `FilterItemTemplate` to render icons along with the category names in the filter checkbox list for the **CategoryName** column: +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: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -524,11 +529,11 @@ public class OrderData ## Customize the Excel filter dialog using CSS -In the Syncfusion® Blazor DataGrid, you have the flexibility to enhance the visual presentation of the Excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog’s appearance according to the specific needs and aesthetics of your application. +The Syncfusion® Blazor DataGrid allows customization of the Excel filter dialog appearance using CSS. This enables alignment with specific application aesthetics and user interface requirements. **1.Removing context menu option** -The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some scenarios. You can remove these options using the className attribute in the Grid. +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. ```cshtml ``` -The following example demonstrates how to remove the context menu option in the Excel filter dialog using above mentioned CSS: +The following example demonstrates how to remove the context menu option in the Excel filter dialog using the above CSS. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -625,9 +630,9 @@ public class OrderData **2.Customize the height and width of filter popup** -You can customize the height and width of each column’s filter dialog using the CSS style in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event of the Grid. +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. -Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the boolean value, we have set the height and width of the **CustomerID** and **OrderDate** columns using the CSS style in the following sample. +The following example demonstrates how to set custom height and width for the **CustomerID** and **OrderDate** columns using CSS styles. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -642,7 +647,7 @@ Before opening a filter dialog for each column, the `FilterDialogOpening` event - + @@ -750,7 +755,7 @@ public class OrderData **3.Customize filter icon for filtered columns** -After filtering the column, the Grid will display the in-built filtered icon with predefined styles by default. The filtered icon can also be customized using .e-grid .e-filtered::before class. +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -835,13 +840,14 @@ public class OrderData ## Add current selection to filter -By default, the CheckBox/Excel filter can only filter the selected items. If filtering is done multiple times on the same column, the previously filtered values in the column will be cleared. Now, it is possible to retain those previous values by using the "Add current selection to filter" option. This checkbox is displayed when data is searched in the search bar of the CheckBox or Excel filter type. +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. +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. -The following image describes the above mentioned behavior. +The following image illustrates this behavior: -![Add current selection to filter in Blazor DataGrid.](./images/blazor-datagrid-add-current-selection-to-filter.png) +![Add current selection to filter in Blazor DataGrid.](images/blazor-datagrid-add-current-selection-to-filter.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file +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. \ No newline at end of file diff --git a/blazor/datagrid/filter-bar.md b/blazor/datagrid/filter-bar.md index 5fd3f8337d..c2781524ab 100644 --- a/blazor/datagrid/filter-bar.md +++ b/blazor/datagrid/filter-bar.md @@ -9,12 +9,13 @@ documentation: ug # Filter bar in Blazor DataGrid -The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing entry of filter criteria and instant viewing of filtered results. +The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing developers to enter filter criteria and view the filtered results immediately. -Enable the filter bar by setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) to true, rendering a filter bar row below the header for data filtering. Filter records using different expressions depending on column type. +By setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**, a filter bar row appears below the column headers. This enables filtering of records using various expressions based on the column type. **Filter bar expressions** -Enter the following filter expressions (operators) manually in the filter bar. + +The following filter expressions (operators) can be manually entered in the filter bar based on the column type: Expression |Example |Description |Column Type -----|-----|-----|----- @@ -26,10 +27,10 @@ Expression |Example |Description |Column Type <=|<=value|LessThanOrEqual |Number * |*value |StartsWith |String % |%value |EndsWith |String -N/A |N/A | **Equal** operator always used for date filter. |Date -N/A |N/A | **Equal** operator always used for Boolean filter. |Boolean +N/A |N/A | Always uses **equal** |Date +N/A |N/A | *Always uses **equal** |Boolean -The following example demonstrates activation of default filtering in the Grid: +The following example demonstrates how to enable default filtering in the DataGrid:: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -50,7 +51,7 @@ The following example demonstrates activation of default filtering in the Grid: @code { - private List GridData; + public List GridData { get; set; } SfGrid Grid; @@ -116,15 +117,20 @@ public class OrderData ## Filter bar modes -The Syncfusion® Blazor DataGrid refers to two different ways the Grid’s filter bar operates: **OnEnter Mode** and **Immediate Mode**, offering distinct user experiences. +The Syncfusion® Blazor DataGrid supports two distinct operational modes for the filter bar when applying filtering criteria. These modes define how and when the filtering action is triggered:: + +* **OnEnter Mode:** Filtering is triggered only after pressing the **Enter** key. +* **Immediate Mode:** Filtering is applied automatically as values are **typed** into the filter bar. + +Each mode offers a different user experience depending on the desired interaction model. **OnEnter Mode:** -Set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) as [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) in [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This captures criteria but applies filtering only on Enter key press, allowing modifications without triggering actions. +To enable [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) mode, set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **OnEnter** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). In this mode, the filter bar captures the entered criteria but does not initiate filtering until the **Enter** key is pressed. This allows multiple criteria to be modified before applying the filter. **Immediate Mode:** -Set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) as [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) in [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This applies filtering instantly as criteria are entered, providing real-time previews. +To enable [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) mode, set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **Immediate** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). In this mode, filtering is applied automatically as values are entered or modified in the filter bar, providing real-time filtering results. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -233,9 +239,9 @@ public class OrderData ## Display filter text in pager -The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides users with a clear understanding of applied filters and criteria used for filtering. +The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. This feature enhances visibility of the applied filters and the criteria used for filtering. -To enable display of filter text within the pager, set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. +To enable this functionality, set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -355,9 +361,9 @@ public class OrderData ## Prevent filtering for particular column -In the Syncfusion® Blazor DataGrid, prevent filtering for a specific column by utilizing the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object and setting it to **false**. This feature is useful when disabling filtering options for a particular column. +The Syncfusion® Blazor DataGrid allows disabling filtering for specific columns by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false**. This configuration is useful when filtering should be restricted for certain columns. -Here’s an example that demonstrates how to remove the filter bar for the **CustomerID** column in Grid: +The following example demonstrates how to remove the filter bar for the **CustomerID** column in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -435,11 +441,11 @@ public class OrderData ## Hide filter bar for template column -By default, the filter bar is set to a disabled mode for template columns in the Syncfusion® Blazor DataGrid. However, customize the filter bar for a template column to provide a customized filtering experience. +By default, the filter bar is disabled for template columns in the Syncfusion® Blazor DataGrid. In scenarios requiring a customized filtering experience, the filter bar can be hidden for a template column. -To hide the filter bar for a template column, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows definition of a custom template for the filter bar of a column. +To hide the filter bar for a template column, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows defining a custom template for the filter bar of the column. -Here’s an example that demonstrates how to hide the filter bar for a template column in the Grid: +The following example demonstrates how to hide the filter bar for a template column in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -521,9 +527,11 @@ public class OrderData ## Filter bar template with custom component -The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid allows customization of components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows use of various components, such as [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp), within the filter bar based on specific requirements. +The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid enables customization of the components rendered in the filter bar. By default, a text box is displayed in the filter bar cell. This feature allows integration of various components such as the [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) to suit specific filtering requirements. + +To implement a custom filter bar component, define a template using the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -To utilize this feature, define a custom template for the filter bar by setting the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) in the Blazor application: +The following example demonstrates how to use a custom component in the filter bar: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -724,4 +732,4 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for groundbreaking representations. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to present and manipulate data. \ No newline at end of file +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. \ No newline at end of file diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 4b89eca908..84ab626bf7 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -9,11 +9,11 @@ documentation: ug # Filter menu in Blazor DataGrid -The filter menu in the Syncfusion® Blazor DataGrid enables filtering data using column-specific operators, offering enhanced control over dataset views. +The Syncfusion® Blazor DataGrid supports a filter menu interface that enables column-specific filtering using various operators. This feature provides enhanced control over how data is displayed and filtered. -To enable the filter menu, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu**. This renders filter icons in column headers when [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) is **true**, allowing interactive filtering with various operators. +To enable the filter menu, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**. When the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property is set to **true**, filter icons are rendered in the column headers, enabling interactive filtering with multiple operator options. -Here is an example that demonstrates the usage of the filter menu in the Grid: +The following example demonstrates the usage of the filter menu in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,18 +92,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVJXMVKpLxfzxZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) must be set as true to enable filter menu. -> * By setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object as **false** will prevent filter menu rendering for a particular column. +> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) must be set to true to enable the filter menu. +> * Setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false** prevents the filter menu from rendering for that specific column. ## Custom component in filter menu -Enhance filtering with custom components by utilizing the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This allows replacement of default inputs with alternatives like dropdowns or textboxes. +The Syncfusion® Blazor DataGrid supports customization of the filter menu by replacing default input editors with custom components. This customization is achieved using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -By default, the filter menu provides an [Autocomplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) for string type columns, a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for number type columns, and a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for boolean type columns, facilitating value selection. +By default, the filter menu renders the following components based on column type: -Replace the standard search box in the filter menu with a `DropDownList` for the **OrderID** column. +- [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) for string columns +- [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for numeric columns +- [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for boolean columns -Here is a sample code demonstrating how to render a `DropDownList` for the **OrderID** column: +The following example demonstrates how to replace the standard search box in the filter menu with a `DropDownList` for the **OrderID** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -191,17 +193,19 @@ public class OrderData **Default filter input for OrderID column** -![Default filter input OrderID column.](images/Blazor-default-filter-input-datagrid.gif) +![Default filter input for OrderID column](images/Blazor-default-filter-input-datagrid.gif) **Custom dropdown filter for OrderID column** -![Custom dropdown filter for OrderID column.](images/blazor-custom-dropdown-filter-datagrid.gif) +![Custom dropdown filter for OrderID column](images/blazor-custom-dropdown-filter-datagrid.gif) ## Show 24 hours time format in filter dialog -Display time in 24-hour format in date or datetime column filter dialogs. By default, the dialog shows time in 12-hour format (AM/PM). Customize using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Set the `TimeFormat` of the `DateTimepicker` to **HH:mm**. +The Syncfusion® Blazor DataGrid supports displaying time in 24-hour format within the filter dialog for date or datetime columns. By default, the dialog displays time in 12-hour format (AM/PM). -Here is an example that demonstrates how to show 24 hours time format in filter dialog: +To display time in 24-hour format, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) and set the `TimeFormat` of the [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started-with-web-app) component to **HH:mm**. + +The following example demonstrates how to show 24-hour time format in the filter dialog: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -293,19 +297,15 @@ public class OrderData ## Customizing filter menu operators list -Customize the default filter operator list using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. Support customization for string, number, date, and boolean data types. - -Available customization options: - -* **StringOperator** - Defines customized string operator list. - -* **NumberOperator** - Defines customized number operator list. +The Syncfusion® Blazor DataGrid allows customization of the default filter operator list using the FilterDialogOpening event. This customization is supported for **string**, **number**, **date**, and **boolean** data types. +Available customization options include: -* **DateOperator** - Defines customized date operator list. +* **StringOperator** - Defines a custom list of string operators. +* **NumberOperator** - Defines a custom list of number operators. +* **DateOperator** - Defines a custom list of date operators. +* **BooleanOperator** - Defines a custom list of boolean operators. -* **BooleanOperator** - Defines customized boolean operator list. - -Here is an example of how to customize the filter operators list in the Grid: +The following example demonstrates how to customize the filter operators list in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -313,7 +313,7 @@ Here is an example of how to customize the filter operators list in the Grid: @using Syncfusion.Blazor.Grids - + @@ -441,7 +441,9 @@ public class OrderData ## Customize filter input editor -The Syncfusion® Blazor DataGrid allows you to customize the built-in filter dialog editor components. You can achieve this customization by setting the `FilterEditorSettings` property on [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). In the following example, we have customized the following component configurations: +The Syncfusion® Blazor DataGrid allows customization of the built-in filter dialog editor components using the [FilterEditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterEditorSettings) property on the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). + +The following table outlines component configurations customized for specific columns: | Column | Filter Component | Customization | | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------- | @@ -557,19 +559,18 @@ public class Orders ## Customize the default input component of filter menu dialog -Customize default input components in menu filter dialogs using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). +Customize the default input components in the filter menu dialog using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -| Column Type | Default component |Customization | API Reference | +| Column Type | Default component |Customization Example | API Reference | | ----------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| String | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Eg: Autofill="false" | [AutoComplete API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) | -| Number | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | Eg: ShowSpinButton="false" | [NumericTextBox API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) | -| Boolean | [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | Eg: SortOrder="SortOrder.Ascending" | [DropDownList API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) | -| Date | [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | Eg: WeekNumber="true" | [DatePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | -| DateTime | [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | Eg: ShowClearButton="true" | [DateTimePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) | +| String | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Autofill="false" | [AutoComplete API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) | +| Number | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | ShowSpinButton="false" | [NumericTextBox API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) | +| Boolean | [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | SortOrder="SortOrder.Ascending" | [DropDownList API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) | +| Date | [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | WeekNumber="true" | [DatePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | +| DateTime | [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | ShowClearButton="true" | [DateTimePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) | -> To know more about the feature, refer to the Getting Started documentation and API Reference -In the example provided below, the **OrderID** and **Freight** columns are numeric columns. When you open the filter dialog for these columns, you will notice that a `NumericTextBox` with a spin button is displayed to change or set the filter value. However, using the `FilterTemplate` property of the GridColumn. This property is used to add custom components to a particular column, you can hide the spin button specifically for the **OrderID** column: +In the following example, the **OrderID** and **Freight** columns are numeric. By default, the filter dialog displays a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) with a spin button. Using the `FilterTemplate` property of the `GridColumn`, the spin button can be hidden specifically for the **OrderID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -653,9 +654,9 @@ public class OrderData ### Prevent autofill option in autocomplete of menu filter -By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is set to automatically fill suggestions as you type. However, there might be scenarios where you want to prevent this autofill behavior to provide a more customized and controlled user experience. +By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is configured to automatically fill suggestions while typing. In scenarios requiring a more controlled user experience, this autofill behavior can be disabled. -You can prevent autofill feature by setting the [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) parameter to **false** using the `FilterTemplate` property of the GridColumn. This property is used to add custom components to a particular column. +To prevent autofill, set the [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) parameter to **false** using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property enables the use of custom components for specific columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -741,7 +742,7 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi ### Hide the filter operator dropdownlist in the filter menu dialog -To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, the following CSS can be used to override the styling of the **.e-flm_optrdiv** class. Using this customization logic, the interface becomes more focused, allowing a default filter behavior to be applied automatically. +To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, apply the following CSS to override the styling of the **.e-flm_optrdiv** class. This customization simplifies the interface by applying a default filter behavior without displaying the operator selection. ```css .e-flm_optrdiv { @@ -835,9 +836,11 @@ public class OrderData ## Filter by multiple keywords using filter menu -The Syncfusion® Blazor DataGrid allows you to perform filtering actions based on multiple keywords, rather than a single keyword, using the filter menu dialog. To enable this feature, you can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu** and render the `MultiSelect` as a custom component in the filter menu dialog. +The Syncfusion® Blazor DataGrid supports filtering based on multiple keywords using the filter menu dialog. This feature allows users to select multiple values for a column, enhancing filtering flexibility. -Here is an example that demonstrates how to perform filtering by multiple keywords using the filter menu in the Grid: +To enable this functionality, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property of the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**, and integrate the [MultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) component as a custom UI element within the filter menu dialog. + +The following example demonstrates how to configure multi-keyword filtering using the filter menu in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1055,9 +1058,9 @@ public class OrderData ## Hide default filter icons while perform filtering through method -When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the user interface. +When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the interface. -To customize the filter icon in the Grid, use the display property of the filter menu as mentioned below: +To hide the filter icon in the Grid, apply the CSS style to the filter menu element as shown below: ```cshtml