diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md index 0bf9741d12..3a33816d30 100644 --- a/blazor/datagrid/custom-toolbar.md +++ b/blazor/datagrid/custom-toolbar.md @@ -8,9 +8,9 @@ documentation: ug --- # Custom toolbar in Blazor DataGrid -The custom toolbar in the Syncfusion® Blazor DataGrid enables a distinctive toolbar layout, style, and behavior tailored to application requirements, delivering a personalized Grid experience. +Custom toolbar in Syncfusion® Blazor DataGrid enables the creation of a customized toolbar layout and functionality to match specific application requirements. This is achieved by using the [ToolbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_ToolbarTemplate) property, which provides comprehensive customization options for toolbar layout and styling. Define a custom template for the toolbar and handle toolbar item actions in the **OnClick** event. -This is implemented by using the `Template` property, which provides extensive customization options for the toolbar. Define a custom template for the toolbar and handle toolbar item actions in the **OnClick** event. +The following example demonstrates rendering the custom toolbar `ToolbarTemplate` property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -113,9 +113,9 @@ This is implemented by using the `Template` property, which provides extensive c {% previewsample "https://blazorplayground.syncfusion.com/embed/VXBUsZBuSRVoiYtS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Render image with text in custom Toolbar +## Render image with text in custom toolbar -Rendering an image with text in the custom toolbar of the Syncfusion® Blazor DataGrid helps provide context and improves visual clarity for actions. +Rendering an image with text in custom toolbar in Syncfusion® Blazor DataGrid enables easy display of an image along with text in the toolbar of the DataGrid. This feature enhances visual presentation, provides additional context, and improves the overall experience. To render an image with text in the custom toolbar, use the `Template` in [SfToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html). @@ -218,13 +218,13 @@ To render an image with text in the custom toolbar, use the `Template` in [SfToo > The styles and layout of the image and text in the custom toolbar can be further customized to meet specific design requirements. For better accessibility, include alt text on images. -## Render SfDropDownList in Custom Toolbar +## Render DropDownList in custom toolbar -Rendering an [SfDropdownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) in the custom toolbar of the Syncfusion® Blazor DataGrid extends toolbar functionality and enables actions based on user selection. +Rendering a DropDownList in custom toolbar in Syncfusion® Blazor DataGrid extends toolbar functionality by incorporating an [SfDropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) and allowing actions based on user selection. -This is achieved by using the `Template`. The example below shows how to render the `SfDropDownList` in the custom toolbar, where the toolbar template binds the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event to the **OnChange** method. +This is achieved by using the `Template` property. The example below shows how to render the `SfDropDownList` in the custom toolbar, where the toolbar template binds the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event to the **OnChange** method. -In the **OnChange** method, the selected item text determines the action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method exits edit mode. If **Edit** is selected, the selected record is passed to [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) to start editing dynamically. Similarly, if **Delete** is chosen, the selected record is passed to [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) to remove it from the Grid. +In the **OnChange** method, the selected item text determines the action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method exits edit mode. If **Edit** is selected, the selected record is passed to [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) to start editing dynamically. Similarly, if **Delete** is chosen, the selected record is passed to [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) to remove it from the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -353,9 +353,9 @@ In the **OnChange** method, the selected item text determines the action. For ex Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Syncfusion® Blazor DataGrid enhances usability by enabling dynamic search based on user input. -This is implemented by using the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below renders the `SfAutoComplete` within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of `SfAutoComplete` is bound to the **OnSearch** method, which searches the Grid based on the selected input. +This is implemented by using the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below renders the `SfAutoComplete` within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of `SfAutoComplete` is bound to the **OnSearch** method, which searches the DataGrid based on the selected input. -In the **OnSearch** method, the selected value from `SfAutoComplete` is used as the search keyword. The Grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method filters records that match the keyword across all searchable columns. +In the **OnSearch** method, the selected value from `SfAutoComplete` is used as the search keyword. The DataGrid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method filters records that match the keyword across all searchable columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -466,11 +466,11 @@ In the **OnSearch** method, the selected value from `SfAutoComplete` is used as {% previewsample "https://blazorplayground.syncfusion.com/embed/BthoNTLFzGxGrdMg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Render a component or element using the Toolbar Template +## Render an element or control using the Toolbar Template -Rendering a component or element by using the toolbar template in the Syncfusion® Blazor DataGrid extends the toolbar with custom components such as buttons, dropdowns, input fields, icons, or other UI elements. Event handlers can be bound within the template to enable actions for the added components. +Rendering an element by using the toolbar template in Syncfusion® Blazor DataGrid extends the toolbar with custom UI like buttons, dropdowns, input fields, icons, or other controls. Event handlers can be bound within the template to enable actions for the added elements. -To render custom components within the toolbar, use the `Template` directive. For example, include an [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html) and perform specific Grid actions based on button clicks. When the **ExcelExport** button is clicked, [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) exports the Grid to Excel. When the **PdfExport** button is clicked, [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) exports the Grid to PDF. Likewise, when the Print button is clicked, [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) is triggered to print the Grid. +To render custom UI within the toolbar, use the `Template` directive. For example, include an [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html) and perform specific DataGrid actions based on button clicks. When the **ExcelExport** button is clicked, [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) exports the DataGrid to Excel. When the **PdfExport** button is clicked, [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) exports the DataGrid to PDF. Likewise, when the **Print** button is clicked, [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) is triggered to print the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md index 6970ac85be..86600e5ef4 100644 --- a/blazor/datagrid/excel-like-filter.md +++ b/blazor/datagrid/excel-like-filter.md @@ -9,15 +9,14 @@ documentation: ug # Excel-like Filter in Blazor DataGrid -## Introduction -The Syncfusion® Blazor DataGrid includes an Excel-like filter feature that provides an easy-to-use interface for filtering data. This feature mirrors the filtering tools found in Microsoft Excel, making it intuitive for individuals already familiar with that application. +The Syncfusion® Blazor DataGrid includes an Excel-like filter feature that provides an easy-to component offers an Excel-like filter feature, providing a familiar and user-friendly interface for filtering data within the DataGrid. Excel-like filter displays a dialog with a checkbox list, search box, and sorting options, similar to Microsoft Excel's filter. This filtering type simplifies complex filtering operations on specific columns, allowing for quick data location and manipulation. Excel-like filtering is especially useful when dealing with large datasets and columns containing distinct categorical values (such as status, category, country, or department names). -Excel-like filtering proves especially valuable when working with large datasets or when complex filtering operations are required for specific columns. This feature enables rapid data refinement to locate required information. +The dialog displays all unique values from that column as a checkbox list. Values can be selected or deselected to include or exclude them from the Grid results, then **OK** button can be clicked to filter the data. -## Getting Started with Excel-like Filter +## Enable Excel filtering -To enable Excel-like filtering in a Blazor DataGrid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** and configure [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) with **FilterType.Excel**. +To enable Excel-like filtering in a DataGrid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** and configure [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) with [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) as `Excel`. This property determines the type of filter UI rendered in the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -99,13 +98,17 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVfZVDQLqvKxcHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > **Key Features:** -> * Supports multiple filter types: text, numbers, dates, and true/false values -> * Provides search functionality to find specific values within the filter dialog -> * Allows clearing of previously applied filters -## Checkbox Filtering +>* 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 sorting filter values, searching for specific values, and clearing applied filters. -Checkbox filtering offers another straightforward approach to filter data. With this method, specific values can be displayed by selecting checkboxes next to each option in a column. This approach works effectively when data contains distinct categories or grouped values. +## Enable CheckBox filtering + +Checkbox filtering is the core mechanism of Excel-like filter. When the filter dialog opens, all unique values from the selected column appear as a checkbox list. Multiple values can be selected by checking their boxes to include them in the filtered results. Values can be unchecked to exclude them from the results. + +The checkbox list supports search functionality: typing in the search box filters the checkbox list to show only matching values, making it easier to find specific items in long lists. + + To enable this, configure [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) with [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) as `CheckBox`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -186,15 +189,13 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZBNcrfDcFCUo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize the Number of Filter Options +## Customize the filter choice count -By default, the filter dialog displays up to **1000** distinct values in the checkbox list for each column. This limit ensures the filter dialog loads promptly and performs efficiently, particularly with large datasets. The limit can be modified based on specific requirements. +By default, the filter choice count is set to 1000, which means the filter dialog displays a maximum of 1000 distinct values for each column as a checkbox list. This default value ensures the filter operation remains efficient, even with large datasets. Remaining records (those beyond the first 1000) are accessible through the search box within the filter dialog. -The filter dialog retrieves values from the first **1000** records in the dataset. If additional values exist, they load automatically when searching in the dialog. +**Why this limit exists**: Loading all distinct values from a column with tens of thousands of unique entries would cause the filter dialog to open slowly or freeze. The 1000-value limit prevents this performance issue while still providing access to all data via search. -### Adjusting the Filter Choice Count - -The [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) property in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event modifies the number of values displayed in the filter dialog. +The DataGrid allows customization of the number of distinct values displayed in the checkbox list of the Excel/Checkbox filter dialog. The filter choice count can be adjusted by modifying the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) property in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event modifies the number of values displayed in the filter dialog. The count can be increased to display more initial options, or decreased to improve dialog opening speed for extremely large datasets. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -306,7 +307,19 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVfXVjhBrOeigOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> **Performance Consideration:** Setting a high `FilterChoiceCount` may slow the filter dialog when it opens. Processing and displaying a large number of values requires additional time, potentially resulting in noticeable delays. To maintain smooth filtering, select a value that balances functional requirements with acceptable performance levels. +> **Performance Consideration:** The specified filter choice count value determines the display of unique items as a checkbox list in the `Excel/Checkbox` filter dialog. Higher values can result in a delay when rendering checkbox items while opening the filter dialog. Therefore, setting a restricted filter choice count value is advisable to maintain optimal performance. + +## Add current selection to filter checkbox + +By default, the `Excel/Checkbox` filter replaces previous selections when a new filter is applied to the same column. Applying a filter multiple times on the same column clears the previously filtered values. The **"Add current selection to filter"** checkbox allows retention of previous filter values by combining new selections with existing ones. This checkbox appears in the filter dialog when data is searched using the search bar of the `Excel/Checkbox` filter. + +This feature is useful when building cumulative filters across multiple filtering operations without having to re-select previously chosen values each time. + +The following image describes the above mentioned behavior: + +![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" %} ## Display Custom Text in Filter Options @@ -316,6 +329,8 @@ The DataGrid supports customization of text displayed in filter checkbox lists. The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property enables creation of custom templates for filter items, allowing custom logic and HTML elements for displaying specific content. +To customize the text in the Excel/Checkbox filter, a [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property can be defined and bound 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 desired text or content. + The following example demonstrates how to customize text in a **Delivered** column filter. Instead of displaying **true** or **false**, it displays **Delivered** or **Not delivered**: {% tabs %} @@ -835,13 +850,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -## Combining multiple filter selections - -By default, when a filter is applied multiple times to the same column, the new filter replaces the previous selection. Previously applied filters can be retained by using the **Add current selection to filter** option. This checkbox appears in the filter search bar when searching for values in the CheckBox or Excel filter dialog. - -![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" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLnXqrrzfcVeTfI?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} ## See Also diff --git a/blazor/datagrid/filter-bar.md b/blazor/datagrid/filter-bar.md index 58ae2c3145..c1ba749f56 100644 --- a/blazor/datagrid/filter-bar.md +++ b/blazor/datagrid/filter-bar.md @@ -9,26 +9,26 @@ documentation: ug # Filter Bar in Blazor DataGrid -The filter bar feature provides an efficient and intuitive way to filter data within the Syncfusion® Blazor DataGrid component. This feature displays input fields below each column header, enabling straightforward data filtering based on column-specific criteria. The filter bar enhances data exploration by allowing users to narrow down large datasets to display only relevant records. +The filter bar feature provides a row of input fields directly below the DataGrid headers, enabling instant data filtering. Each column displays an input field where filter criteria can be entered, and the DataGrid updates immediately to show matching results. -To enable the filter bar, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** on the grid component. This action adds a filter row beneath the column headers, allowing filtering through various expression operators based on the respective column data type. +To activate the filter bar, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to `true`. -**Supported filter expressions** +**Filter bar expressions:** -The following table outlines the filter expressions (operators) that can be manually entered in the filter bar, organized by column data type: +Filter expressions are operators that define how the DataGrid compares entered values against data. The available operators depend on the column data type. | Operator | Example | Description | Data Type | |----------|---------|-------------|-----------| -| = | =value | Equal | Number | -| != | !=value | Not Equal | Number | -| > | >value | Greater Than | Number | -| < | = | >=value | Greater Than or Equal | Number | -| <= | <=value | Less Than or Equal | Number | -| * | *value | Starts With | Text | -| % | %value | Ends With | Text | -| N/A | N/A | Always uses equal | Date | -| N/A | N/A | Always uses equal | Boolean | +| = | =value | Matches values exactly equal to the entered value | Number | +| != | !=value | Matches values not equal to the entered value | Number | +| > | >value | Matches values greater than the entered value | Number | +| < | = | >=value | Matches values greater than or equal to the entered value | Number | +| <= | <=value | Matches values less than or equal to the entered value | Number | +| * | *value | Matches values that start with the entered text | Text | +| % | %value | Matches values that end with the entered text | Text | +| N/A | N/A | Always uses equal operator for Date columns | Date | +| N/A | N/A | Always uses equal operator for Boolean columns | Boolean | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -113,20 +113,25 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/VZLpDMBrqxKqAFyw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +> If `GridFilterSettings.Type` is not explicitly specified, the DataGrid defaults to `FilterBar` mode. + ## Filter bar modes -The Syncfusion® Blazor DataGrid provides two distinct operational modes for the filter bar. These modes determine how and when filtering is executed: +The filter bar operates in two distinct modes that control when filtering is applied. + +### OnEnter + +Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **OnEnter** within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to delay filtering until the Enter key is pressed. This mode allows entering complex filter criteria across multiple columns before applying the filter. Best for scenarios where multiple filter criteria need to be prepared before seeing results, or when working with large datasets where instant filtering may cause performance delays. -* **OnEnter Mode**: Filters are applied only after pressing the **Enter** key, allowing multiple changes before execution -* **Immediate Mode**: Filters are applied automatically as values are entered, providing real-time results +The [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) mode executes filtering when the **Enter** key is pressed. -**OnEnter Mode Implementation** +### Immediate -The [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) mode executes filtering when the **Enter** key is pressed. Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **OnEnter** within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to enable this mode. This approach enables multiple filter criteria to be adjusted before triggering the filter operation. +Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **Immediate** within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to apply filtering instantly as each character is typed. The DataGrid updates in real-time as the filter criteria changes, enabling instant feedback as filter text is entered. -**Immediate Mode Implementation** +The [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) mode applies filters automatically as data is entered. -The [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) mode applies filters automatically as data is entered. Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **Immediate** within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to enable this mode. This delivers live filtering results as values are modified in the filter bar. +The following example demonstrates both modes with a toggle. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -235,9 +240,11 @@ public class OrderData ### Display filter text in pager -The Syncfusion® Blazor DataGrid can display active filter information within the pager section. This visibility enhancement allows clear tracking of currently applied filters and their criteria. +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) displays the current filter criteria in the DataGrid pager area. This provides a clear summary of active filters without examining each column's filter bar input. -Enable this functionality by setting the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property to **true** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. +**When to use**: Enable this when working with complex multi-column filters to maintain awareness of all active filtering criteria. This is particularly useful when filters are applied across columns that are scrolled out of view. + +The following example shows filter status display in the pager: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -355,9 +362,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BZVfZhtdTBLebNJe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Disable filter for specific columns +### Prevent filtering for particular column + +Set 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) to **false** to disable the filter bar input for that specific column. Disable filtering on non-filterable columns like action (button) columns, image columns, etc. -The Syncfusion® Blazor DataGrid supports disabling the filter bar for particular columns. Configure 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** to restrict filtering for that specific column. +The following example disables filtering for the **"Customer ID"** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -435,7 +444,7 @@ public class OrderData ### Hide filter bar for template column -Template columns in the Syncfusion® Blazor DataGrid do not display filter bars by default. To maintain or further customize the filter behavior for template columns, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This property defines a custom template for the filter bar area of the column. +Template columns can be used to render images, action buttons, or other custom components that are inherently non-filterable. To completely hide the filter bar input for a template column, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property with an empty element. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -517,14 +526,14 @@ 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) property enables customization of components displayed in the filter bar. By default, the filter bar displays a standard text input field. However, specific filtering scenarios may benefit from alternative components. +The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property replaces the default text input with a custom component in the filter bar. This allows using specialized input controls like date pickers, dropdowns, or numeric inputs that provide a better filtering experience for specific data types. The Syncfusion® Blazor DataGrid supports integration of the following specialized components within the filter bar: -* [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) - For date-based filtering -* [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) - For numeric value filtering -* [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) - For predefined selection filtering -* [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) - For multi-value filtering +* [SfDatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) - For date-based filtering. +* [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) - For numeric value filtering +* [SfComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) - For predefined selection filtering. +* [SfMultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) - For multi-value filtering. To implement a custom filter component, define a template using the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 94cefb5482..85993788d1 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -9,9 +9,11 @@ documentation: ug # Filter menu in Blazor DataGrid -The Syncfusion® Blazor DataGrid filter menu provides an intuitive interface for filtering data on a per-column basis. It utilizes a pop-up menu that contains a range of filter operators, offering precise control over the displayed data. +The filter menu in the Blazor DataGrid provides a dialog-based filtering interface that appears when clicking the filter icon in column headers. This menu displays dropdown operators (such as Equals, Contains, StartsWith) and an input field for entering filter values, giving precise control over how data is filtered. -To enable the filter menu, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** and 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**. When enabled, a filter icon appears in the column header, allowing for interactive filtering. +## Enable filter menu + +To enable the filter menu, 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`. This property determines the type of filter UI rendered in the DataGrid. Once enabled, clicking the filter icon in any column header opens the filter menu dialog with operator options and an input field. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -90,19 +92,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVJXMVKpLxfzxZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * 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. +> * [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. +> * Setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) to `false` on a specific column prevents the filter menu from rendering for that column. ## Custom component in filter menu -The filter menu can be customized by replacing its default input component with a custom one. This is achieved by defining a template within the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). +Enhance the filtering experience by replacing its default input with a custom one. This is achieved by defining a template within the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). The default component rendered in the filter menu is determined by the column's data type: -* **String**: [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) -* **Numeric**: [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) -* **Boolean**: [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) +* **String**: [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) +* **Numeric**: [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) +* **Boolean**: [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) -For example, the following code demonstrates how to replace the default `NumericTextBox` with a `DropDownList` for the numeric **OrderID** column. This customization allows filtering based on a selection from the dropdown list instead of manual input. +For example, the following code demonstrates how to replace the default `SfNumericTextBox` with a `SfDropDownList` for the numeric **OrderID** column. This customization allows filtering based on a selection from the dropdown list instead of manual input. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -198,9 +201,9 @@ public class OrderData ## Show 24 hours time format in filter dialog -The Syncfusion® Blazor DataGrid supports displaying time in 24-hour format within the filter dialog for date or datetime columns. For `DateTime` columns, the filter dialog's time picker defaults to a **12-hour (AM/PM)** format. This can be customized to a 24-hour format. +The DataGrid provides a feature to display the time in a 24-hour format in the date or datetime column filter dialog. -To implement this, define a [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the desired [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Inside the template, use a [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started-with-web-app) component and set its `TimeFormat` property to **HH:mm**. +By default, the filter dialog displays time in 12-hour format (AM/PM) for date or datetime columns. To customize this, define a [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the desired [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Inside the template, use a [SfDateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started-with-web-app) and set its `TimeFormat` property to **HH:mm**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -290,20 +293,16 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTXsUNzHJMohoW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing filter menu operators list +## Customizing filter menu operators -The Syncfusion® Blazor DataGrid allows customization of 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. This customization is supported for the following data types: -- String -- Number -- Date -- Boolean +The Syncfusion® Blazor DataGrid enables customizing 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. This feature defines custom sets of operators available in the filter menu, allowing restriction or simplification of filtering methods for specific columns. -Provide a custom list by assigning one of the following collections to **args.FilterOperators** based on the column: +Customize operators for string, number, date, and boolean data types using these options: -* **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. +* `stringOperator` - defines customized string operator list. +* `numberOperator` - defines customized number operator list. +* `dateOperator` - defines customized date operator list. +* `booleanOperator` - defines customized boolean operator list. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -437,18 +436,239 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtytkMuAjiQlR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Filter by multiple keywords using filter menu + +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. + +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 [SfMultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) as a custom UI element within the filter menu dialog. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +@code { + + public List GridData { get; set; } + + SfGrid Grid; + List CustomerIDValues = new List(); + List ShipCityValues = new List(); + List ShipNameValues = new List(); + List OrderIDValues = new List(); + bool IsFilterValueChange { get; set; } + + public List CustomerIDData { get; set; } + public List ShipCityData { get; set; } + public List ShipNameData { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + this.CustomerIDData = GridData.Select(x => x.CustomerID).Distinct().ToList(); + this.ShipCityData = GridData.Select(x => x.ShipCity).Distinct().ToList(); + this.ShipNameData = GridData.Select(x => x.ShipName).Distinct().ToList(); + } + public async Task OrderIDOnChange(MultiSelectChangeEventArgs args) + { + if (args.Value?.Length > 0) + { + OrderIDValues = args.Value.ToList(); + IsFilterValueChange = true; + } + else + { + OrderIDValues = new List(); + IsFilterValueChange = true; + } + } + public async Task CustomerIDOnChange(MultiSelectChangeEventArgs args) + { + if (args.Value?.Length > 0) + { + CustomerIDValues = args.Value.ToList(); + IsFilterValueChange = true; + } + else + { + CustomerIDValues = new List(); + IsFilterValueChange = true; + } + } + public async Task ShipCityOnChange(MultiSelectChangeEventArgs args) + { + if (args.Value?.Length > 0) + { + ShipCityValues = args.Value.ToList(); + IsFilterValueChange = true; + } + else + { + ShipCityValues = new List(); + IsFilterValueChange = true; + } + } + public async Task ShipNameOnChange(MultiSelectChangeEventArgs args) + { + if (args.Value?.Length > 0) + { + ShipNameValues = args.Value.ToList(); + IsFilterValueChange = true; + } + else + { + ShipNameValues = new List(); + IsFilterValueChange = true; + } + } + public async Task FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args) + { + if (IsFilterValueChange) + { + IsFilterValueChange = false; + args.Cancel = true; + if (args.ColumnName == "OrderID") + { + + await Grid.FilterByColumnAsync("OrderID", "equal", OrderIDValues, "or"); + } + else if (args.ColumnName == "CustomerID") + { + await Grid.FilterByColumnAsync("CustomerID", "equal", CustomerIDValues, "or"); + } + else if (args.ColumnName == "ShipCity") + { + await Grid.FilterByColumnAsync("ShipCity", "equal", ShipCityValues, "or"); + } + else if (args.ColumnName == "ShipName") + { + await Grid.FilterByColumnAsync("ShipName", "equal", ShipNameValues, "or"); + } + + } + if (args.FilterPredicates == null) + { + if (args.ColumnName == "OrderID") + { + + OrderIDValues = new List(); + } + else if (args.ColumnName == "CustomerID") + { + CustomerIDValues = new List(); + } + else if (args.ColumnName == "ShipCity") + { + ShipCityValues = new List(); + } + else if (args.ColumnName == "ShipName") + { + ShipNameValues = new List(); + } + } + } +} +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() { } + + public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10247; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(OrderID+1, "VINET", "Reims", "Vins et alcools Chevali")); + 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")); + Orders.Add(new OrderData(OrderID+5, "SUPRD", "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(OrderID+6, "HANAR", "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(OrderID+7, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(OrderID + 8, "ERNSH", "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(OrderID+9, "WELLI", "Reims", "Wellington Import")); + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhftMLkrRRXmpHY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## Customize filter input editor -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). +Customize the default settings 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). This modifies the behavior of specific filter components to better suit application needs. -The following table outlines component configurations customized for specific columns: +Each column type uses a default component in the filter menu, which can be customized with specific parameters: | Column | Filter Component | Customization | | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------- | -| **Order ID** | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | Show clear button enabled, minimum value set to 10,000 | -| **Customer ID**| [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Autofill disabled, debounce delay set to 2000 ms | -| **Ship City** | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Autofill enabled, minimum input length set to 2 | -| **Order Time** | [TimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started) | Step interval set to 10 minutes | +| **Order ID** | [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | Show clear button enabled, minimum value set to 10,000 | +| **Customer ID**| [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Autofill disabled, debounce delay set to 2000 ms | +| **Ship City** | [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Autofill enabled, minimum input length set to 2 | +| **Order Time** | [SfTimePicker](https://blazor.syncfusion.com/documentation/timepicker/getting-started) | Step interval set to 10 minutes | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -559,16 +779,20 @@ public class Orders 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). + +Each column type uses a default component in the filter menu, which can be customized with specific parameters: + | Column Type | Default component |Customization Example | API Reference | | ----------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| 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) | +| String | [SfAutoComplete](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 | [SfNumericTextBox](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 | [SfDropDownList](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 | [SfDatePicker](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 | [SfDateTimePicker](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) | + +In the example provided below, the **"Order ID"** and **"Freight"** columns are numeric columns. When the filter dialog opens for these columns, a [SfNumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) with a spin button. However, using the `FilterTemplate` property of the `GridColumn`, the spin button can be hidden 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" %} @@ -652,9 +876,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 configured to automatically fill suggestions while typing. In scenarios requiring a more controlled user experience, this autofill behavior can be disabled. +By default, the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) 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. -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. +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](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" %} @@ -830,231 +1054,13 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rXVeXQrIANVmdQhp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Filter by multiple keywords using filter menu - -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. - -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. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.DropDowns - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -@code { - public List GridData { get; set; } - - SfGrid Grid; - List CustomerIDValues = new List(); - List ShipCityValues = new List(); - List ShipNameValues = new List(); - List OrderIDValues = new List(); - bool IsFilterValueChange { get; set; } - - public List CustomerIDData { get; set; } - public List ShipCityData { get; set; } - public List ShipNameData { get; set; } - - protected override void OnInitialized() - { - GridData = OrderData.GetAllRecords(); - this.CustomerIDData = GridData.Select(x => x.CustomerID).Distinct().ToList(); - this.ShipCityData = GridData.Select(x => x.ShipCity).Distinct().ToList(); - this.ShipNameData = GridData.Select(x => x.ShipName).Distinct().ToList(); - } - public async Task OrderIDOnChange(MultiSelectChangeEventArgs args) - { - if (args.Value?.Length > 0) - { - OrderIDValues = args.Value.ToList(); - IsFilterValueChange = true; - } - else - { - OrderIDValues = new List(); - IsFilterValueChange = true; - } - } - public async Task CustomerIDOnChange(MultiSelectChangeEventArgs args) - { - if (args.Value?.Length > 0) - { - CustomerIDValues = args.Value.ToList(); - IsFilterValueChange = true; - } - else - { - CustomerIDValues = new List(); - IsFilterValueChange = true; - } - } - public async Task ShipCityOnChange(MultiSelectChangeEventArgs args) - { - if (args.Value?.Length > 0) - { - ShipCityValues = args.Value.ToList(); - IsFilterValueChange = true; - } - else - { - ShipCityValues = new List(); - IsFilterValueChange = true; - } - } - public async Task ShipNameOnChange(MultiSelectChangeEventArgs args) - { - if (args.Value?.Length > 0) - { - ShipNameValues = args.Value.ToList(); - IsFilterValueChange = true; - } - else - { - ShipNameValues = new List(); - IsFilterValueChange = true; - } - } - public async Task FilteringHandler(Syncfusion.Blazor.Grids.FilteringEventArgs args) - { - if (IsFilterValueChange) - { - IsFilterValueChange = false; - args.Cancel = true; - if (args.ColumnName == "OrderID") - { - - await Grid.FilterByColumnAsync("OrderID", "equal", OrderIDValues, "or"); - } - else if (args.ColumnName == "CustomerID") - { - await Grid.FilterByColumnAsync("CustomerID", "equal", CustomerIDValues, "or"); - } - else if (args.ColumnName == "ShipCity") - { - await Grid.FilterByColumnAsync("ShipCity", "equal", ShipCityValues, "or"); - } - else if (args.ColumnName == "ShipName") - { - await Grid.FilterByColumnAsync("ShipName", "equal", ShipNameValues, "or"); - } - - } - if (args.FilterPredicates == null) - { - if (args.ColumnName == "OrderID") - { - - OrderIDValues = new List(); - } - else if (args.ColumnName == "CustomerID") - { - CustomerIDValues = new List(); - } - else if (args.ColumnName == "ShipCity") - { - ShipCityValues = new List(); - } - else if (args.ColumnName == "ShipName") - { - ShipNameValues = new List(); - } - } - } -} -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - public OrderData() { } - - public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int OrderID = 10247; - for (int i = 1; i < 2; i++) - { - Orders.Add(new OrderData(OrderID+1, "VINET", "Reims", "Vins et alcools Chevali")); - 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")); - Orders.Add(new OrderData(OrderID+5, "SUPRD", "Charleroi", "Suprêmes délices")); - Orders.Add(new OrderData(OrderID+6, "HANAR", "Lyon", "Hanari Carnes")); - Orders.Add(new OrderData(OrderID+7, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese")); - Orders.Add(new OrderData(OrderID + 8, "ERNSH", "Münster", "Richter Supermarkt")); - Orders.Add(new OrderData(OrderID+9, "WELLI", "Reims", "Wellington Import")); - OrderID += 9; - } - } - return Orders; - } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhftMLkrRRXmpHY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## 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 interface. +When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, hiding the default filter icons may be desired to provide a simpler interface. This is useful when building custom filter UIs or applying filters through buttons or other controls outside the DataGrid. -To hide the filter icon in the Grid, apply the CSS style to the filter menu element as shown below: +To hide the filter icon in the DataGrid, apply the CSS style to the filter menu element as shown below: ```cshtml ``` + +The following example demonstrates how to hide the default filter icons while filtering the **"Customer ID"** column programmatically using a method. + {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/filtering.md b/blazor/datagrid/filtering.md index 87671a2bc3..bba1af64f6 100644 --- a/blazor/datagrid/filtering.md +++ b/blazor/datagrid/filtering.md @@ -9,9 +9,11 @@ documentation: ug # Filtering in Blazor DataGrid -Filtering is a key feature in the Syncfusion® Blazor DataGrid that enables selective data viewing based on defined criteria. It helps narrow down large datasets and focus on relevant information, improving data analysis and decision-making. +Filtering is a powerful feature in the Syncfusion® Blazor DataGrid that enables selective viewing of data based on specific criteria. It allows narrowing down large datasets to focus on relevant information, thereby enhancing data analysis and decision-making. -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 to **true**. Once enabled, configure filtering behavior and appearance using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) property. +## Enable filtering + +To enable filtering in the Syncfusion® Blazor DataGrid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. Once enabled, configure filtering behavior and appearance using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) property. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,7 +94,13 @@ public class OrderData ## Initial filter -To apply an initial filter in the Syncfusion® Blazor DataGrid, define the filter criteria using the **Predicate** object within the [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 includes properties such as **Field**, **Operator**, and **Value**. +Apply filters automatically when the DataGrid loads by specifying filter criteria using a predicate object. A predicate object defines the filter condition with three key properties: + +* `field`: The column name to filter. +* `operator`: The comparison type (equal, startswith, greaterthan, etc.). +* `value`: The filter criterion to match. + +Configure initial filters 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). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -177,9 +185,11 @@ public class OrderData ### Initial filter with multiple values for same column -In the Syncfusion® Blazor DataGrid, an initial filter can be configured to include multiple values for a specific column. This approach enables predefined filtering conditions to be applied immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads. +Initial filtering with multiple values allows to preset filter conditions for a specific column using multiple criteria. This displays only records matching any of the specified values when the DataGrid first renders. -To apply an initial filter with multiple values for the same column, define the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object within the [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). +Set multiple [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) objects 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) for the same field. + +The following example filters the **"Customer ID"** column to show only specific customer records. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -300,9 +310,11 @@ To apply an initial filter with multiple values for the same column, define the ### Initial filter with multiple values for different columns -In the Syncfusion® Blazor DataGrid, an initial filter can be configured to include multiple values across different columns. This approach enables predefined filtering conditions to be applied to multiple columns immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads. +Initial filter configuration with multiple values across different columns sets predefined filter criteria for each column. This configuration displays filtered records immediately when the DataGrid loads. + +To apply an initial filter with multiple values for different columns, define the filter `Predicate` object within the `Columns`(https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`. -To apply an initial filter with multiple values for different columns, define the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object within the [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 filters both **"Order ID"** and **"Customer ID"** columns simultaneously. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -441,9 +453,9 @@ To apply an initial filter with multiple values for different columns, define th ## 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 specified using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) property within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) collection of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). +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) property in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) collection of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). -The available operators and their supported data types are listed below: +The available operators and their supported data types are: Operator |Description |Supported Types -----|-----|----- @@ -465,17 +477,17 @@ IsEmpty |Returns the values that are empty. |String IsNotEmpty |Returns the values that are not empty. |String Between |Filter the values based on the range between the start and end specified values. |Number | Date -> By default, the **Operator** value is **Equal** in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`. +> By default, DataGrid uses different filter operators for different column types. The default filter operator for string columns is **"StartsWith**", for numeric columns is **Equal**, and for boolean columns is **Equal**. ## WildCard and Like operator filter -**WildCard** and **Like** filter operators apply to string-type columns and filter values based on specified string patterns. Each operator behaves differently in terms of pattern matching. +"Wildcard" and "like" operators filter values based on string patterns and apply to string-type columns. They work slightly differently in pattern matching. ### WildCard filtering -The WildCard filter processes one or more search patterns using the * symbol to retrieve values that match the defined criteria. +The "Wildcard" filter processes one or more search patterns using the "*" symbol, retrieving values matching the specified patterns. Wildcard characters match any sequence of characters in a search pattern. -* The **WildCard** filter option is supported in the DataGrid with all search modes enabled. +**For example:** Operator |Description -----|----- @@ -485,17 +497,17 @@ a* | Matches values that start with “a”. a | Matches values that contain “a”. ab* | Matches values that contain “a”, followed by any characters, then “b”, followed by any characters. -![Blazor DataGrid with WildCard operator filtering](./images/blazor-datagrid-wildcard-operator-filtering.gif) +![WildcardFilter](./images/blazor-datagrid-wildcard-operator-filtering.gif) ### Like filtering -The **Like** filter processes single search patterns using the % symbol to retrieve values that match the defined criteria. The following Syncfusion® Blazor DataGrid features support Like filtering on string-type columns: +The "Like" filter processes search patterns using the "%" symbol, retrieving values matching the specified patterns. The following DataGrid features support like filtering on string-type columns: * 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 -**Example patterns:** +**For example:** | Operator | Description | | ----- | ----- | @@ -503,11 +515,220 @@ The **Like** filter processes single search patterns using the % symbol t | ab% | Matches values that end with “ab”. | | %ab | Matches values that start with “ab”. | -![Blazor DataGrid with like operator filtering](./images/blazor-datagrid-like-operator-filtering.gif) +![LIKEFilter](./images/blazor-datagrid-like-operator-filtering.gif) + +## Diacritics filter + +The diacritics filter feature handles text data that includes accented characters. Diacritics are accent marks added to letters (examples: é, ñ, ü, ç). By default, the DataGrid ignores these characters during filtering. + +This feature is essential for international data where names like "José" and "Jose" should be treated differently (or the same, depending on requirements). + +Enable diacritic character consideration by setting `FilterSettings.IgnoreAccent` to `true`. + +The following example includes diacritic characters in the filtering process: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + public List GridData { get; set; } + SfGrid Grid; + + protected override void OnInitialized() + { + GridData = EmployeeData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="EmployeeData.cs" %} + + public List GridData { get; set; } + SfGrid Grid; + + protected override void OnInitialized() + { + GridData = EmployeeData.GetAllRecords(); + } + public class EmployeeData + { + public static List Employees = new List(); + public EmployeeData(){} + public EmployeeData(int EmployeeID, string Name, string CustomerID, string ShipName) + { + this.EmployeeID = EmployeeID; + this.Name = Name; + this.CustomerID = CustomerID; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Employees.Count() == 0) + { + Employees.Add(new EmployeeData(1, "Aeróbics", "VINET", "Vins et alcools Chevalier")); + Employees.Add(new EmployeeData(2, "Aerógrafía en Agua","TOMSP", "Toms SpezialitAiten")); + Employees.Add(new EmployeeData(3, "Aerografía", "TAMSP", "Suprames dalices")); + Employees.Add(new EmployeeData(4, "Aeromodelaje", "HANAA", "Ottilies Kaseladen")); + Employees.Add(new EmployeeData(5, "Águilas", "VICTE", "Centro comercial Moctezuma")); + Employees.Add(new EmployeeData(6, "Álbumes de Delta", "HANAR", "Que Delacia")); + Employees.Add(new EmployeeData(7, "Álbumes de Música", "SUPRD", "Ernst Handel")); + Employees.Add(new EmployeeData(8, "Alusivos", "list-08", "Richter Supermarkt")); + Employees.Add(new EmployeeData(9, "Ãerografía", "CHOPS", "Wellington")); + Employees.Add(new EmployeeData(10, "Análisis de Escritura a Mano", "WELLI", "Victuailles")); + } + return Employees; + } + + public int EmployeeID { get; set; } + public string Name { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + } + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdDpiNikopYwJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Perform ENUM column filtering + +The Syncfusion® Blazor DataGrid allows filtering enum-type data using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature. Enumerated values (enum) are predefined fixed options, such as status categories (Active, Inactive, Pending) or priority levels (High, Medium, Low). This is particularly useful for filtering columns with dropdown-based data. + +In the following example, the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component is rendered within the `FilterTemplate` of the **Type** column. The enumerated list is bound to the column, and filtering is applied dynamically using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`. Within this event, 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_System_String_) method is used to apply filtering to the **Type** column. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + + + + + + + + +@code { + public SfGrid Grid; + public List GridData { get; set; } + List FilterDropData = new List + { + new Data() { Type= "All" }, + new Data() { Type= "Base" }, + new Data() { Type= "Replace" }, + new Data() { Type= "Delta" } + }; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + public async Task Change(ChangeEventArgs args) + { + if (args.Value == "All") + { + await this.Grid.ClearFilteringAsync(); + } + else + { + await this.Grid.FilterByColumnAsync("Type", "contains", args.Value); + } + } + + public class Data + { + public string Type { get; set; } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData(){} + + public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName, FileType type) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.ShipCity = ShipCity; + this.ShipName = ShipName; + this.Type = type; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10248; + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevalier", FileType.Base)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", "Münster", "Toms Spezialitäten", FileType.Replace)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", "Rio de Janeiro", "Hanari Carnes", FileType.Delta)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", "Lyon", "Victuailles en stock", FileType.Base)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", "Charleroi", "Suprêmes délices", FileType.Replace)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", "Lyon", "Hanari Carnes", FileType.Delta)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese", FileType.Base)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", "Münster", "Richter Supermarkt", FileType.Replace)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", "Reims", "Wellington Import", FileType.Delta)); + + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public FileType Type { get; set; } +} + +public enum FileType : short +{ + Base = 1, + Replace = 2, + Delta = 3 +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Filtering with case sensitivity -The Syncfusion® Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. This feature allows control over whether filtering operations should consider character casing. Case sensitivity can be configured 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)configuration. +The Syncfusion® Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. Control whether filtering operations consider the case of characters using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -608,11 +829,11 @@ public class OrderData ## Enable different filter for a column -The Syncfusion® Blazor DataGrid provides flexibility to customize filtering behavior for individual columns by enabling various filter types such as **Menu**, **Excel**, and **Checkbox**. This feature allows tailoring the filtering experience to meet the specific requirements of each column. For example, a menu-based filter may be suitable for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column. +The Syncfusion® Blazor DataGrid offers flexibility to customize filtering behavior for different columns by enabling various filter types such as `Menu`, `Excel`, or `CheckBox`. This allows tailoring the filtering experience to suit specific column needs. For example, use a menu-based filter for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column. -This customization can be achieved by setting 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. +Adjust 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) based on requirements. -The following example demonstrates how the menu filter is enabled by default for all columns, and how filter types can be dynamically modified using a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started): +Here's an example where the menu filter is enabled by default, but filter types can be dynamically modified through a `SfDropDownList`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -767,7 +988,7 @@ public class OrderData ## Change default filter operator for particular column -The Syncfusion® Blazor DataGrid provides flexibility to modify the default filter operator for individual columns. By default, the filter operator is set to **StartsWith** for string-type columns, and **Equal** for numerical and boolean-type columns. In scenarios where a different operator better suits the nature of the data, the default can be customized 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. +The Syncfusion® Blazor DataGrid provides flexibility to change the default filter operator for a particular column. By default, the filter operator for string columns is `StartsWith`, for numeric columns is `Equal`, and for boolean columns is `Equal`. Customize the filter operator to better match the nature of the data 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). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -926,11 +1147,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTXCAsUitWDKfU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Filter via programmatically +## Programmatic filtering -Programmatic filtering in the Syncfusion® Blazor DataGrid enables applying filters to specific columns without relying on UI interactions. This approach supports both single and multiple filter values. +Programmatic filtering allows applying filters to specific columns without relying on user interface interactions. This is achieved 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_System_String_) method. -Filtering can be performed 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_System_String_) method of the Grid. +The following example demonstrates programmatic filtering using single and multiple values for the "Order ID" and "Customer ID" columns. The `FilterByColumnAsync` method is called within an external button click function. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1026,7 +1247,7 @@ public class OrderData ## How to get filtered records -Retrieving filtered records in the Syncfusion® Blazor DataGrid is essential when working with data that matches the currently applied filters. This can be accomplished using available methods and event properties in the Grid. +Retrieving filtered records is essential when working with data matching currently applied filters. Achieve this using available methods and properties in the DataGrid. **Fetch filtered Records with GetFilteredRecordsAsync** @@ -1307,7 +1528,7 @@ public async Task FilteredHandler(FilteredEventArgs args) ## Clear filter via programmatically -The Syncfusion® Blazor DataGrid provides the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to remove applied filters and reset the Grid to its original state. +The Syncfusion® Blazor DataGrid provides a [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to clear applied filtering. This method removes filter conditions and resets the DataGrid to its original state. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1394,9 +1615,9 @@ public class OrderData ## Filtering events -Filtering events provide customization options for the Syncfusion® Blazor DataGrid when filtering is applied. These events can be used to prevent filtering for specific columns, display messages, or perform other actions based on application requirements. +Filtering events allow customizing the behavior of the DataGrid when filtering is applied. Prevent filtering for specific columns, show messages, or perform other actions to suit application needs. -To implement filtering events, use the available [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) events. These events allow intervention in the filtering process and support customization. +Implement filtering events using the available [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) events. These events allow intervention in the filtering process and customization as needed. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1503,126 +1724,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVJDMMmLnklDAQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Filter enum column - -Enum-type data can be filtered in the Syncfusion® Blazor DataGrid using the Filter Template feature. - -In the following example, the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component is rendered within the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) of the **Type** column. The enumerated list is bound to the column, and filtering is applied dynamically using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`. Within this event, 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_System_String_) method is used to apply filtering to the **Type** column. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.DropDowns - - - - - - - - - - - - - - - - - - -@code { - public SfGrid Grid; - public List GridData { get; set; } - List FilterDropData = new List - { - new Data() { Type= "All" }, - new Data() { Type= "Base" }, - new Data() { Type= "Replace" }, - new Data() { Type= "Delta" } - }; - - protected override void OnInitialized() - { - GridData = OrderData.GetAllRecords(); - } - - public async Task Change(ChangeEventArgs args) - { - if (args.Value == "All") - { - await this.Grid.ClearFilteringAsync(); - } - else - { - await this.Grid.FilterByColumnAsync("Type", "contains", args.Value); - } - } - - public class Data - { - public string Type { get; set; } - } -} - -{% endhighlight %} - -{% highlight c# tabtitle="OrderData.cs" %} - -public class OrderData -{ - public static List Orders = new List(); - public OrderData(){} - - public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName, FileType type) - { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; - this.Type = type; - } - - public static List GetAllRecords() - { - if (Orders.Count() == 0) - { - int OrderID = 10248; - for (int i = 1; i < 3; i++) - { - Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevalier", FileType.Base)); - Orders.Add(new OrderData(OrderID + 2, "TOMSP", "Münster", "Toms Spezialitäten", FileType.Replace)); - Orders.Add(new OrderData(OrderID + 3, "HANAR", "Rio de Janeiro", "Hanari Carnes", FileType.Delta)); - Orders.Add(new OrderData(OrderID + 4, "VICTE", "Lyon", "Victuailles en stock", FileType.Base)); - Orders.Add(new OrderData(OrderID + 5, "SUPRD", "Charleroi", "Suprêmes délices", FileType.Replace)); - Orders.Add(new OrderData(OrderID + 6, "HANAR", "Lyon", "Hanari Carnes", FileType.Delta)); - Orders.Add(new OrderData(OrderID + 7, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese", FileType.Base)); - Orders.Add(new OrderData(OrderID + 8, "RICSU", "Münster", "Richter Supermarkt", FileType.Replace)); - Orders.Add(new OrderData(OrderID + 9, "WELLI", "Reims", "Wellington Import", FileType.Delta)); - - OrderID += 9; - } - } - return Orders; - } - - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - public FileType Type { get; set; } -} - -public enum FileType : short -{ - Base = 1, - Replace = 2, - Delta = 3 -} -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVJDMMmLnklDAQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index 09fe30aad6..4aef9032a9 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -9,11 +9,11 @@ documentation: ug # Toolbar in Blazor DataGrid -The toolbar in the Syncfusion® Blazor DataGrid provides quick access to common actions such as adding, editing, deleting, printing, and exporting data (Excel, CSV, PDF). +The toolbar in the Syncfusion® Blazor DataGrid offers several general use cases to enhance data manipulation and overall experience. Actions such as adding, editing, and deleting records within the DataGrid can be performed, providing efficient data manipulation capabilities. The toolbar also facilitates data export and import functionality, allowing users to generate downloadable files in formats like Excel, CSV, or PDF. -The toolbar can be configured with built-in toolbar items or custom items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts: -- An array of strings for built-in items -- An array of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects for custom items (text, icon, id, tooltip) +To enable the toolbar functionality, you need to add the `Toolbar` property to the DataGrid. This property provides the necessary methods to interact with the toolbar items. The toolbar can be customized with built-in toolbar items or custom toolbar items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts an array of strings representing the built-in toolbar items or an array of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects for custom toolbar items. + +The following example demonstrates enabling toolbar items in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -86,9 +86,11 @@ The toolbar can be configured with built-in toolbar items or custom items using ## Enable or disable toolbar items -Enable or disable toolbar items dynamically to control which actions are available based on application logic or user interactions. +Enabling or disabling toolbar items dynamically in Syncfusion® Blazor DataGrid is to provide control over the availability of specific functionality based on application logic. This powerful capability allows toolbar customization based on various conditions or user interactions. + +Toolbar items can be enabled or disabled dynamically by using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This method allows control over the availability of specific toolbar items based on application logic requirements. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the DataGrid generates IDs (for example, Grid_Add, Grid_Edit). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items. -Toolbar items in the Syncfusion® Blazor DataGrid can be enabled or disabled dynamically using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the Grid generates IDs (for example, **Grid_Add, Grid_Edit**). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items. +In the following example, the [Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) is added to enable and disable the toolbar items using `EnableToolbarItemsAsync` method. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event is triggered and the toolbar items are updated accordingly. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -304,19 +306,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/htBIXGVkiYUtauxh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize Toolbar buttons using CSS +## Customize toolbar buttons using CSS -Customize the appearance of built-in toolbar buttons by applying CSS to achieve cohesive theming and clear visual hierarchy. Maintain sufficient color contrast and preserve visible focus indicators for accessibility. +Enhance the visual presentation of toolbar buttons in the Syncfusion® Blazor DataGrid by modifying their appearance with CSS styles. This flexible approach creates a cohesive user interface tailored to application design requirements. -The following styles target toolbar button icons and buttons to update the background color: +The appearance of the built-in toolbar buttons can be modified by applying the following CSS styles: -```csharp +```css .e-grid .e-toolbar .e-tbar-btn .e-icons, .e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn { background: #add8e6; } ``` -The following example demonstrates changing the background color of the `Add`, `Edit`, `Delete`, `Update`, and `Cancel` toolbar buttons using CSS: + +The following example demonstrates changing the background color of the `Add`, `Edit`, `Delete`, `Update`, and `Cancel` toolbar buttons by applying CSS styles: {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md index 4caccbd04e..3b18aaeb7b 100644 --- a/blazor/datagrid/toolbar-items.md +++ b/blazor/datagrid/toolbar-items.md @@ -9,29 +9,31 @@ documentation: ug # Toolbar items in Blazor DataGrid -The Syncfusion® Blazor DataGrid offers a flexible toolbar that enables the addition of custom toolbar items or modification of existing ones. The toolbar appears above the DataGrid, providing convenient access to common actions and custom functionality. +The Syncfusion® Blazor DataGrid includes a customizable toolbar positioned above the DataGrid for accessing various actions and functionalities. Both built-in and custom toolbar items can be added to meet specific application requirements. -## Built-in Toolbar item +## Built-in toolbar items -Built-in toolbar items in the Syncfusion® Blazor DataGrid use predefined actions to perform standard operations. +Built-in toolbar items in the Syncfusion® Blazor DataGrid provide predefined actions to perform standard operations within the DataGrid. -Add them by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in item names (strings). Each item is rendered as a button with an icon and text. The following table lists the built-in toolbar items and their actions: +These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in items. Each item is rendered as a button with an icon and text. The following table lists the built-in toolbar items and their respective actions: | Built-in Toolbar Items | Actions | |------------------------|---------| -| Add | Adds a new row to the DataGrid. | -| Edit | Puts the selected row into edit mode. | -| Update | Saves changes made during edit mode. | -| Delete | Deletes the selected record. | -| Cancel | Discards changes made during edit mode. | -| Search | Displays a search box to filter the records. | -| Print | Prints the DataGrid content. | -| ColumnChooser | Opens the Column Chooser to toggle column visibility. | -| PdfExport | Exports DataGrid data to a PDF file. | -| ExcelExport | Exports DataGrid data to an Excel file. | -| CsvExport | Exports DataGrid data to a CSV file. | - -N> Built-in item IDs are typically prefixed with the grid ID (for example, Grid_add). Use these IDs in event handlers for robust detection. +| Add | Adds a new row to the DataGrid.| +| Edit | Enables editing mode for the selected row in the DataGrid.| +| Update | Saves the changes made during the editing mode.| +| Delete | Deletes the selected record from the DataGrid.| +| Cancel | Discards the changes made during the editing mode.| +| Search | Displays a search box to filter the DataGrid records.| +| Print | Prints the DataGrid content.| +| ColumnChooser | Displays options to choose column visibility.| +| PdfExport | Exports the DataGrid data to a PDF file.| +| ExcelExport | Exports the DataGrid data to an Excel file.| +| CsvExport | Exports the DataGrid data to a CSV file.| + +N> Built-in item IDs are typically prefixed with the DataGrid ID (for example, Grid_add). Use these IDs in event handlers for robust detection. + +The following example demonstrates enabling built-in toolbar items such as `Print` and `Search` in the DataGrid. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -105,11 +107,18 @@ N> Built-in item IDs are typically prefixed with the grid ID (for example, Grid_ {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrAMXrYLyKJdugz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -### Show only icons in built-in Toolbar Items +### Show only icons in built-in toolbar items -Showing only icons in the built-in toolbar items allows a compact toolbar layout. +To display only icons in the built-in toolbar items of the DataGrid, use CSS to hide the text portion of the buttons. For accessibility, provide an accessible name by using **TooltipText** or **aria-label** so screen readers can announce the action correctly. -To show only icons, hide the text part of the buttons using CSS. For accessibility, provide an accessible name by using **TooltipText** or **aria-label** so screen readers can announce the action correctly. +```css +.e-grid .e-toolbar .e-tbar-btn-text, +.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text { + display: none; +} +``` + +This is demonstrated in the following sample: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -191,9 +200,11 @@ To show only icons, hide the text part of the buttons using CSS. For accessibili ### Customize the built-in toolbar items -The Syncfusion® Blazor DataGrid allows customizing built-in toolbar items, including disabling default actions and executing custom logic when a button is clicked. +The Syncfusion® Blazor DataGrid allows customization of the built-in toolbar items to meet specific requirements. This customization can include adding, removing, or modifying toolbar items, as well as handling custom actions when toolbar buttons are clicked. + +Customization of built-in toolbar items is achieved using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the DataGrid. This event is triggered when any toolbar button is clicked, allowing custom logic to be implemented. Prefer checking **args.Item.Id** for reliability (IDs are stable and not affected by localization), although Text is also available. -Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to intercept actions. Prefer checking **args.Item.Id** for reliability (IDs are stable and not affected by localization), although Text is also available. +The following example demonstrates customizing the toolbar by disabling and canceling the `Add` button functionality and showing a custom message when the `Add` button of toolbar is clicked. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -279,13 +290,13 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LNVINzCcAGRIvWxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Custom Toolbar Items +## Custom toolbar items -Adding custom toolbar items to the Syncfusion® Blazor DataGrid enables personalized functionality. +Custom toolbar items in the Syncfusion® Blazor DataGrid allow addition of personalized functionality to the toolbar. These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects. These objects define the custom items and their corresponding actions. The actions for customized toolbar items are defined in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. -Define custom items by setting the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property to a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects, and handle actions in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event. +By default, custom toolbar items are positioned on the left side of the toolbar. The position can be changed by using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the `ItemModel`. -By default, custom toolbar items are positioned on the **left** side. Change the position using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of ItemModel. +The following example demonstrates applying the `Align` property with the value `Right` for the "Collapse All" toolbar item. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -379,11 +390,13 @@ By default, custom toolbar items are positioned on the **left** side. Change the {% previewsample "https://blazorplayground.syncfusion.com/embed/rNLIDOgtGItGVQpJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Both built-in and custom items in Toolbar +## Both built-in and custom items in toolbar -Combining built-in and custom items provides flexibility to create a toolbar with standard actions and custom functionality. +The toolbar in the Syncfusion® Blazor DataGrid supports a combination of built-in and custom toolbar items to provide standard and custom actions within the same toolbar. -Define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as an array that contains both built-in item names (strings) and custom items (objects with properties such as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text), [PrefixIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_PrefixIcon), and [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Id)). +To use both types of toolbar items, define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the DataGrid as an array that includes both built-in and custom items. Built-in items are specified as strings, while custom items are defined as objects with properties such as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text), [PrefixIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_PrefixIcon), and [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Id). + +The following example demonstrates both built-in and custom toolbar items in the DataGrid. The built-in toolbar items include `Add`, `Edit`, `Delete`, `Update`, and `Cancel`, while the custom toolbar item is `Click`. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -472,11 +485,13 @@ Define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gri {% previewsample "https://blazorplayground.syncfusion.com/embed/VtBKCXBEUwAbaVmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Custom Toolbar Items in a specific position +## Custom toolbar items in a specific position + +Custom toolbar items in the Syncfusion® Blazor DataGrid can be positioned in specific locations by modifying the default placement. This enables precise control of each custom toolbar item's positioning according to specific requirements and desired layout within the DataGrid. -Customizing the position of a custom toolbar item modifies its default placement, allowing precise control over layout. +By default, custom toolbar items in the DataGrid are aligned on the left side of the toolbar. The position of custom toolbar items can be modified by utilizing the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor). -By default, custom toolbar items are aligned on the left. Modify the position by setting the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor). +In the following sample, the "Collapse All" toolbar item is positioned on the `Right`, the "Expand All" toolbar item is positioned on the left, and the `Search` toolbar item is positioned at the center. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -573,8 +588,8 @@ When creating custom toolbar items using the same text as default items (such as To avoid this behavior and ensure proper functionality: -- Assign a unique **Id** to each custom toolbar item to distinguish it from default items. -- Use the **Text**, **PrefixIcon**, and **TooltipText** properties of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) to define appearance. +- Assign a unique `Id` to each custom toolbar item to distinguish it from default items. +- Use the `Text`, `PrefixIcon`, and `TooltipText` properties of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) to define appearance. - Handle actions in `OnToolbarClick` using the Id (or Text, if necessary). {% tabs %}