From fbfe3b97ea667b3a3076b96bbd64c1b98cdd24c2 Mon Sep 17 00:00:00 2001 From: Farveensulthana Date: Wed, 25 Mar 2026 00:05:10 +0530 Subject: [PATCH 1/2] 1015395-Filtering --- blazor/datagrid/custom-toolbar.md | 26 +- blazor/datagrid/excel-like-filter.md | 57 +- blazor/datagrid/filter-menu.md | 1456 ++++++++++++++++++++++++++ blazor/datagrid/filtering.md | 404 ++++--- blazor/datagrid/tool-bar.md | 26 +- blazor/datagrid/toolbar-items.md | 83 +- 6 files changed, 1816 insertions(+), 236 deletions(-) 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-menu.md b/blazor/datagrid/filter-menu.md index 94cefb5482..0dd6c6ab9b 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -1454,4 +1454,1460 @@ When using the filter menu in the Syncfusion® + + + + + + + + + +@code { + + public List GridData { get; set; } + + SfGrid Grid; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } +} + +{% 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/hZVJXMVKpLxfzxZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) must be set as `true` to enable filter menu. +> * 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 + +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) + +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" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + + + + + + + +@code { + + public List GridData { get; set; } + + SfGrid Grid; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } +} + +{% 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/hNVSWMhnrOEBQtDs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +**Default filter input for OrderID column** + +![Default filter input for OrderID column](images/Blazor-default-filter-input-datagrid.gif) + +**Custom dropdown filter for OrderID column** + +![Custom dropdown filter for OrderID column.](images/blazor-custom-dropdown-filter-datagrid.gif) + +## Show 24 hours time format in filter dialog + +The DataGrid provides a feature to display the time in a 24-hour format in the date or datetime column filter dialog. + +By default, the filter dialog displays 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" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Calendars + + + + + + + + + + + + + + + + + + + + + + +@code { + + public List GridData { get; set; } + + SfGrid Grid; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData(){} + public OrderData(int? OrderID, DateTime? OrderDate, DateTime? ShippedDate, string ShipCountry) + { + this.OrderID = OrderID; + this.OrderDate = OrderDate; + this.ShippedDate = ShippedDate; + this.ShipCountry = ShipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10247; + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, new DateTime(1996, 07, 10, 0, 0, 0), new DateTime(1996, 07, 10, 7, 46, 0), "France")); + Orders.Add(new OrderData(OrderID + 2, new DateTime(1996, 07, 10, 1, 56, 0), new DateTime(1996, 07, 10, 9, 26, 0), "Germany")); + Orders.Add(new OrderData(OrderID + 3, new DateTime(1996, 07, 10, 3, 53, 0), new DateTime(1996, 07, 10, 11, 40, 0), "Brazil")); + Orders.Add(new OrderData(OrderID + 4, new DateTime(1996, 07, 10, 5 , 50, 0), new DateTime(1996, 07, 10,13, 36, 0), "Belgium")); + Orders.Add(new OrderData(OrderID + 5, new DateTime(1996, 07, 10, 7, 46 ,0), new DateTime(1996, 07, 10, 15, 33, 0), "Switzerland")); + Orders.Add(new OrderData(OrderID + 6, new DateTime(1996, 07, 10, 9, 43, 0), new DateTime(1996, 07, 10, 17, 30, 0), "Venezuela")); + Orders.Add(new OrderData(OrderID + 7, new DateTime(1996, 07, 10, 13, 36, 0), new DateTime(1996, 07, 10, 19, 26, 0), "Austria")); + Orders.Add(new OrderData(OrderID + 8, new DateTime(1996, 07, 10, 15, 33, 0), new DateTime(1996, 07, 10, 21, 23, 0), "Mexico")); + Orders.Add(new OrderData(OrderID + 9, new DateTime(1996, 07, 10,17, 30, 0), new DateTime(1996, 07, 10, 23, 20, 0), "USA")); + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public DateTime? OrderDate { get; set; } + public DateTime? ShippedDate { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLTXsUNzHJMohoW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customizing filter menu operators + +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. + +Customize operators for string, number, date, and boolean data types using these options: + +* `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" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + +@code { + + public List GridData { get; set; } + + SfGrid Grid; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + public async Task FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + + if (args.ColumnName == "CustomerID" || args.ColumnName == "ShipName") + { + args.FilterOperators = StringOperator; + } + else if (args.ColumnName == "OrderID") + { + args.FilterOperators = NumberOperator; + } + else if (args.ColumnName == "OrderDate") + { + args.FilterOperators = DateOperator; + } + else if (args.ColumnName == "Verified") + { + args.FilterOperators = BooleanOperator; + } + } + + + public class Operators : Syncfusion.Blazor.Grids.IFilterOperator + { + public string Value { get; set; } + public string Text { get; set; } + } + + List StringOperator = new List { + new Operators() { Value= "startswith", Text= "Starts With" }, + new Operators() { Value= "endswith", Text= "Ends With" }, + new Operators() { Value= "contains", Text= "Contains" }, + new Operators() { Value= "equal", Text= "Equal" }, + new Operators() { Value= "notequal", Text= "Not Equal" } + }; + List NumberOperator = new List { + new Operators() { Value= "equal", Text= "Equal" }, + new Operators() { Value= "notequal", Text= "Not Equal" }, + new Operators() { Value= "greaterthan", Text= "Greater Than" }, + new Operators() { Value= "lessthan", Text= "Less Than" }, + }; + List DateOperator = new List { + new Operators() { Value= "equal", Text= "Equal" }, + new Operators() { Value= "notequal", Text= "Not Equal" }, + new Operators() { Value= "greaterthan", Text= "After" }, + new Operators() { Value= "lessthan", Text= "Before" }, + }; + List BooleanOperator = new List { + new Operators() { Value= "equal", Text= "Equal" }, + new Operators() { Value= "notequal", Text= "Not Equal" }, + }; +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData(){} + + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, bool Verified, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Verified = Verified; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10247; + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", new DateTime(1996, 07, 06), true, "Vins et alcools Chevali")); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", new DateTime(1996, 07, 06), false, "Toms Spezialitäten")); + Orders.Add(new OrderData(OrderID + 3, "HANAR", new DateTime(1996, 07, 06), false, "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 4, "VICTE", new DateTime(1996, 07, 06), true, "Victuailles en stock")); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", new DateTime(1996, 07, 06), true, "Suprêmes délices")); + Orders.Add(new OrderData(OrderID + 6, "HANAR", new DateTime(1996, 07, 06), false, "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", new DateTime(1996, 07, 06), true, "Chop-suey Chinese")); + Orders.Add(new OrderData(OrderID + 8, "RICSU", new DateTime(1996, 07, 06), true, "Richter Supermarkt")); + Orders.Add(new OrderData(OrderID + 9, "WELLI", new DateTime(1996, 07, 06), false, "Wellington Import")); + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public bool Verified { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% 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 + +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. + +Each column type uses a default component in the filter menu, which can be customized with specific parameters: + +| Column | Filter Component | Customization | +| -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------- | +| **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" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Calendars + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + protected override void OnInitialized() + { + GridData = Orders.GetAllRecords(); + } + public IFilterSettings CustomerIdFilterSettings = new AutoCompleteFilterParams + { + AutoCompleteParams = new AutoCompleteModel + { + DebounceDelay = 2000, + Autofill = false, + } + }; + public IFilterSettings OrderIdFilterSettings = new NumericFilterParams + { + NumericTextBoxParams = new NumericTextBoxModel + { + ShowClearButton = true, + Min = 10000, + } + }; + public IFilterSettings ShipCityFilterSettings = new AutoCompleteFilterParams + { + AutoCompleteParams = new AutoCompleteModel + { + MinLength = 2, + Autofill = true, + } + }; + public IFilterSettings OrderTimeFilterSettings = new TimeFilterParams + { + TimePickerParams = new TimePickerModel + { + Step = 10 + } + }; +} +{% endhighlight %} +{% highlight c# tabtitle="Orders.cs" %} + +public class Orders +{ + public Orders() { } + + public Orders(int orderID, string customerID, double freight, DateOnly orderDate, TimeOnly orderTime, string shipCity) + { + OrderID = orderID; + CustomerID = customerID; + Freight = freight; + OrderDate = orderDate; + OrderTime = orderTime; + ShipCity = shipCity; + } + + public static List GetAllRecords() + { + List orders = new List(); + int code = 10000; + for (int i = 1; i < 5; i++) + { + orders.Add(new Orders(code + 1, "ALFKI", Math.Round((2.3 * i), 2), new DateOnly(1991, 05, 15), new TimeOnly(10, 00, 00), "Berlin")); + orders.Add(new Orders(code + 2, "ANATR", Math.Round((3.3 * i), 2), new DateOnly(1990, 04, 04), new TimeOnly(11, 30, 00), "Madrid")); + orders.Add(new Orders(code + 3, "ANTON", Math.Round((4.3 * i), 2), new DateOnly(1957, 11, 30), new TimeOnly(12, 00, 00), "Cholchester")); + orders.Add(new Orders(code + 4, "BLONP", Math.Round((5.3 * i), 2), new DateOnly(1930, 10, 22), new TimeOnly(15, 30, 00), "Marseille")); + orders.Add(new Orders(code + 5, "BOLID", Math.Round((6.3 * i), 2), new DateOnly(1953, 02, 18), new TimeOnly(16, 30, 00), "Tsawassen")); + code += 5; + } + return orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public DateOnly? OrderDate { get; set; } + public TimeOnly? OrderTime { get; set; } + public string ShipCity { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +> This customization is applicable for both menu and excel filter dialogs. + +## Customize the default input component of filter menu dialog + +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 | [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. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + SfGrid? Grid { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData(){} + + public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10247; + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", 32.38, "Vins et alcools Chevali")); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", 11.61, "Toms Spezialitäten")); + Orders.Add(new OrderData(OrderID + 3, "HANAR", 65.83, "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 4, "VICTE", 45.78, "Victuailles en stock")); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", 98.6, "Suprêmes délices")); + Orders.Add(new OrderData(OrderID + 6, "HANAR", 103.45, "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", 103.45, "Chop-suey Chinese")); + Orders.Add(new OrderData(OrderID + 8, "RICSU", 112.48, "Richter Supermarkt")); + Orders.Add(new OrderData(OrderID + 9, "WELLI", 33.45, "Wellington Import")); + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrftBDxzDMOqgsi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Prevent autofill option in autocomplete of menu filter + +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. + +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" %} +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + + + + + + + + + + + + + + + + +@code { + public List GridData { get; set; } + SfGrid? Grid { get; set; } + + List CustomerData = new List() { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI" }; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderData.cs" %} + + public class OrderData + { + public static List Orders = new List(); + + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10247; + for (int i = 1; i < 3; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", 32.38, "Vins et alcools Chevali")); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", 11.61, "Toms Spezialitäten")); + Orders.Add(new OrderData(OrderID + 3, "HANAR", 65.83, "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 4, "VICTE", 45.78, "Victuailles en stock")); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", 98.6, "Suprêmes délices")); + Orders.Add(new OrderData(OrderID + 6, "HANAR", 103.45, "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", 103.45, "Chop-suey Chinese")); + Orders.Add(new OrderData(OrderID + 8, "RICSU", 112.48, "Richter Supermarkt")); + Orders.Add(new OrderData(OrderID + 9, "WELLI", 33.45, "Wellington Import")); + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } + public double? Freight { get; set; } + } +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXMrazUJxtJCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Hide the filter operator dropdownlist in the filter menu dialog + +To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, apply the following CSS to override the styling of the **.e-flm_optrdiv** class. This customization simplifies the interface by applying a default filter behavior without displaying the operator selection. + +```css + .e-flm_optrdiv { + display: none; + } +``` + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + + + +@code { + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() + { + + } + public OrderData(int? OrderID, string CustomerID, double Freight,DateTime? OrderDate) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + this.OrderDate = OrderDate; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int code = 10; + for (int i = 1; i < 2; i++) + { + Orders.Add(new OrderData(10248, "VINET", 32.38,new DateTime(1996,7,4))); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); + Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); + Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); + Orders.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(1996, 7, 8))); + Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); + Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); + Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); + code += 5; + } + } + return Orders; + } + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public DateTime? OrderDate { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVeXQrIANVmdQhp?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, 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 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" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons +Filter Customer ID Column + Clear Filter + + + + + + + + + + + +@code { + public List Orders { get; set; } + SfGrid Grid; + protected override void OnInitialized() + { + var customerIds = new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "ECHO", "CHARLIE", "DELTA", "FOXTROT", "GOLF", "HOTEL", "INDIA", "JULIET" }; + Orders = Enumerable.Range(1, 12).Select(x => new Order() + { + OrderID = 1000 + x, + CustomerID = customerIds[x % customerIds.Length], + Freight = 2.1 * x, + OrderDate = DateTime.Now.AddDays(-x), + }).ToList(); + } + + public class Order + { + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } + } + public async Task filterAction() + { + await Grid.FilterByColumnAsync("CustomerID", "equal", "ECHO"); + } + public async Task clearFilter() + { + await Grid.ClearFilteringAsync(); + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXMrazUJxtJCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Filter menu events + +The Syncfusion® Blazor DataGrid provides the following events to monitor and customize filter menu interactions: + +1. [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering): Triggered before a filtering or clear filtering action is executed. This event allows pre-processing logic. +2. [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered): Triggered after the filtering action is completed. Useful for post-processing tasks. +3. [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening): Occurs before the filter dialog opens, enabling pre-opening customization. +4. [FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpened): Occurs after the filter dialog has opened, allowing post-opening adjustments. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + +@if(Show == true) +{ +
+ @BeginMessage +
+
+ @CompleteMessage +
+
+} + + + + + + + + + + + + + +@if(flag == true){ + + +} + +@code { + + public List GridData { get; set; } + + SfGrid Grid; + + public bool flag = false; + public bool Show = false; + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + public string BeginMessage; + + public string CompleteMessage; + + public async Task FilteringHandler(FilteringEventArgs args) + + { + if (args.ColumnName == "ShipCity") + { + args.Cancel = true; + BeginMessage = "Filtering is not allowed for ShipCity column"; + } + else + { + BeginMessage = "The Filtering event is triggered for the " + args.ColumnName + " column"; + } + } + public async Task FilteredHandler(FilteredEventArgs args) + { + CompleteMessage = "Filtering action completed for " + args.ColumnName + " column"; + } + public async Task FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args) + { + Show = true; + if (args.ColumnName == "OrderID" || args.ColumnName == "Freight") + { + args.FilterOperators = new List + { + new Operators() { Text = "Equal", Value = "equal" }, + new Operators() { Text = "Not Equal", Value = "notequal" } + }; + BeginMessage = "Filter operators for number column were customized in the FilterDialogOpening event"; + } + else + { + BeginMessage = "The FilterDialogOpening event is triggered for the "+ args.ColumnName+ " column"; + } + } + public async Task FilterDialogOpeneHandler(FilterDialogOpenedEventArgs args) + { + flag = true; + CompleteMessage = "Applied CSS for filter dialog during FilterDialogOpened event"; + } + public class Operators : Syncfusion.Blazor.Grids.IFilterOperator + { + public string Value { get; set; } + public string Text { 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, double? Freight, string ShipCity, string ShipName) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.Freight = Freight; + 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", 32.38, "Reims", "Vins et alcools Chevali")); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", 11.61, "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(OrderID + 3, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 4, "VICTE", 45.78, "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", 98.6, "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(OrderID + 6, "HANAR", 103.45, "Lyon", "Hanari Carnes")); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", 103.45, "Rio de Janeiro", "Chop-suey Chinese")); + Orders.Add(new OrderData(OrderID + 8, "RICSU", 112.48, "Münster", "Richter Supermarkt")); + Orders.Add(new OrderData(OrderID + 9, "WELLI", 33.45, "Reims", "Wellington Import")); + OrderID += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public double? Freight { get; set; } + public string ShipName { get; set; } + public string ShipCity { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrTZWVuFpHxbSMS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Limitations of using different filter types in different columns + +Different filter types such as Excel, Menu, and Checkbox can be defined in different columns of the same Syncfusion® Blazor DataGrid. However, you cannot use these filter types along with filterBar type (default filter type). Because the filterbar type requires UI level changes with other filter types. For all other filter types, icons will be rendered in the column header. + +## Filtering using DateRangePicker + +By default, for the date column in the filter menu, filtering action is performed based on a single date value selected from the `SfDatePicker`. The Syncfusion® Blazor DataGrid also can perform the filtering action between the range of date values by rendering the [SfDateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/getting-started-with-web-app) in the filter menu. This can be achieved by the filter template feature of the Grid. + +In this configuration, the `SfDateRangePicker` is rendered in the filter template of the **OrderDate** column. The [ValueChange](https://blazor.syncfusion.com/documentation/daterangepicker/events#valuechange) event captures the selected start and end dates. The filtering logic is handled in the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) event, where the default filter action is canceled and custom predicates are applied using the selected date range. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Calendars +@using Syncfusion.Blazor.Data +@using Syncfusion.Blazor.Grids + + + + + + + + + + @{ + + + + + } + + + + + + +@code { + + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public List GridData { get; set; } + SfGrid? Grid { get; set; } + + protected override void OnInitialized() + { + GridData = OrderData.GetAllRecords(); + } + + public async Task FilteringHandler(FilteringEventArgs args) + + { + if (args.ColumnName == "OrderDate" && args.FilterPredicates != null) + { + args.Cancel = true; //cancel default filter action. + if (Grid.FilterSettings.Columns == null) + { + Grid.FilterSettings.Columns = new List(); + } + if (Grid.FilterSettings.Columns.Count > 0) + { + Grid.FilterSettings.Columns.RemoveAll(c => c.Field == "OrderDate"); + } + // Get all the Grid columns. + var columns = await Grid.GetColumnsAsync(); + // Fetch the Uid of OrderDate column. + string fUid = columns[2].Uid; + Grid.FilterSettings.Columns.Add(new GridFilterColumn + { + Field = "OrderDate", + Operator = Syncfusion.Blazor.Operator.GreaterThanOrEqual, + Predicate = "and", + Value = StartDate, + Uid = fUid + }); + Grid.FilterSettings.Columns.Add(new GridFilterColumn + { + Field = "OrderDate", + Operator = Syncfusion.Blazor.Operator.LessThanOrEqual, + Predicate = "and", + Value = EndDate.AddDays(1).AddSeconds(-1), + Uid = fUid + }); + Grid.Refresh(); + } + } + public void ValueChangeHandler(RangePickerEventArgs args) + { + StartDate = args.StartDate; + EndDate = args.EndDate; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + public OrderData() { } + + public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight) + { + this.OrderID = OrderID; + this.CustomerID = CustomerID; + this.OrderDate = OrderDate; + this.Freight = Freight; + } + + public static List GetAllRecords() + { + if (Orders.Count() == 0) + { + int OrderID = 10248; + int j = 1; + for (int i = 1; i < 7; i++) + { + Orders.Add(new OrderData(OrderID + 1, "VINET", DateTime.Now.AddDays(-j), 32.38)); + Orders.Add(new OrderData(OrderID + 2, "TOMSP", DateTime.Now.AddDays(-j-1), 11.61)); + Orders.Add(new OrderData(OrderID + 3, "HANAR", DateTime.Now.AddDays(-j - 2), 65.83)); + Orders.Add(new OrderData(OrderID + 4, "VICTE", DateTime.Now.AddDays(-j - 3), 45.78)); + Orders.Add(new OrderData(OrderID + 5, "SUPRD", DateTime.Now.AddDays(-j - 4), 98.6)); + Orders.Add(new OrderData(OrderID + 6, "HANAR", DateTime.Now.AddDays(-j - 5), 103.45)); + Orders.Add(new OrderData(OrderID + 7, "CHOPS", DateTime.Now.AddDays(-j - 6), 103.45)); + Orders.Add(new OrderData(OrderID + 8, "RICSU", DateTime.Now.AddDays(-j - 7), 112.48)); + Orders.Add(new OrderData(OrderID + 9, "WELLI", DateTime.Now.AddDays(-j - 8), 33.45)); + OrderID += 9; + j += 9; + } + } + return Orders; + } + + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJCLClyfCMmKmA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Troubleshoot filter menu operator issue + +When using the filter menu in the Syncfusion® Blazor DataGrid, the UI may display filter operators for all columns based on the data type of the first record it encounters. If the first record contains null or empty values, the filter menu may not function as expected. To resolve this issue, follow these steps: + +**Explicitly define data types:** Specify the data type for each column using the Type property in the column definition. This ensures consistent operator rendering regardless of the initial data. + +```cshtml + + + + + @*Define data types for other columns as needed*@ + + + +``` + +**Handle null or empty values:** Ensure that null or empty values in the data source are handled appropriately, either within the data itself or by applying preprocessing steps to maintain consistency. + **Verify data type alignment:** Confirm that the data types defined in the column configuration match the actual data types in the data source. Mismatches can lead to unexpected filter behavior. \ No newline at end of file diff --git a/blazor/datagrid/filtering.md b/blazor/datagrid/filtering.md index 87671a2bc3..cb6888f323 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 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 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,221 @@ 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 grid 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](https://ej2.syncfusion.com/react/documentation/api/grid/filter#filterbycolumn) 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 { get; set; } + + protected override void OnInitialized() + { + GridData = EmployeeData.GetAllRecords(); + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="EmployeeData.cs" %} + + public List GridData { get; set; } + SfGrid? Grid { get; set; } + + 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 id, string CustomerID, string ShipName) + { + this.EmployeeID = EmployeeID; + this.Name = Name; + this.id = id; + this.CustomerID = CustomerID; + this.ShipName = ShipName; + } + + public static List GetAllRecords() + { + if (Employees.Count() == 0) + { + Employees.Add(new EmployeeData(1, "Aeróbics", "list-01", "VINET", "Vins et alcools Chevalier")); + Employees.Add(new EmployeeData(2, "Aerógrafía en Agua", "list-02", "TOMSP", "Toms SpezialitAiten")); + Employees.Add(new EmployeeData(3, "Aerografía", "list-03", "TAMSP", "Suprames dalices")); + Employees.Add(new EmployeeData(4, "Aeromodelaje", "list-04", "HANAA", "Ottilies Kaseladen")); + Employees.Add(new EmployeeData(5, "Águilas", "list-05", "VICTE", "Centro comercial Moctezuma")); + Employees.Add(new EmployeeData(6, "Álbumes de Delta", "list-06", "HANAR", "Que Delacia")); + Employees.Add(new EmployeeData(7, "Álbumes de Música", "list-07", "SUPRD", "Ernst Handel")); + Employees.Add(new EmployeeData(8, "Alusivos", "list-08", "CHOPS", "Richter Supermarkt")); + Employees.Add(new EmployeeData(9, "Ãerografía", "list-09", "RICSU", "Wellington")); + Employees.Add(new EmployeeData(10, "Análisis de Escritura a Mano", "list-10", "WELLI", "Victuailles")); + } + return Employees; + } + + public int EmployeeID { get; set; } + public string Name { get; set; } + public string id { get; set; } + public string CustomerID { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +## Perform ENUM column filtering + +The 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 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 +830,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 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 +989,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 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 +1148,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 +1248,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 +1529,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 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 +1616,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 +1725,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..1d0ff7b79f 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -9,13 +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. -{% tabs %} +The following example demonstrates enabling toolbar items in the DataGrid: {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @@ -86,11 +84,12 @@ 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 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. +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. + +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" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @@ -304,19 +303,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 %} From ae5678f48b0346cba6a91b8023f81984c59e2dba Mon Sep 17 00:00:00 2001 From: Farveensulthana Date: Wed, 25 Mar 2026 10:47:41 +0530 Subject: [PATCH 2/2] 1015395-Filtering --- blazor/datagrid/tool-bar.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index 1d0ff7b79f..4aef9032a9 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -14,6 +14,8 @@ The toolbar in the Syncfusion® Blazor DataG 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" %} @using Syncfusion.Blazor.Grids @@ -90,6 +92,7 @@ Toolbar items can be enabled or disabled dynamically by using the [EnableToolbar 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" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons