diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md index 4a824f61eb..6970ac85be 100644 --- a/blazor/datagrid/excel-like-filter.md +++ b/blazor/datagrid/excel-like-filter.md @@ -1,17 +1,23 @@ --- layout: post title: Excel Like Filter in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Excel like filter in Syncfusion Blazor DataGrid and much more details. +description: Implement Excel-like filtering in Syncfusion Blazor DataGrid for efficient data management in Blazor applications. platform: Blazor control: DataGrid documentation: ug --- -# Excel like filter in Blazor DataGrid +# Excel-like Filter in Blazor DataGrid -The Syncfusion® Blazor DataGrid offers an Excel-like filter feature, providing a familiar and user-friendly interface for filtering data within the Grid. This feature simplifies complex filtering operations on specific columns, allowing for quick data location and manipulation, similar to Microsoft Excel. Excel like filtering is especially useful when dealing with large datasets and complex filtering requirements. +## Introduction -Here is an example that showcasing how to render the Excel like filter within the Grid: +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. + +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. + +## Getting Started with Excel-like Filter + +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**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,14 +98,14 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/LtVfZVDQLqvKxcHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * The Excel-like filter feature supports various filter conditions, including text-based, number-based, date-based, and boolean-based filters. -> * The filter dialog provides additional options, such as searching for specific values, and clearing applied filters. +> **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 +## Checkbox Filtering -The checkbox filtering feature in the Syncfusion® Blazor DataGrid enables you to filter data based on checkbox selections within a column. This powerful filtering option simplifies the process of narrowing down data, providing a more efficient and user-friendly experience. The check box filter feature is particularly useful when dealing with columns containing categorical data. - -Here is an example that showcasing how to render the check box filter within the Grid: +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -180,15 +186,15 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTZBNcrfDcFCUo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize the filter choice count +## Customize the Number of Filter Options -By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 records bind to the Syncfusion® Blazor DataGrid to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. +By default, the filter dialog displays 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. -The Grid allows you to customize the number of distinct data displayed in the checkbox list of the Excel/Checkbox type filter dialog. This can be useful when you want to customize the default filter choice count values while using large datasets. +The filter dialog retrieves values from the first **1000** records in the dataset. If additional values exist, they load automatically when searching in the dialog. -However, you have the flexibility to increase or decrease the filter choice count based on your specific requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) value. +### Adjusting the Filter Choice Count -The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event, you can set the `FilterChoiceCount` property to the desired value: +The [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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -300,15 +306,17 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVfXVjhBrOeigOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The specified filter choice count value determines the display of unique items as a checkbox list in the Excel/Checkbox type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value. +> **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. + +## Display Custom Text in Filter Options -## Show customized text in checkbox list data +The DataGrid supports customization of text displayed in filter checkbox lists. Custom, user-friendly labels can replace raw data values. -The Syncfusion® Blazor DataGrid provides you with the flexibility to customize the text displayed in the Excel/Checkbox filtering options. This allows you to modify the default text and provide more meaningful and contextual labels for the filtering. +### Using Custom Filter Item Templates -To customize the text in the Excel/Checkbox filter, you can define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows you to create custom templates for filter items. You can use any logic and HTML elements within this template to display the desired text or content. +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. -In the example below, you can see how you can customize the text displayed in the filter checkbox list for the **Delivered** column. This is achieved by defining a `FilterItemTemplate` within the element for that specific column. Inside the template, you can use FilterItemTemplateContext to conditionally display **Delivered** if the data value is true and **Not delivered** if the value is **false**: +The following example demonstrates how to customize text in a **Delivered** column filter. Instead of displaying **true** or **false**, it displays **Delivered** or **Not delivered**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -403,11 +411,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hXVzDrNsbrIRILzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Show template in checkbox list data - -The `FilterItemTemplate` property in the Syncfusion® Blazor DataGrid allows you to customize the appearance of filter items in the Grid’s filter checkbox list for a specific column. This property is useful when you want to provide a custom UI or additional information within the filter checkbox list, such as icons, text, or any HTML elements, alongside the default filter items. +## Add Icons and Visual Elements to Filter Options -In this example, you can see how to use the `FilterItemTemplate` to render icons along with the category names in the filter checkbox list for the **CategoryName** column: +Filter options can be enhanced with visual elements such as icons positioned alongside filter text. The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property enables inclusion of custom UI elements including icons, styled text, and other HTML content in filter items. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -522,13 +528,13 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJjVtQgjHtuqOK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customize the Excel filter dialog using CSS +## Style the Excel Filter Dialog with CSS -In the Syncfusion® Blazor DataGrid, you have the flexibility to enhance the visual presentation of the Excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog’s appearance according to the specific needs and aesthetics of your application. +The Excel filter dialog appearance can be customized using CSS (Cascading Style Sheets). This enables alignment of the filter dialog with application design and visual requirements. -**1.Removing context menu option** +### Hiding the Context Menu -The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some scenarios. You can remove these options using the className attribute in the Grid. +The Excel filter dialog contains several components, including a **context menu**, **search box**, and **checkbox list**. The context menu can be hidden when not required using CSS. ```cshtml ``` -The following example demonstrates how to remove the context menu option in the Excel filter dialog using above mentioned CSS: - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -623,11 +627,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJZhtsFqnfgvJa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -**2.Customize the height and width of filter popup** - -You can customize the height and width of each column’s filter dialog using the CSS style in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event of the Grid. +### Changing Filter Dialog Size -Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the boolean value, we have set the height and width of the **CustomerID** and **OrderDate** columns using the CSS style in the following sample. +The filter dialog height and width can be customized for each column. CSS combined with the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event enables application of custom sizes based on which column is being filtered. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -642,7 +644,7 @@ Before opening a filter dialog for each column, the `FilterDialogOpening` event - + @@ -748,9 +750,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpZBDBCFDseVPP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -**3.Customize filter icon for filtered columns** +### Styling the filtered column icon -After filtering the column, the Grid will display the in-built filtered icon with predefined styles by default. The filtered icon can also be customized using .e-grid .e-filtered::before class. +When a filter is applied to a column, the DataGrid displays an icon in that column's header. The **.e-grid .e-filtered::before** CSS class enables modification of the icon appearance. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -833,15 +835,17 @@ public class OrderData {% endhighlight %} {% endtabs %} -## Add current selection to filter +## Combining multiple filter selections -By default, the CheckBox/Excel filter can only filter the selected items. If filtering is done multiple times on the same column, the previously filtered values in the column will be cleared. Now, it is possible to retain those previous values by using the "Add current selection to filter" option. This checkbox is displayed when data is searched in the search bar of the CheckBox or Excel filter type. +By default, 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) -The following image describes the above mentioned behavior. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Add current selection to filter in Blazor DataGrid.](./images/blazor-datagrid-add-current-selection-to-filter.png) +## See Also -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +Comprehensive information about the Syncfusion Blazor DataGrid and its features is available through the following resources: -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file +* **Feature Overview:** The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour provides a complete overview of available capabilities. +* **Interactive Examples:** The [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) provide practical demonstrations of data presentation and manipulation. diff --git a/blazor/datagrid/filter-bar.md b/blazor/datagrid/filter-bar.md index 49eb386297..b0a3dd0a1c 100644 --- a/blazor/datagrid/filter-bar.md +++ b/blazor/datagrid/filter-bar.md @@ -1,35 +1,34 @@ --- layout: post title: Filter Bar in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Filter Bar in Syncfusion Blazor DataGrid and much more details. +description: Learn about the Filter Bar feature in Syncfusion Blazor DataGrid, including configuration, usage, and customization options. platform: Blazor control: DataGrid documentation: ug --- -# Filter bar in Blazor DataGrid +# Filter Bar in Blazor DataGrid -The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing you to enter filter criteria and instantly see the filtered results. +The filter bar feature provides an efficient and intuitive way to filter data within the Syncfusion® Blazor DataGrid component. This feature displays input fields below each column header, enabling straightforward data filtering based on column-specific criteria. The filter bar enhances data exploration by allowing users to narrow down large datasets to display only relevant records. -By defining the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) to true, then filter bar row will be rendered next to header which allows you to filter data. You can filter the records with different expressions depending upon the column type. +To enable the filter bar, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** on the grid component. This action adds a filter row beneath the column headers, allowing filtering through various expression operators based on the respective column data type. -**Filter bar expressions** -You can enter the following filter expressions (operators) manually in the filter bar. +**Supported filter expressions** -Expression |Example |Description |Column Type ------|-----|-----|----- -= |=value |StartsWith |Number -!= |!=value |NotEqual |Number -> |>value |GreaterThan |Number -< |= |>=value |GreaterThanOrEqual |Number -<=|<=value|LessThanOrEqual |Number -* |*value |StartsWith |String -% |%value |EndsWith |String -N/A |N/A | **equal** operator will always be used for date filter. |Date -N/A |N/A |**equal** operator will always be used for Boolean filter. |Boolean +The following table outlines the filter expressions (operators) that can be manually entered in the filter bar, organized by column data type: -The following example demonstrates how to activate default filtering in the Grid: +| Operator | Example | Description | Data Type | +|----------|---------|-------------|-----------| +| = | =value | Equal | Number | +| != | !=value | Not Equal | Number | +| > | >value | Greater Than | Number | +| < | = | >=value | Greater Than or Equal | Number | +| <= | <=value | Less Than or Equal | Number | +| * | *value | Starts With | Text | +| % | %value | Ends With | Text | +| N/A | N/A | Always uses equal | Date | +| N/A | N/A | Always uses equal | Boolean | {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -42,7 +41,7 @@ The following example demonstrates how to activate default filtering in the Grid - + @@ -71,18 +70,18 @@ public class OrderData public OrderData() {} public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, string ShipCity, string ShipName) { - this.OrderID = OrderID; + this.OrderID = OrderID; this.CustomerID = CustomerID; this.OrderDate = OrderDate; this.ShipCity = ShipCity; - this.ShipName = ShipName; + this.ShipName = ShipName; } public static List GetAllRecords() { if (Orders.Count() == 0) { - + int OrderID = 10247; for (int i = 1; i < 3; i++) @@ -116,15 +115,18 @@ public class OrderData ## Filter bar modes -The Syncfusion® Blazor DataGrid refers to two different ways in which the Grid’s filter bar can operate when filtering criteria are applied. These modes, **OnEnter Mode** and **Immediate Mode**, offer users different experiences and behaviors when interacting with the filter bar. +The Syncfusion® Blazor DataGrid provides two distinct operational modes for the filter bar. These modes determine how and when filtering is executed: -**OnEnter Mode:** +* **OnEnter Mode**: Filters are applied only after pressing the **Enter** key, allowing multiple changes before execution +* **Immediate Mode**: Filters are applied automatically as values are entered, providing real-time results -By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property as [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), the filter bar captures the filter criteria entered but doesn’t initiate filtering until the **Enter** key is pressed. This allows multiple criteria modifications without triggering immediate filtering actions. +**OnEnter Mode Implementation** -**Immediate Mode:** +The [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) mode executes filtering when the **Enter** key is pressed. Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **OnEnter** within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to enable this mode. This approach enables multiple filter criteria to be adjusted before triggering the filter operation. -By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property as [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings), the filter bar instantly applies filtering as filter criteria are entered. Filtering actions take place as soon as criteria are input or modified, providing real-time previews of filtering results. +**Immediate Mode Implementation** + +The [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) mode applies filters automatically as data is entered. Set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **Immediate** within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to enable this mode. This delivers live filtering results as values are modified in the filter bar. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -143,7 +145,7 @@ By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusio - + @@ -231,11 +233,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBJjCrLfIsxkmhV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Display filter text in pager +### Display filter text in pager -The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides you with a clear understanding of the applied filters and the criteria used for filtering. +The Syncfusion® Blazor DataGrid can display active filter information within the pager section. This visibility enhancement allows clear tracking of currently applied filters and their criteria. -To enable the display of filter text within the pager, you should set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. +Enable this functionality by setting the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property to **true** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -254,7 +256,7 @@ To enable the display of filter text within the pager, you should set the [ShowF - + @@ -353,11 +355,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/BZVfZhtdTBLebNJe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Prevent filtering for particular column - -In the Syncfusion® Blazor DataGrid, you can prevent filtering for a specific column by utilizing the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object and setting it to **false**. This feature is useful when you want to disable filtering options for a particular column. +### Disable filter for specific columns -Here’s an example that demonstrates how to remove the filter bar for the **CustomerID** column in Grid: +The Syncfusion® Blazor DataGrid supports disabling the filter bar for particular columns. Configure the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false** to restrict filtering for that specific column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -433,13 +433,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rtLpZirLweUEtUYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Hide filter bar for template column - -By default, the filter bar is set to a disabled mode for template columns in the Syncfusion® Blazor DataGrid. However, in certain cases, you may want to hide the filter bar for a template column to provide a customized filtering experience. +### Hide filter bar for template column -To hide the filter bar for a template column, you can use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows you to define a custom template for the filter bar of a column. - -Here’s an example that demonstrates how to hide the filter bar for a template column in the Grid: +Template columns in the Syncfusion® Blazor DataGrid do not display filter bars by default. To maintain or further customize the filter behavior for template columns, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property. This property defines a custom template for the filter bar area of the column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -519,11 +515,18 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrTNshUBMYiOnUm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Filter bar template with custom component +### Filter bar template with custom component + +The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property enables customization of components displayed in the filter bar. By default, the filter bar displays a standard text input field. However, specific filtering scenarios may benefit from alternative components. + +The Syncfusion® Blazor DataGrid supports integration of the following specialized components within the filter bar: -The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid allows you to customize the components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows you to use various components, such as [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp), within the filter bar based on your specific requirements. +* [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) - For date-based filtering +* [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) - For numeric value filtering +* [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) - For predefined selection filtering +* [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) - For multi-value filtering -To utilize this feature, you can define a custom template for the filter bar by setting the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) in your Blazor application: +To implement a custom filter component, define a template using the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -552,7 +555,7 @@ To utilize this feature, you can define a custom template for the filter bar by - + @@ -722,4 +725,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 0d6d6d5c38..312902aa99 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -9,11 +9,9 @@ documentation: ug # Filter menu in Blazor DataGrid -The filter menu in the Syncfusion® Blazor DataGrid allows you to enable filtering and provides a user-friendly interface for filtering data based on column types and operators. +The Syncfusion® Blazor DataGrid filter menu provides an intuitive interface for filtering data on a per-column basis. It utilizes a pop-up menu that contains a range of filter operators, offering precise control over the displayed data. -To enable the filter menu, you need to set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu**. This property determines the type of filter UI that will be rendered. The filter menu UI allows you to apply filters using different operators. - -Here is an example that demonstrates the usage of the filter menu in the Grid: +To enable the filter menu, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true** and the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property of the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**. When enabled, a filter icon appears in the column header, allowing for interactive filtering. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,18 +90,19 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVJXMVKpLxfzxZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) must be set as true to enable filter menu. -> * By setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object as **false** will prevent filter menu rendering for a particular column. +> * Setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false** prevents the filter menu from rendering for that specific column. ## Custom component in filter menu -You can enhance the filtering experience in the Syncfusion® Blazor DataGrid by customizing the filter menu with custom components. This allows you to replace the default search box with custom components like dropdowns or textboxes. By default, the filter menu provides an [Autocomplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) for string type columns, a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for number type columns, and a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for boolean type columns, making it easy to search for values. +The filter menu can be customized by replacing its default input component with a custom one. This is achieved by defining a template within the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of a [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -To customize the filter menu, you can make use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property. This property allows you to integrate your desired custom filter component into a specific column of the Grid. To implement a custom filter UI, you need to define the following functions: +The default component rendered in the filter menu is determined by the column's data type: -For example, you can replace the standard search box in the filter menu with a `DropDownList`. This enables you to perform filtering operations by selecting values from the dropdown list, rather than manually typing in search queries. +* **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) -Here is a sample code demonstrating how to render a `DropDownList` for the **OrderID** column: +For example, the following code demonstrates how to replace the default `NumericTextBox` with a `DropDownList` for the numeric **OrderID** column. This customization allows filtering based on a selection from the dropdown list instead of manual input. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -116,7 +115,7 @@ Here is a sample code demonstrating how to render a `DropDownList` for the **Ord - + @@ -191,17 +190,17 @@ public class OrderData **Default filter input for OrderID column** -![Default filter input OrderID column.](images/Blazor-default-filter-input-datagrid.gif) +![Default filter input for OrderID column](images/Blazor-default-filter-input-datagrid.gif) **Custom dropdown filter for OrderID column** -![Custom dropdown filter for OrderID column.](images/blazor-custom-dropdown-filter-datagrid.gif) +![Custom dropdown filter for OrderID column](images/blazor-custom-dropdown-filter-datagrid.gif) ## Show 24 hours time format in filter dialog -The Syncfusion® Blazor DataGrid provides a feature to display the time in a 24-hour format in the date or datetime column filter dialog. By default, the filter dialog displays the time in a 12-hour format (AM/PM) for the date or datetime column. However, you can customize the default format by setting the type as **DateTime** and the format as **MM/dd/yyyy HH:mm**. To enable the 24-hour time format in the filter dialog, you need to handle the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property is used to add custom components to a particular column and set the `TimeFormat` of the `DateTimepicker` to **HH:mm**. +The Syncfusion® Blazor DataGrid supports displaying time in 24-hour format within the filter dialog for date or datetime columns. For `DateTime` columns, the filter dialog's time picker defaults to a **12-hour (AM/PM)** format. This can be customized to a 24-hour format. -Here is an example that demonstrates how to show 24 hours time format in filter dialog: +To implement this, define a [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the desired [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). Inside the template, use a [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started-with-web-app) component and set its `TimeFormat` property to **HH:mm**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -214,13 +213,13 @@ Here is an example that demonstrates how to show 24 hours time format in filter - + - + @@ -293,19 +292,18 @@ public class OrderData ## Customizing filter menu operators list -The Syncfusion® Blazor DataGrid enables you to customize the default filter operator list by utilizing the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event of the Grid. You can customize operators for string, number, date, and boolean data types. - -The available options for customization are: - -* **StringOperator**- defines customized string operator list. - -* **NumberOperator** - defines customized number operator list. - -* **DateOperator** - defines customized date operator list. +The Syncfusion® Blazor DataGrid allows customization of the default filter operator list using the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. This customization is supported for the following data types: +- String +- Number +- Date +- Boolean -* **BooleanOperator** - defines customized boolean operator list. +Provide a custom list by assigning one of the following collections to **args.FilterOperators** based on the column: -Here is an example of how to customize the filter operators list in the Grid: +* **StringOperator** - Defines a custom list of string operators. +* **NumberOperator** - Defines a custom list of number operators. +* **DateOperator** - Defines a custom list of date operators. +* **BooleanOperator** - Defines a custom list of boolean operators. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -313,12 +311,12 @@ Here is an example of how to customize the filter operators list in the Grid: @using Syncfusion.Blazor.Grids - + - + @@ -441,7 +439,9 @@ public class OrderData ## Customize filter input editor -The Syncfusion® Blazor DataGrid allows you to customize the built-in filter dialog editor components. You can achieve this customization by setting the `FilterEditorSettings` property on [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). In the following example, we have customized the following component configurations: +The Syncfusion® Blazor DataGrid allows customization of the built-in filter dialog editor components using the [FilterEditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterEditorSettings) property on the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). + +The following table outlines component configurations customized for specific columns: | Column | Filter Component | Customization | | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------- | @@ -557,19 +557,18 @@ public class Orders ## Customize the default input component of filter menu dialog -You have the flexibility to customize the default settings of input components within the menu filter by utilizing the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property is used to add custom components to a particular column, allowing you to modify the behavior of specific filter components to better suit your needs. +Customize the default input components in the filter menu dialog using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -| Column Type | Default component |Customization | API Reference | +| Column Type | Default component |Customization Example | API Reference | | ----------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| String | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Eg: Autofill="false" | [AutoComplete API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) | -| Number | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | Eg: ShowSpinButton="false" | [NumericTextBox API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) | -| Boolean | [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | Eg: SortOrder="SortOrder.Ascending" | [DropDownList API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) | -| Date | [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | Eg: WeekNumber="true" | [DatePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | -| DateTime | [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | Eg: ShowClearButton="true" | [DateTimePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) | +| String | [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) | Autofill="false" | [AutoComplete API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfAutoComplete-2.html) | +| Number | [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | ShowSpinButton="false" | [NumericTextBox API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) | +| Boolean | [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | SortOrder="SortOrder.Ascending" | [DropDownList API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) | +| Date | [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | WeekNumber="true" | [DatePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | +| DateTime | [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | ShowClearButton="true" | [DateTimePicker API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) | -> To know more about the feature, refer to the Getting Started documentation and API Reference -In the example provided below, the **OrderID** and **Freight** columns are numeric columns. When you open the filter dialog for these columns, you will notice that a `NumericTextBox` with a spin button is displayed to change or set the filter value. However, using the `FilterTemplate` property of the GridColumn. This property is used to add custom components to a particular column, you can hide the spin button specifically for the **OrderID** column: +In the following example, the **OrderID** and **Freight** columns are numeric. By default, the filter dialog displays a [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) with a spin button. Using the `FilterTemplate` property of the `GridColumn`, the spin button can be hidden specifically for the **OrderID** column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -653,9 +652,9 @@ public class OrderData ### Prevent autofill option in autocomplete of menu filter -By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is set to automatically fill suggestions as you type. However, there might be scenarios where you want to prevent this autofill behavior to provide a more customized and controlled user experience. +By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is configured to automatically fill suggestions while typing. In scenarios requiring a more controlled user experience, this autofill behavior can be disabled. -You can prevent autofill feature by setting the [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) parameter to **false** using the `FilterTemplate` property of the GridColumn. This property is used to add custom components to a particular column. +To prevent autofill, set the [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) parameter to **false** using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property enables the use of custom components for specific columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -741,7 +740,7 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi ### Hide the filter operator dropdownlist in the filter menu dialog -To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, the following CSS can be used to override the styling of the **.e-flm_optrdiv** class. Using this customization logic, the interface becomes more focused, allowing a default filter behavior to be applied automatically. +To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, apply the following CSS to override the styling of the **.e-flm_optrdiv** class. This customization simplifies the interface by applying a default filter behavior without displaying the operator selection. ```css .e-flm_optrdiv { @@ -749,8 +748,6 @@ To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid allows you to perform filtering actions based on multiple keywords, rather than a single keyword, using the filter menu dialog. To enable this feature, you can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu** and render the `MultiSelect` as a custom component in the filter menu dialog. +The Syncfusion® Blazor DataGrid supports filtering based on multiple keywords using the filter menu dialog. This feature allows users to select multiple values for a column, enhancing filtering flexibility. -Here is an example that demonstrates how to perform filtering by multiple keywords using the filter menu in the Grid: +To enable this functionality, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property of the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**, and integrate the [MultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) component as a custom UI element within the filter menu dialog. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1055,9 +1052,9 @@ public class OrderData ## Hide default filter icons while perform filtering through method -When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the user interface. +When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the interface. -To customize the filter icon in the Grid, use the display property of the filter menu as mentioned below: +To hide the filter icon in the Grid, apply the CSS style to the filter menu element as shown below: ```cshtml ``` - -The following example demonstrates how to filter the **CustomerID** column programmatically and hide the default filter icons: - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1130,18 +1124,12 @@ The following example demonstrates how to filter the **CustomerID** column progr ## Filter menu events -The Syncfusion® Blazor DataGrid offers the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering), [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered), [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) and [FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpened) events, which provide information about the actions being performed. - -1. **Filtering event**: `Filtering` event is triggered before the filtering or clear filtering action is performed in the Grid. It provides a way to perform any necessary operations before the Filtering action takes place. - -2. **Filtered event**: `Filtered` event is triggered after the filtering or clear filtering action is performed in the Grid. It provides a way to perform any necessary operations after the Filtering action has taken place. - -3. **FilterDialogOpening event**: `FilterDialogOpening` event is triggered before the filter dialog is opened in the Grid. It provides a way to perform any necessary operations before the filter dialog opened. +The Syncfusion® Blazor DataGrid provides the following events to monitor and customize filter menu interactions: -4. **FilterDialogOpened event**: `FilterDialogOpened` event is triggered after the filter dialog is opened in the Grid. It provides a way to perform any necessary operations after the filter dialog opened. - - -Here’s an example of how to use these events to handle filter menu action in the Grid: +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" %} @@ -1300,13 +1288,13 @@ public class OrderData ## Limitations of using different filter types in different columns -The 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. +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` in the filter menu. This can be achieved by the filter template feature of the Grid. +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 the following sample, the `SfDateRangePicker` is rendered in the filter template. Using the `ValueChange` event of the `SfDateRangePicker`, get the start and end date values needed to perform the filtering action. In the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event of the Grid, the default filter action is prevented by setting the `args.Cancel` as true. Then, perform the filtering action by setting the custom predicate values. +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" %} @@ -1449,10 +1437,9 @@ public class OrderData ## Troubleshoot filter menu operator issue -When using the filter menu, the UI displays operators for all columns based on the data type of the first data it encounters. If the first data is empty or null, it may not work correctly. To overcome this issue, follow these steps to troubleshoot and resolve it: - -**Explicitly Define Data Type**: When defining columns in your Grid, make sure to explicitly specify the data type for each column. You can do this using the type property within the columns configuration. For example: +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 @@ -1464,6 +1451,7 @@ When using the filter menu, the UI displays operators for all columns based on t ``` -**Handle Null or Empty Data**: If your data source contains null or empty values, make sure that these values are appropriately handled within your data source or by preprocessing your data to ensure consistency. -**Check Data Types in Data Source**: Ensure that the data types specified in the column definitions match the actual data types in your data source. Mismatched data types can lead to unexpected behavior. +**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 b811dc1b6f..3db84bc6f5 100644 --- a/blazor/datagrid/filtering.md +++ b/blazor/datagrid/filtering.md @@ -9,11 +9,9 @@ documentation: ug # Filtering in Blazor DataGrid -Filtering is a powerful feature in the Syncfusion® Blazor DataGrid that enables you to selectively view data based on specific criteria. It allows you to narrow down large datasets and focus on the information you need, thereby enhancing data analysis and decision-making. +Filtering 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. -To enable filtering in the Grid, you need to set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the Grid to true. Once filtering is enabled, you can configure various filtering options through the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). This property allows you to define the behavior and appearance of the filter. - -Here is an example that demonstrates the default filtering feature of the Grid: +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -89,14 +87,12 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/VNrfZCsImdiJgcDd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * You can apply and clear filtering by using **FilterByColumnAsync** and **ClearFilteringAsync** methods. -> * To disable filtering for a particular column, set [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering) property of **GridColumn** as **false**. +> * Apply and clear filtering using [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_) and [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) methods. +> * To disable filtering for a specific column, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowFiltering) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) as **false**. ## Initial filter -To apply an initial filter, you need to specify the filter criteria using the [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). The `Predicate` object represents the filtering condition and contains properties such as field, operator, and value. - -Here is an example of how to configure the initial filter using the `Predicate` object: +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**. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -154,7 +150,7 @@ public class OrderData int OrderID = 10248; for (int i = 1; i < 3; i++) { - Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevalier")); + Orders.Add(new OrderData(OrderID+1, "VINET", "Reims", "Vins et alcools Chevalier")); Orders.Add(new OrderData(OrderID+2, "TOMSP", "Münster", "Toms Spezialitäten")); Orders.Add(new OrderData(OrderID+3, "HANAR", "Rio de Janeiro", "Hanari Carnes")); Orders.Add(new OrderData(OrderID+4, "VICTE", "Lyon", "Victuailles en stock")); @@ -181,11 +177,9 @@ public class OrderData ### Initial filter with multiple values for same column -In the Syncfusion® Blazor DataGrid, you can establish an initial filter containing multiple values for a particular column, which helps you to preset filter conditions for a specific column using multiple values. This functionality allows you to display a filtered records in the Grid right after the Grid is initially loaded. - -To apply the filter with multiple values for same column at initial rendering, set the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). +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. -The following example demonstrates, how to perform an initial filter with multiple values for same **CustomerID** column using `Columns` property of `GridFilterSettings` and `Predicate`. +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). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -306,11 +300,9 @@ The following example demonstrates, how to perform an initial filter with multip ### Initial filter with multiple values for different columns -In the Syncfusion® Blazor DataGrid, you can establish an initial filter containing multiple values for a different column, which helps you to preset filter conditions for a different column using multiple values. This functionality allows you to display a filtered records in the Grid right after the Grid is initially loaded. +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. -To apply the filter with multiple values for different column at initial rendering, set the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -The following example demonstrates how to perform an initial filter with multiple values for different **Order ID** and **Customer ID** columns using `Columns` property of `GridFilterSettings` and `Predicate`: +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). {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -449,9 +441,9 @@ The following example demonstrates how to perform an initial filter with multipl ## Filter operators -The Syncfusion® Blazor DataGrid provides various filter operators that can be used to define filter conditions for columns. The filter operator for a column can be defined using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`. +The Syncfusion® Blazor DataGrid provides various filter operators 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 available operators and its supported data types are, +The available operators and their supported data types are listed below: Operator |Description |Supported Types -----|-----|----- @@ -473,54 +465,49 @@ 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 [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`. +> 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`. ## WildCard and Like operator filter -**WildCard** and **Like** filter operators filter value based on the given string pattern, and they apply to string-type columns. But it will work slightly differently. +**WildCard** and **Like** filter operators apply to string-type columns and filter values based on specified string patterns. Each operator behaves differently in terms of pattern matching. ### WildCard filtering -The **WildCard** filter can process one or more search patterns using the “*” symbol, retrieving values matching the specified patterns. +The WildCard filter processes one or more search patterns using the * symbol to retrieve values that match the defined criteria. -* The **WildCard** filter option is supported for the Grid that has all search options. +* The **WildCard** filter option is supported in the DataGrid with all search modes enabled. Operator |Description -----|----- -a*b | Everything that starts with “a” and ends with “b”. -a* | Everything that starts with “a”. -*b | Everything that ends with “b”. -a | Everything that has an “a” in it. -ab* | Everything that has an “a” in it, followed by anything, followed by a “b”, followed by anything. - -The following GIF represent a WildCard operator filtering. +a*b | Matches values that start with “a” and end with “b”. +a* | Matches values that start with “a”. +*b | Matches values that end with “b”. +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) +![Blazor DataGrid with WildCard operator filtering](./images/blazor-datagrid-wildcard-operator-filtering.gif) ### Like filtering -The Like filter can process single search patterns using the “%” symbol, retrieving values matching the specified patterns. The following Syncfusion® Blazor DataGrid features support Like filtering on string-type columns: +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: * 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. +* 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 | | ----- | ----- | -| %ab% | Returns all the value that are contains “ab” character. | -| ab% | Returns all the value that are ends with “ab” character. | -| %ab | Returns all the value that are starts with “ab” character. | - -The following GIF represent a Like operator filtering. +| %ab% | Matches values that contain “ab”. | +| 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) +![Blazor DataGrid with like operator filtering](./images/blazor-datagrid-like-operator-filtering.gif) ## Filtering with case sensitivity -The Syncfusion® Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. This feature is useful when you want to control whether filtering operations should consider the case of characters. It can be achieved by using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). - -Below is an example code demonstrating how to enable or disable case sensitivity while filtering: +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -621,11 +608,11 @@ public class OrderData ## Enable different filter for a column -The Syncfusion® Blazor DataGrid offers the flexibility to customize filtering behavior for different columns by enabling various types of filters such as **Menu**, **Excel**, **Checkbox**. This feature allows you to tailor the filtering experience to suit the specific needs of each column in your Grid. For example, you might prefer a menu-based filter for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column. +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. -It can be achieved by adjusting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration based on your requirements. +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. -Here’s an example where the menu filter is enabled by default for all columns, but you can dynamically modify the filter types through a `DropDownList`: +The following example demonstrates 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): {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -645,7 +632,7 @@ Here’s an example where the menu filter is enabled by default for all columns, - + @@ -780,9 +767,7 @@ public class OrderData ## Change default filter operator for particular column -The Syncfusion® Blazor DataGrid provides the flexibility to change the default filter operator for a particular column. By default, the filter operator for string-type columns is **StartsWith**, for numerical-type columns is **Equal**, and for boolean-type columns is also **Equal**. However, you may need to customize the filter operator to better match the nature of the data in a specific column. This can be achieved using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. - -Here’s an example that demonstrates how to change the default filter operator 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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -941,13 +926,11 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTXCAsUitWDKfU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Filter Blazor DataGrid programmatically with single and multiple values using method - -Programmatic filtering in the Syncfusion® Blazor DataGrid with single and multiple values allows you to apply filters to specific columns in the Grid without relying on interactions through the interface. +## Filter via programmatically -This can be achieved by utilizing the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_) method of the Grid. +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. -The following example demostrates, how to programmatically filter the Grid using single and multiple values for the **OrderID** and **CustomerID** columns. This is accomplished by calling the `FilterByColumnAsync` method within an external button click function: +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -956,7 +939,7 @@ The following example demostrates, how to programmatically filter the Grid using @using Syncfusion.Blazor.Buttons Filter with single value - Filter with multiple values +Filter with multiple values @@ -1043,15 +1026,13 @@ public class OrderData ## How to get filtered records -Retrieving filtered records in the Syncfusion® Blazor DataGrid is essential when you want to work with data that matches the currently applied filters. You can achieve this using available methods and properties in the Grid. +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. -**1.Using the GetFilteredRecordsAsync() method** +**Fetch filtered Records with GetFilteredRecordsAsync** -The [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync) method is used to obtain an array of records that match the currently applied filters on the Grid. +**Local Data** -This method retrieves an array of records that match the currently applied filters on the Grid. - -Here’s an example of how to get the filtering data in a Grid using the `GetFilteredRecordsAsync` method: +The [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync_System_Boolean_) method returns a collection of records that match the currently applied filters. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1203,9 +1184,9 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hjhpZCiFKFFRoZzt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -**2.Using the GetFilteredRecordsAsync() method for remote data** +**Remote Data** -Use the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync) method to retrieve the details of the filtered records from the Grid. The `GetFilteredRecordsAsync` method returns the filtered records in the form of objects when using a remote data source. So, you need to deserialize the object to retrieve the filtered records. +When using a remote data source, the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync_System_Boolean_) method returns the filtered records as objects. These objects must be deserialized to access the filtered data. ```cshtml @using Syncfusion.Blazor.Data @@ -1307,31 +1288,26 @@ Use the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLTXiUChxbmPDxX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}. - -**3.Using the properties in the FilteredEventArgs object** - -Alternatively, you can use the properties available in the FilteredEventArgs object to obtain the filter record details. +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLTXiUChxbmPDxX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -* [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilteredEventArgs.html#Syncfusion_Blazor_Grids_FilteredEventArgs_ColumnName): This property returns the column name that is currently filtered. +**Accessing filter details via FilteredEventArgs Properties** -* [FilterPredicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilteredEventArgs.html#Syncfusion_Blazor_Grids_FilteredEventArgs_FilterPredicates): This property returns the object containing filter predicate model details that is currently filtered. +Filtered record details can also be accessed through the [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) event handler using the following properties: -To access these properties, you can use the [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) event handler as shown below: +* [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilteredEventArgs.html#Syncfusion_Blazor_Grids_FilteredEventArgs_ColumnName): Returns the name of the column currently filtered. +* [FilterPredicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilteredEventArgs.html#Syncfusion_Blazor_Grids_FilteredEventArgs_FilterPredicates): Returns the object containing filter predicate model details. ```cshtml - public async Task FilteredHandler(FilteredEventArgs args) - { - var columnname = args.ColumnName; - var FilterPredicates = args.FilterPredicates; - } +public async Task FilteredHandler(FilteredEventArgs args) +{ + var columnname = args.ColumnName; + var FilterPredicates = args.FilterPredicates; +} ``` -## Clear filtering using methods - -The Syncfusion® Blazor DataGrid provides a method called [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) to clear the filtering applied to the Grid. This method is used to remove the filter conditions and reset the Grid to its original state. +## Clear filter via programmatically -Here’s an example of how to clear the filtering in a Grid using the `ClearFilteringAsync` method: +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1418,11 +1394,9 @@ public class OrderData ## Filtering events -Filtering events allow you to customize the behavior of the Syncfusion® Blazor DataGrid when filtering is applied. You can prevent filtering for specific columns, show messages to users, or perform other actions to suit your application’s needs. +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. -To implement filtering events in the Syncfusion® Blazor DataGrid, you can utilize the available events such as [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered). These events allow you to intervene in the filtering process and customize it as needed. - -In the given example, the filtering is prevented for ShipCity column during `Filtering` event: +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. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1533,9 +1507,9 @@ public class OrderData ## Filter enum column -Filter the enum type data in the Syncfusion® Blazor DataGrid column using the Filter Template feature of the Grid. +Enum-type data can be filtered in the Syncfusion® Blazor DataGrid using the Filter Template feature. -In the following sample, the `SfDropDownList` is rendered in the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) for the Type column. The enumerated list data can be bound to the Type column. In the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`, dynamically filter the Type column using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_) method of the Grid. +In the 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" %} @@ -1651,5 +1625,4 @@ public enum FileType : short {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}. - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file