diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md index 4a824f61eb..40790f93d7 100644 --- a/blazor/datagrid/excel-like-filter.md +++ b/blazor/datagrid/excel-like-filter.md @@ -1,17 +1,17 @@ --- layout: post title: Excel Like Filter in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Excel like filter in Syncfusion Blazor DataGrid and much more details. +description: 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. +The Syncfusion® Blazor DataGrid provides an Excel-like filter feature that delivers a familiar and intuitive interface for filtering data. This feature simplifies complex filtering operations on individual columns, enabling efficient data exploration and manipulation similar to Microsoft Excel. Excel-like filtering is particularly effective when working with large datasets and advanced filtering requirements. -Here is an example that showcasing how to render the Excel like filter within the Grid: +The following example demonstrates how to render the Excel-like filter in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -97,9 +97,9 @@ public class OrderData ## Checkbox filtering -The checkbox filtering feature in the Syncfusion® Blazor DataGrid enables you to filter data based on checkbox selections within a column. This powerful filtering option simplifies the process of narrowing down data, providing a more efficient and user-friendly experience. The check box filter feature is particularly useful when dealing with columns containing categorical data. +The checkbox filtering feature in the Syncfusion® Blazor DataGrid enables filtering data based on checkbox selections within a column. This filtering option simplifies the process of narrowing down data and is particularly effective for columns containing categorical values. -Here is an example that showcasing how to render the check box filter within the Grid: +The following example demonstrates how to render the checkbox filter in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -182,13 +182,13 @@ public class OrderData ## Customize the filter choice count -By default, the filter choice count is set to 1000, which means that the filter dialog will display a maximum of 1000 distinct values for each column as a checkbox list data. This default value ensures that the filter operation remains efficient, even with large datasets. Additionally, the filter dialog retrieves and displays distinct data from the first 1000 records bind to the Syncfusion® Blazor DataGrid to optimize performance, while the remaining records are returned as a result of the search option within the filter dialog. +By default, the filter dialog displays a maximum of **1000** distinct values as a checkbox list for each column. This default value ensures efficient filtering performance, especially when working with large datasets. The filter dialog retrieves distinct values from the first **1000** records bound to the Syncfusion® Blazor DataGrid. Additional values are retrieved dynamically through the search option within the dialog. -The Grid allows you to customize the number of distinct data displayed in the checkbox list of the Excel/Checkbox type filter dialog. This can be useful when you want to customize the default filter choice count values while using large datasets. +The number of distinct values shown in the checkbox list of the Excel or checkbox filter dialog can be customized. This configuration is useful when adjusting the default filter choice count to suit specific dataset sizes or performance requirements. -However, you have the flexibility to increase or decrease the filter choice count based on your specific requirements. This can be achieved by adjusting the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) value. +To modify the filter choice count, set the [FilterChoiceCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterDialogOpeningEventArgs.html#Syncfusion_Blazor_Grids_FilterDialogOpeningEventArgs_FilterChoiceCount) property in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. -The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog. In the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event, you can set the `FilterChoiceCount` property to the desired value: +The following example demonstrates how to customize the filter choice count in the checkbox list of the filter dialog: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -300,15 +300,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVfXVjhBrOeigOb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The specified filter choice count value determines the display of unique items as a checkbox list in the Excel/Checkbox type filter dialog. This can result in a delay in rendering these checkbox items when opening the filter dialog. Therefore, it is advisable to set a restricted filter choice count value. +N> +* Setting a high filter choice count can significantly degrade performance when opening the Excel-style or checkbox-type filter dialog. A large number of unique values requires more processing and rendering time, which can lead to noticeable delays in the UI. +To ensure smooth and responsive filtering behavior: + +- Avoid setting excessively high filter choice count values. +- Restrict the count to a reasonable limit to prevent slow rendering and improve user experience. ## Show customized text in checkbox list data -The Syncfusion® Blazor DataGrid provides you with the flexibility to customize the text displayed in the Excel/Checkbox filtering options. This allows you to modify the default text and provide more meaningful and contextual labels for the filtering. +The Syncfusion® Blazor DataGrid provides flexibility to customize the text displayed in the Excel or checkbox filtering options. This feature enables modification of the default text to present more meaningful and context-specific labels in the filter dialog. -To customize the text in the Excel/Checkbox filter, you can define a `FilterItemTemplate` and bind it to the desired column. The `FilterItemTemplate` property allows you to create custom templates for filter items. You can use any logic and HTML elements within this template to display the desired text or content. +To customize the text in the Excel or checkbox filter, define a [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) and bind it to the desired column. The `FilterItemTemplate` property allows creation of custom templates for filter items. Any logic and HTML elements can be used within this template to display the required content. -In the example below, you can see how you can customize the text displayed in the filter checkbox list for the **Delivered** column. This is achieved by defining a `FilterItemTemplate` within the element for that specific column. Inside the template, you can use FilterItemTemplateContext to conditionally display **Delivered** if the data value is true and **Not delivered** if the value is **false**: +The following example demonstrates how to customize the text displayed in the filter checkbox list for the **Delivered** column. The `FilterItemTemplate` is defined within the column element, using [FilterItemTemplateContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterItemTemplateContext.html) to conditionally display **Delivered** when the value is **true** and Not delivered when the value is **false**: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -405,9 +410,9 @@ public class OrderData ## Show template in checkbox list data -The `FilterItemTemplate` property in the Syncfusion® Blazor DataGrid allows you to customize the appearance of filter items in the Grid’s filter checkbox list for a specific column. This property is useful when you want to provide a custom UI or additional information within the filter checkbox list, such as icons, text, or any HTML elements, alongside the default filter items. +The [FilterItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterItemTemplate) property in the Syncfusion® Blazor DataGrid allows customization of the appearance of filter items in the checkbox list for a specific column. This property is useful for displaying custom UI elements or additional information—such as icons, formatted text, or HTML content—alongside the default filter items. -In this example, you can see how to use the `FilterItemTemplate` to render icons along with the category names in the filter checkbox list for the **CategoryName** column: +The following example demonstrates how to use the `FilterItemTemplate` to render icons along with category names in the filter checkbox list for the **CategoryName** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -524,11 +529,11 @@ public class OrderData ## Customize the Excel filter dialog using CSS -In the Syncfusion® Blazor DataGrid, you have the flexibility to enhance the visual presentation of the Excel filter dialog. This can be achieved by utilizing CSS styles to modify the dialog’s appearance according to the specific needs and aesthetics of your application. +The Syncfusion® Blazor DataGrid allows customization of the Excel filter dialog appearance using CSS. This enables alignment with specific application aesthetics and user interface requirements. **1.Removing context menu option** -The Excel filter dialog includes several features such as **context menu**, **search box**, and **checkbox list** that may not be required in some scenarios. You can remove these options using the className attribute in the Grid. +The Excel filter dialog includes features such as the **context menu**, **search box**, and **checkbox list**. In scenarios where the context menu is not required, it can be hidden using the className attribute in the Grid. ```cshtml ``` -The following example demonstrates how to remove the context menu option in the Excel filter dialog using above mentioned CSS: +The following example demonstrates how to remove the context menu option in the Excel filter dialog using the above CSS. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -625,9 +630,9 @@ public class OrderData **2.Customize the height and width of filter popup** -You can customize the height and width of each column’s filter dialog using the CSS style in the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event of the Grid. +The height and width of each column’s filter dialog can be customized using CSS within the [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event. This event is triggered before the filter dialog opens, allowing conditional styling based on column configuration. -Before opening a filter dialog for each column, the `FilterDialogOpening` event will be triggered. At that point, based on the boolean value, we have set the height and width of the **CustomerID** and **OrderDate** columns using the CSS style in the following sample. +The following example demonstrates how to set custom height and width for the **CustomerID** and **OrderDate** columns using CSS styles. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -642,7 +647,7 @@ Before opening a filter dialog for each column, the `FilterDialogOpening` event - + @@ -750,7 +755,7 @@ public class OrderData **3.Customize filter icon for filtered columns** -After filtering the column, the Grid will display the in-built filtered icon with predefined styles by default. The filtered icon can also be customized using .e-grid .e-filtered::before class. +After applying a filter, the DataGrid displays a built-in filtered icon with default styles. This icon can be customized using the **.e-grid .e-filtered::before** CSS class. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -835,13 +840,14 @@ public class OrderData ## Add current selection to filter -By default, the CheckBox/Excel filter can only filter the selected items. If filtering is done multiple times on the same column, the previously filtered values in the column will be cleared. Now, it is possible to retain those previous values by using the "Add current selection to filter" option. This checkbox is displayed when data is searched in the search bar of the CheckBox or Excel filter type. +By default, the CheckBox and Excel filter types apply filtering only to the currently selected items. When filtering is performed multiple times on the same column, previously selected values are cleared. +To retain previously filtered values, enable the Add current selection to filter option. This checkbox appears when data is searched using the search bar in the CheckBox or Excel filter dialog. -The following image describes the above mentioned behavior. +The following image illustrates this behavior: -![Add current selection to filter in Blazor DataGrid.](./images/blazor-datagrid-add-current-selection-to-filter.png) +![Add current selection to filter in Blazor DataGrid.](images/blazor-datagrid-add-current-selection-to-filter.png) {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data. \ No newline at end of file +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/filter-bar.md b/blazor/datagrid/filter-bar.md index 49eb386297..ace961dbda 100644 --- a/blazor/datagrid/filter-bar.md +++ b/blazor/datagrid/filter-bar.md @@ -1,7 +1,7 @@ --- 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 @@ -9,12 +9,13 @@ documentation: ug # Filter bar in Blazor DataGrid -The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing you to enter filter criteria and instantly see the filtered results. +The filter bar feature provides a user-friendly way to filter data in the Syncfusion® Blazor DataGrid. It displays an input field for each column, allowing developers to enter filter criteria and view the filtered results immediately. -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. +By setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**, a filter bar row appears below the column headers. This enables filtering of records using various expressions based on the column type. **Filter bar expressions** -You can enter the following filter expressions (operators) manually in the filter bar. + +The following filter expressions (operators) can be manually entered in the filter bar based on the column type: Expression |Example |Description |Column Type -----|-----|-----|----- @@ -26,10 +27,10 @@ Expression |Example |Description |Column Type <=|<=value|LessThanOrEqual |Number * |*value |StartsWith |String % |%value |EndsWith |String -N/A |N/A | **equal** operator will always be used for date filter. |Date -N/A |N/A |**equal** operator will always be used for Boolean filter. |Boolean +N/A |N/A | Always uses **equal** |Date +N/A |N/A | *Always uses **equal** |Boolean -The following example demonstrates how to activate default filtering in the Grid: +The following example demonstrates how to enable default filtering in the DataGrid:: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -42,7 +43,7 @@ The following example demonstrates how to activate default filtering in the Grid - + @@ -71,18 +72,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 +117,20 @@ 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 supports two distinct operational modes for the filter bar when applying filtering criteria. These modes define how and when the filtering action is triggered:: + +* **OnEnter Mode:** Filtering is triggered only after pressing the **Enter** key. +* **Immediate Mode:** Filtering is applied automatically as values are **typed** into the filter bar. + +Each mode offers a different user experience depending on the desired interaction model. **OnEnter Mode:** -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. +To enable [OnEnter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_OnEnter) mode, set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **OnEnter** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). In this mode, the filter bar captures the entered criteria but does not initiate filtering until the **Enter** key is pressed. This allows multiple criteria to be modified before applying the filter. **Immediate Mode:** -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. +To enable [Immediate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterBarMode.html#Syncfusion_Blazor_Grids_FilterBarMode_Immediate) mode, set the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Mode) property to **Immediate** within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). In this mode, filtering is applied automatically as values are entered or modified in the filter bar, providing real-time filtering results. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -143,7 +149,7 @@ By Setting the filter bar [Mode](https://help.syncfusion.com/cr/blazor/Syncfusio - + @@ -233,9 +239,9 @@ public class OrderData ## Display filter text in pager -The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. Enabling this feature provides you with a clear understanding of the applied filters and the criteria used for filtering. +The Syncfusion® Blazor DataGrid provides an option to display filter text within the pager, indicating the current filtering status. This feature enhances visibility of the applied filters and the criteria used for filtering. -To enable the display of filter text within the pager, you should set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. +To enable this functionality, set the [ShowFilterBarStatus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_ShowFilterBarStatus) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -254,7 +260,7 @@ To enable the display of filter text within the pager, you should set the [ShowF - + @@ -355,9 +361,9 @@ public class OrderData ## Prevent filtering for particular column -In the Syncfusion® Blazor DataGrid, you can prevent filtering for a specific column by utilizing the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object and setting it to **false**. This feature is useful when you want to disable filtering options for a particular column. +The Syncfusion® Blazor DataGrid allows disabling filtering for specific columns by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false**. This configuration is useful when filtering should be restricted for certain columns. -Here’s an example that demonstrates how to remove the filter bar for the **CustomerID** column in Grid: +The following example demonstrates how to remove the filter bar for the **CustomerID** column in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -435,11 +441,11 @@ public class OrderData ## Hide filter bar for template column -By default, the filter bar is set to a disabled mode for template columns in the Syncfusion® Blazor DataGrid. However, in certain cases, you may want to hide the filter bar for a template column to provide a customized filtering experience. +By default, the filter bar is disabled for template columns in the Syncfusion® Blazor DataGrid. In scenarios requiring a customized filtering experience, the filter bar can be hidden for a template column. -To hide the filter bar for a template column, you can use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows you to define a custom template for the filter bar of a column. +To hide the filter bar for a template column, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property allows defining a custom template for the filter bar of the column. -Here’s an example that demonstrates how to hide the filter bar for a template column in the Grid: +The following example demonstrates how to hide the filter bar for a template column in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -521,9 +527,11 @@ public class OrderData ## Filter bar template with custom component -The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid allows you to customize the components displayed in the filter bar. Normally, a text box is the default element rendered in the filter bar cell. This flexibility allows you to use various components, such as [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp), within the filter bar based on your specific requirements. +The [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature in the Syncfusion® Blazor DataGrid enables customization of the components rendered in the filter bar. By default, a text box is displayed in the filter bar cell. This feature allows integration of various components such as the [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started), [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started), [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app), and [MultiSelect Dropdown](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) to suit specific filtering requirements. -To 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 bar component, define a template using the `FilterTemplate` property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). + +The following example demonstrates how to use a custom component in the filter bar: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -552,7 +560,7 @@ To utilize this feature, you can define a custom template for the filter bar by - + @@ -722,4 +730,6 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTtWrFGgPwVFGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md index 0d6d6d5c38..24f6f694b0 100644 --- a/blazor/datagrid/filter-menu.md +++ b/blazor/datagrid/filter-menu.md @@ -9,11 +9,11 @@ documentation: ug # Filter menu in Blazor DataGrid -The filter menu in the Syncfusion® Blazor DataGrid allows you to enable filtering and provides a user-friendly interface for filtering data based on column types and operators. +The Syncfusion® Blazor DataGrid supports a filter menu interface that enables column-specific filtering using various operators. This feature provides enhanced control over how data is displayed and filtered. -To enable the filter menu, you need to set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu**. This property determines the type of filter UI that will be rendered. The filter menu UI allows you to apply filters using different operators. +To enable the filter menu, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**. When the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property is set to **true**, filter icons are rendered in the column headers, enabling interactive filtering with multiple operator options. -Here is an example that demonstrates the usage of the filter menu in the Grid: +The following example demonstrates the usage of the filter menu in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -92,18 +92,20 @@ public class OrderData {% previewsample "https://blazorplayground.syncfusion.com/embed/hZVJXMVKpLxfzxZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) must be set as true to enable filter menu. -> * By setting [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object as **false** will prevent filter menu rendering for a particular column. +> * [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) must be set to true to enable the filter menu. +> * Setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) object to **false** prevents the filter menu from rendering for that specific column. ## Custom component in filter menu -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 Syncfusion® Blazor DataGrid supports customization of the filter menu by replacing default input editors with custom components. This customization is achieved using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). -To customize the filter menu, you can make use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) property. This property allows you to integrate your desired custom filter component into a specific column of the Grid. To implement a custom filter UI, you need to define the following functions: +By default, the filter menu renders the following components based on column 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. +- [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) for string columns +- [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) for numeric columns +- [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) for boolean columns -Here is a sample code demonstrating how to render a `DropDownList` for the **OrderID** column: +The following example demonstrates how to replace the standard search box in the filter menu with a `DropDownList` for the **OrderID** column: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -116,7 +118,7 @@ Here is a sample code demonstrating how to render a `DropDownList` for the **Ord - + @@ -191,17 +193,19 @@ public class OrderData **Default filter input for OrderID column** -![Default filter input OrderID column.](images/Blazor-default-filter-input-datagrid.gif) +![Default filter input for OrderID column](images/Blazor-default-filter-input-datagrid.gif) **Custom dropdown filter for OrderID column** -![Custom dropdown filter for OrderID column.](images/blazor-custom-dropdown-filter-datagrid.gif) +![Custom dropdown filter for OrderID column](images/blazor-custom-dropdown-filter-datagrid.gif) ## Show 24 hours time format in filter dialog -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. By default, the dialog displays time in 12-hour format (AM/PM). -Here is an example that demonstrates how to show 24 hours time format in filter dialog: +To display time in 24-hour format, use the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) and set the `TimeFormat` of the [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started-with-web-app) component to **HH:mm**. + +The following example demonstrates how to show 24-hour time format in the filter dialog: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -214,13 +218,13 @@ Here is an example that demonstrates how to show 24 hours time format in filter - + - + @@ -293,19 +297,15 @@ 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. +The Syncfusion® Blazor DataGrid allows customization of the default filter operator list using the FilterDialogOpening event. This customization is supported for **string**, **number**, **date**, and **boolean** data types. +Available customization options include: -* **DateOperator** - defines customized date operator list. +* **StringOperator** - Defines a custom list of string operators. +* **NumberOperator** - Defines a custom list of number operators. +* **DateOperator** - Defines a custom list of date operators. +* **BooleanOperator** - Defines a custom list of boolean operators. -* **BooleanOperator** - defines customized boolean operator list. - -Here is an example of how to customize the filter operators list in the Grid: +The following example demonstrates how to customize the filter operators list in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -313,12 +313,12 @@ Here is an example of how to customize the filter operators list in the Grid: @using Syncfusion.Blazor.Grids - + - + @@ -441,7 +441,9 @@ public class OrderData ## Customize filter input editor -The Syncfusion® Blazor DataGrid allows you to customize the built-in filter dialog editor components. You can achieve this customization by setting the `FilterEditorSettings` property on [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). In the following example, we have customized the following component configurations: +The Syncfusion® Blazor DataGrid allows customization of the built-in filter dialog editor components using the [FilterEditorSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterEditorSettings) property on the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). + +The following table outlines component configurations customized for specific columns: | Column | Filter Component | Customization | | -------------- | ------------------------------------------------------------------------------- | ----------------------------------------------------- | @@ -557,19 +559,18 @@ public class Orders ## Customize the default input component of filter menu dialog -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 +654,9 @@ public class OrderData ### Prevent autofill option in autocomplete of menu filter -By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is set to automatically fill suggestions as you type. However, there might be scenarios where you want to prevent this autofill behavior to provide a more customized and controlled user experience. +By default, the [AutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started) component in the filter menu dialog is configured to automatically fill suggestions while typing. In scenarios requiring a more controlled user experience, this autofill behavior can be disabled. -You can prevent autofill feature by setting the [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) parameter to **false** using the `FilterTemplate` property of the GridColumn. This property is used to add custom components to a particular column. +To prevent autofill, set the [Autofill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_Autofill) parameter to **false** using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) property of the [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html). This property enables the use of custom components for specific columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -741,7 +742,7 @@ You can prevent autofill feature by setting the [Autofill](https://help.syncfusi ### Hide the filter operator dropdownlist in the filter menu dialog -To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, the following CSS can be used to override the styling of the **.e-flm_optrdiv** class. Using this customization logic, the interface becomes more focused, allowing a default filter behavior to be applied automatically. +To hide the operator dropdown in the menu filter dialog of the Syncfusion® Blazor DataGrid, apply the following CSS to override the styling of the **.e-flm_optrdiv** class. This customization simplifies the interface by applying a default filter behavior without displaying the operator selection. ```css .e-flm_optrdiv { @@ -835,9 +836,11 @@ public class OrderData ## Filter by multiple keywords using filter menu -The Syncfusion® Blazor DataGrid allows you to perform filtering actions based on multiple keywords, rather than a single keyword, using the filter menu dialog. To enable this feature, you can set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) as **Menu** and render the `MultiSelect` as a custom component in the filter menu dialog. +The Syncfusion® Blazor DataGrid supports filtering based on multiple keywords using the filter menu dialog. This feature allows users to select multiple values for a column, enhancing filtering flexibility. -Here is an example that demonstrates how to perform filtering by multiple keywords using the filter menu in the Grid: +To enable this functionality, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type) property of the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) to **Menu**, and integrate the [MultiSelect](https://blazor.syncfusion.com/documentation/multiselect-dropdown/getting-started-webapp) component as a custom UI element within the filter menu dialog. + +The following example demonstrates how to configure multi-keyword filtering using the filter menu in the DataGrid: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1055,9 +1058,9 @@ public class OrderData ## Hide default filter icons while perform filtering through method -When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the user interface. +When performing filtering programmatically using methods in the Syncfusion® Blazor DataGrid, the default filter icons in the column headers can be hidden to simplify the interface. -To customize the filter icon in the Grid, use the display property of the filter menu as mentioned below: +To hide the filter icon in the Grid, apply the CSS style to the filter menu element as shown below: ```cshtml