Grid;
+ protected override void OnInitialized()
+ {
+ var customerIds = new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID", "ECHO", "CHARLIE", "DELTA", "FOXTROT", "GOLF", "HOTEL", "INDIA", "JULIET" };
+ Orders = Enumerable.Range(1, 12).Select(x => new Order()
+ {
+ OrderID = 1000 + x,
+ CustomerID = customerIds[x % customerIds.Length],
+ Freight = 2.1 * x,
+ OrderDate = DateTime.Now.AddDays(-x),
+ }).ToList();
+ }
+
+ public class Order
+ {
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public double? Freight { get; set; }
+ }
+ public async Task filterAction()
+ {
+ await Grid.FilterByColumnAsync("CustomerID", "equal", "ECHO");
+ }
+ public async Task clearFilter()
+ {
+ await Grid.ClearFilteringAsync();
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXMrazUJxtJCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Filter menu events
+
+The Syncfusion® Blazor DataGrid provides the following events to monitor and customize filter menu interactions:
+
+1. [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering): Triggered before a filtering or clear filtering action is executed. This event allows pre-processing logic.
+2. [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered): Triggered after the filtering action is completed. Useful for post-processing tasks.
+3. [FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening): Occurs before the filter dialog opens, enabling pre-opening customization.
+4. [FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpened): Occurs after the filter dialog has opened, allowing post-opening adjustments.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+@if(Show == true)
+{
+
+ @BeginMessage
+
+
+ @CompleteMessage
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+@if(flag == true){
+
+
+}
+
+@code {
+
+ public List GridData { get; set; }
+
+ SfGrid Grid;
+
+ public bool flag = false;
+ public bool Show = false;
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ public string BeginMessage;
+
+ public string CompleteMessage;
+
+ public async Task FilteringHandler(FilteringEventArgs args)
+
+ {
+ if (args.ColumnName == "ShipCity")
+ {
+ args.Cancel = true;
+ BeginMessage = "Filtering is not allowed for ShipCity column";
+ }
+ else
+ {
+ BeginMessage = "The Filtering event is triggered for the " + args.ColumnName + " column";
+ }
+ }
+ public async Task FilteredHandler(FilteredEventArgs args)
+ {
+ CompleteMessage = "Filtering action completed for " + args.ColumnName + " column";
+ }
+ public async Task FilterDialogOpeningHandler(FilterDialogOpeningEventArgs args)
+ {
+ Show = true;
+ if (args.ColumnName == "OrderID" || args.ColumnName == "Freight")
+ {
+ args.FilterOperators = new List
+ {
+ new Operators() { Text = "Equal", Value = "equal" },
+ new Operators() { Text = "Not Equal", Value = "notequal" }
+ };
+ BeginMessage = "Filter operators for number column were customized in the FilterDialogOpening event";
+ }
+ else
+ {
+ BeginMessage = "The FilterDialogOpening event is triggered for the "+ args.ColumnName+ " column";
+ }
+ }
+ public async Task FilterDialogOpeneHandler(FilterDialogOpenedEventArgs args)
+ {
+ flag = true;
+ CompleteMessage = "Applied CSS for filter dialog during FilterDialogOpened event";
+ }
+ public class Operators : Syncfusion.Blazor.Grids.IFilterOperator
+ {
+ public string Value { get; set; }
+ public string Text { get; set; }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+ public OrderData(){}
+
+ public OrderData(int? OrderID, string CustomerID, double? Freight, string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.Freight = Freight;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int OrderID = 10247;
+ for (int i = 1; i < 2; i++)
+ {
+ Orders.Add(new OrderData(OrderID + 1, "VINET", 32.38, "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(OrderID + 2, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(OrderID + 3, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(OrderID + 4, "VICTE", 45.78, "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(OrderID + 5, "SUPRD", 98.6, "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(OrderID + 6, "HANAR", 103.45, "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(OrderID + 7, "CHOPS", 103.45, "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(OrderID + 8, "RICSU", 112.48, "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(OrderID + 9, "WELLI", 33.45, "Reims", "Wellington Import"));
+ OrderID += 9;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double? Freight { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCity { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrTZWVuFpHxbSMS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Limitations of using different filter types in different columns
+
+Different filter types such as Excel, Menu, and Checkbox can be defined in different columns of the same Syncfusion® Blazor DataGrid. However, you cannot use these filter types along with filterBar type (default filter type). Because the filterbar type requires UI level changes with other filter types. For all other filter types, icons will be rendered in the column header.
+
+## Filtering using DateRangePicker
+
+By default, for the date column in the filter menu, filtering action is performed based on a single date value selected from the `SfDatePicker`. The Syncfusion® Blazor DataGrid also can perform the filtering action between the range of date values by rendering the [SfDateRangePicker](https://blazor.syncfusion.com/documentation/daterangepicker/getting-started-with-web-app) in the filter menu. This can be achieved by the filter template feature of the Grid.
+
+In this configuration, the `SfDateRangePicker` is rendered in the filter template of the **OrderDate** column. The [ValueChange](https://blazor.syncfusion.com/documentation/daterangepicker/events#valuechange) event captures the selected start and end dates. The filtering logic is handled in the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) event, where the default filter action is canceled and custom predicates are applied using the selected date range.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Calendars
+@using Syncfusion.Blazor.Data
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+ @{
+
+
+
+
+ }
+
+
+
+
+
+
+@code {
+
+ public DateTime StartDate { get; set; }
+ public DateTime EndDate { get; set; }
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ public async Task FilteringHandler(FilteringEventArgs args)
+
+ {
+ if (args.ColumnName == "OrderDate" && args.FilterPredicates != null)
+ {
+ args.Cancel = true; //cancel default filter action.
+ if (Grid.FilterSettings.Columns == null)
+ {
+ Grid.FilterSettings.Columns = new List();
+ }
+ if (Grid.FilterSettings.Columns.Count > 0)
+ {
+ Grid.FilterSettings.Columns.RemoveAll(c => c.Field == "OrderDate");
+ }
+ // Get all the Grid columns.
+ var columns = await Grid.GetColumnsAsync();
+ // Fetch the Uid of OrderDate column.
+ string fUid = columns[2].Uid;
+ Grid.FilterSettings.Columns.Add(new GridFilterColumn
+ {
+ Field = "OrderDate",
+ Operator = Syncfusion.Blazor.Operator.GreaterThanOrEqual,
+ Predicate = "and",
+ Value = StartDate,
+ Uid = fUid
+ });
+ Grid.FilterSettings.Columns.Add(new GridFilterColumn
+ {
+ Field = "OrderDate",
+ Operator = Syncfusion.Blazor.Operator.LessThanOrEqual,
+ Predicate = "and",
+ Value = EndDate.AddDays(1).AddSeconds(-1),
+ Uid = fUid
+ });
+ Grid.Refresh();
+ }
+ }
+ public void ValueChangeHandler(RangePickerEventArgs args)
+ {
+ StartDate = args.StartDate;
+ EndDate = args.EndDate;
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+ public OrderData() { }
+
+ public OrderData(int? OrderID, string CustomerID, DateTime? OrderDate, double? Freight)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.OrderDate = OrderDate;
+ this.Freight = Freight;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int OrderID = 10248;
+ int j = 1;
+ for (int i = 1; i < 7; i++)
+ {
+ Orders.Add(new OrderData(OrderID + 1, "VINET", DateTime.Now.AddDays(-j), 32.38));
+ Orders.Add(new OrderData(OrderID + 2, "TOMSP", DateTime.Now.AddDays(-j-1), 11.61));
+ Orders.Add(new OrderData(OrderID + 3, "HANAR", DateTime.Now.AddDays(-j - 2), 65.83));
+ Orders.Add(new OrderData(OrderID + 4, "VICTE", DateTime.Now.AddDays(-j - 3), 45.78));
+ Orders.Add(new OrderData(OrderID + 5, "SUPRD", DateTime.Now.AddDays(-j - 4), 98.6));
+ Orders.Add(new OrderData(OrderID + 6, "HANAR", DateTime.Now.AddDays(-j - 5), 103.45));
+ Orders.Add(new OrderData(OrderID + 7, "CHOPS", DateTime.Now.AddDays(-j - 6), 103.45));
+ Orders.Add(new OrderData(OrderID + 8, "RICSU", DateTime.Now.AddDays(-j - 7), 112.48));
+ Orders.Add(new OrderData(OrderID + 9, "WELLI", DateTime.Now.AddDays(-j - 8), 33.45));
+ OrderID += 9;
+ j += 9;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public double? Freight { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJCLClyfCMmKmA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Troubleshoot filter menu operator issue
+
+When using the filter menu in the Syncfusion® Blazor DataGrid, the UI may display filter operators for all columns based on the data type of the first record it encounters. If the first record contains null or empty values, the filter menu may not function as expected. To resolve this issue, follow these steps:
+
+**Explicitly define data types:** Specify the data type for each column using the Type property in the column definition. This ensures consistent operator rendering regardless of the initial data.
+
+```cshtml
+
+
+
+
+ @*Define data types for other columns as needed*@
+
+
+
+```
+
+**Handle null or empty values:** Ensure that null or empty values in the data source are handled appropriately, either within the data itself or by applying preprocessing steps to maintain consistency.
+
**Verify data type alignment:** Confirm that the data types defined in the column configuration match the actual data types in the data source. Mismatches can lead to unexpected filter behavior.
\ No newline at end of file
diff --git a/blazor/datagrid/filtering.md b/blazor/datagrid/filtering.md
index 87671a2bc3..cb6888f323 100644
--- a/blazor/datagrid/filtering.md
+++ b/blazor/datagrid/filtering.md
@@ -9,9 +9,11 @@ documentation: ug
# Filtering in Blazor DataGrid
-Filtering is a key feature in the Syncfusion® Blazor DataGrid that enables selective data viewing based on defined criteria. It helps narrow down large datasets and focus on relevant information, improving data analysis and decision-making.
+Filtering is a powerful feature in the Syncfusion® Blazor DataGrid that enables selective viewing of data based on specific criteria. It allows narrowing down large datasets to focus on relevant information, thereby enhancing data analysis and decision-making.
-To enable filtering in the Grid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. Once enabled, configure filtering behavior and appearance using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) property.
+## Enable filtering
+
+To enable filtering in the DataGrid, set the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property to **true**. Once enabled, configure filtering behavior and appearance using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) property.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -92,7 +94,13 @@ public class OrderData
## Initial filter
-To apply an initial filter in the Syncfusion® Blazor DataGrid, define the filter criteria using the **Predicate** object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings). The **Predicate** object represents the filtering condition and includes properties such as **Field**, **Operator**, and **Value**.
+Apply filters automatically when the DataGrid loads by specifying filter criteria using a predicate object. A predicate object defines the filter condition with three key properties:
+
+* `field`: The column name to filter.
+* `operator`: The comparison type (equal, startswith, greaterthan, etc.).
+* `value`: The filter criterion to match.
+
+Configure initial filters in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -177,9 +185,11 @@ public class OrderData
### Initial filter with multiple values for same column
-In the Syncfusion® Blazor DataGrid, an initial filter can be configured to include multiple values for a specific column. This approach enables predefined filtering conditions to be applied immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads.
+Initial filtering with multiple values allows to preset filter conditions for a specific column using multiple criteria. This displays only records matching any of the specified values when the DataGrid first renders.
-To apply an initial filter with multiple values for the same column, define the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
+Set multiple [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) objects in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) for the same field.
+
+The following example filters the **"Customer ID"** column to show only specific customer records.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -300,9 +310,11 @@ To apply an initial filter with multiple values for the same column, define the
### Initial filter with multiple values for different columns
-In the Syncfusion® Blazor DataGrid, an initial filter can be configured to include multiple values across different columns. This approach enables predefined filtering conditions to be applied to multiple columns immediately upon Grid initialization, allowing filtered records to be displayed as soon as the Grid loads.
+Initial filter configuration with multiple values across different columns sets predefined filter criteria for each column. This configuration displays filtered records immediately when the DataGrid loads.
+
+To apply an initial filter with multiple values for different columns, define the filter `Predicate` object within the `Columns`(https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`.
-To apply an initial filter with multiple values for different columns, define the filter [Predicate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Predicate) object within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
+The following example filters both **"Order ID"** and **"Customer ID"** columns simultaneously.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -441,9 +453,9 @@ To apply an initial filter with multiple values for different columns, define th
## Filter operators
-The Syncfusion® Blazor DataGrid provides various filter operators that can be used to define filter conditions for columns. The filter operator for a column can be specified using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) property within the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) collection of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
+The DataGrid provides various filter operators to define filter conditions for columns. Define the filter operator using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterColumn.html#Syncfusion_Blazor_Grids_GridFilterColumn_Operator) property in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) collection of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
-The available operators and their supported data types are listed below:
+The available operators and their supported data types are:
Operator |Description |Supported Types
-----|-----|-----
@@ -465,17 +477,17 @@ IsEmpty |Returns the values that are empty. |String
IsNotEmpty |Returns the values that are not empty. |String
Between |Filter the values based on the range between the start and end specified values. |Number | Date
-> By default, the **Operator** value is **Equal** in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Columns) property of `GridFilterSettings`.
+> By default, DataGrid uses different filter operators for different column types. The default filter operator for string columns is **"StartsWith**", for numeric columns is **Equal**, and for boolean columns is **Equal**.
## WildCard and Like operator filter
-**WildCard** and **Like** filter operators apply to string-type columns and filter values based on specified string patterns. Each operator behaves differently in terms of pattern matching.
+"Wildcard" and "like" operators filter values based on string patterns and apply to string-type columns. They work slightly differently in pattern matching.
### WildCard filtering
-The WildCard filter processes one or more search patterns using the * symbol to retrieve values that match the defined criteria.
+The "Wildcard" filter processes one or more search patterns using the "*" symbol, retrieving values matching the specified patterns. Wildcard characters match any sequence of characters in a search pattern.
-* The **WildCard** filter option is supported in the DataGrid with all search modes enabled.
+**For example:**
Operator |Description
-----|-----
@@ -485,17 +497,17 @@ a* | Matches values that start with “a”.
a | Matches values that contain “a”.
ab* | Matches values that contain “a”, followed by any characters, then “b”, followed by any characters.
-
+
### Like filtering
-The **Like** filter processes single search patterns using the % symbol to retrieve values that match the defined criteria. The following Syncfusion® Blazor DataGrid features support Like filtering on string-type columns:
+The "Like" filter processes search patterns using the "%" symbol, retrieving values matching the specified patterns. The following DataGrid features support like filtering on string-type columns:
* Filter Menu
* Filter Bar using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration
* Custom Filter of Excel filter type
-**Example patterns:**
+**For example:**
| Operator | Description |
| ----- | ----- |
@@ -503,11 +515,221 @@ The **Like** filter processes single search patterns using the % symbol t
| ab% | Matches values that end with “ab”. |
| %ab | Matches values that start with “ab”. |
-
+
+
+## Diacritics filter
+
+The diacritics filter feature handles text data that includes accented characters. Diacritics are accent marks added to letters (examples: é, ñ, ü, ç). By default, the grid ignores these characters during filtering.
+
+This feature is essential for international data where names like "José" and "Jose" should be treated differently (or the same, depending on requirements).
+
+Enable diacritic character consideration by setting [FilterSettings.IgnoreAccent](https://ej2.syncfusion.com/react/documentation/api/grid/filter#filterbycolumn) to `true`.
+
+The following example includes diacritic characters in the filtering process:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GridData = EmployeeData.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="EmployeeData.cs" %}
+
+ public List GridData { get; set; }
+ SfGrid? Grid { get; set; }
+
+ protected override void OnInitialized()
+ {
+ GridData = EmployeeData.GetAllRecords();
+ }
+
+ public class EmployeeData
+ {
+ public static List Employees = new List();
+ public EmployeeData(){}
+ public EmployeeData(int EmployeeID, string Name, string id, string CustomerID, string ShipName)
+ {
+ this.EmployeeID = EmployeeID;
+ this.Name = Name;
+ this.id = id;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Employees.Count() == 0)
+ {
+ Employees.Add(new EmployeeData(1, "Aeróbics", "list-01", "VINET", "Vins et alcools Chevalier"));
+ Employees.Add(new EmployeeData(2, "Aerógrafía en Agua", "list-02", "TOMSP", "Toms SpezialitAiten"));
+ Employees.Add(new EmployeeData(3, "AerografÃa", "list-03", "TAMSP", "Suprames dalices"));
+ Employees.Add(new EmployeeData(4, "Aeromodelaje", "list-04", "HANAA", "Ottilies Kaseladen"));
+ Employees.Add(new EmployeeData(5, "Águilas", "list-05", "VICTE", "Centro comercial Moctezuma"));
+ Employees.Add(new EmployeeData(6, "Álbumes de Delta", "list-06", "HANAR", "Que Delacia"));
+ Employees.Add(new EmployeeData(7, "Ãlbumes de Música", "list-07", "SUPRD", "Ernst Handel"));
+ Employees.Add(new EmployeeData(8, "Alusivos", "list-08", "CHOPS", "Richter Supermarkt"));
+ Employees.Add(new EmployeeData(9, "Ãerografía", "list-09", "RICSU", "Wellington"));
+ Employees.Add(new EmployeeData(10, "Análisis de Escritura a Mano", "list-10", "WELLI", "Victuailles"));
+ }
+ return Employees;
+ }
+
+ public int EmployeeID { get; set; }
+ public string Name { get; set; }
+ public string id { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Perform ENUM column filtering
+
+The DataGrid allows filtering enum-type data using the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) feature. Enumerated values (enum) are predefined fixed options, such as status categories (Active, Inactive, Pending) or priority levels (High, Medium, Low). This is particularly useful for filtering columns with dropdown-based data.
+
+In the following example, the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component is rendered within the `FilterTemplate` of the **Type** column. The enumerated list is bound to the column, and filtering is applied dynamically using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`. Within this event, the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) method is used to apply filtering to the **Type** column.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid Grid;
+ public List GridData { get; set; }
+ List FilterDropData = new List
+ {
+ new Data() { Type= "All" },
+ new Data() { Type= "Base" },
+ new Data() { Type= "Replace" },
+ new Data() { Type= "Delta" }
+ };
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ public async Task Change(ChangeEventArgs args)
+ {
+ if (args.Value == "All")
+ {
+ await this.Grid.ClearFilteringAsync();
+ }
+ else
+ {
+ await this.Grid.FilterByColumnAsync("Type", "contains", args.Value);
+ }
+ }
+
+ public class Data
+ {
+ public string Type { get; set; }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+ public OrderData(){}
+
+ public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName, FileType type)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ this.Type = type;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count() == 0)
+ {
+ int OrderID = 10248;
+ for (int i = 1; i < 3; i++)
+ {
+ Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevalier", FileType.Base));
+ Orders.Add(new OrderData(OrderID + 2, "TOMSP", "Münster", "Toms Spezialitäten", FileType.Replace));
+ Orders.Add(new OrderData(OrderID + 3, "HANAR", "Rio de Janeiro", "Hanari Carnes", FileType.Delta));
+ Orders.Add(new OrderData(OrderID + 4, "VICTE", "Lyon", "Victuailles en stock", FileType.Base));
+ Orders.Add(new OrderData(OrderID + 5, "SUPRD", "Charleroi", "Suprêmes délices", FileType.Replace));
+ Orders.Add(new OrderData(OrderID + 6, "HANAR", "Lyon", "Hanari Carnes", FileType.Delta));
+ Orders.Add(new OrderData(OrderID + 7, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese", FileType.Base));
+ Orders.Add(new OrderData(OrderID + 8, "RICSU", "Münster", "Richter Supermarkt", FileType.Replace));
+ Orders.Add(new OrderData(OrderID + 9, "WELLI", "Reims", "Wellington Import", FileType.Delta));
+
+ OrderID += 9;
+ }
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public FileType Type { get; set; }
+}
+
+public enum FileType : short
+{
+ Base = 1,
+ Replace = 2,
+ Delta = 3
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Filtering with case sensitivity
-The Syncfusion® Blazor DataGrid provides the flexibility to enable or disable case sensitivity during filtering. This feature allows control over whether filtering operations should consider character casing. Case sensitivity can be configured using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property of [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings)configuration.
+The DataGrid provides the flexibility to enable or disable case sensitivity during filtering. Control whether filtering operations consider the case of characters using the [EnableCaseSensitivity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_EnableCaseSensitivity) property within [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -608,11 +830,11 @@ public class OrderData
## Enable different filter for a column
-The Syncfusion® Blazor DataGrid provides flexibility to customize filtering behavior for individual columns by enabling various filter types such as **Menu**, **Excel**, and **Checkbox**. This feature allows tailoring the filtering experience to meet the specific requirements of each column. For example, a menu-based filter may be suitable for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column.
+The DataGrid offers flexibility to customize filtering behavior for different columns by enabling various filter types such as `Menu`, `Excel`, or `CheckBox`. This allows tailoring the filtering experience to suit specific column needs. For example, use a menu-based filter for a category column, an Excel-like filter for a date column, and a checkbox filter for a status column.
-This customization can be achieved by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration.
+Adjust the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Type) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) based on requirements.
-The following example demonstrates how the menu filter is enabled by default for all columns, and how filter types can be dynamically modified using a [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started):
+Here's an example where the menu filter is enabled by default, but filter types can be dynamically modified through a `SfDropDownList`.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -767,7 +989,7 @@ public class OrderData
## Change default filter operator for particular column
-The Syncfusion® Blazor DataGrid provides flexibility to modify the default filter operator for individual columns. By default, the filter operator is set to **StartsWith** for string-type columns, and **Equal** for numerical and boolean-type columns. In scenarios where a different operator better suits the nature of the data, the default can be customized using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) configuration.
+The DataGrid provides flexibility to change the default filter operator for a particular column. By default, the filter operator for string columns is `StartsWith`, for numeric columns is `Equal`, and for boolean columns is `Equal`. Customize the filter operator to better match the nature of the data using the [Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FilterSettings.html#Syncfusion_Blazor_Grids_FilterSettings_Operator) property within the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -926,11 +1148,11 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTXCAsUitWDKfU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Filter via programmatically
+## Programmatic filtering
-Programmatic filtering in the Syncfusion® Blazor DataGrid enables applying filters to specific columns without relying on UI interactions. This approach supports both single and multiple filter values.
+Programmatic filtering allows applying filters to specific columns without relying on user interface interactions. This is achieved using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) method.
-Filtering can be performed using the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) method of the Grid.
+The following example demonstrates programmatic filtering using single and multiple values for the "Order ID" and "Customer ID" columns. The `FilterByColumnAsync` method is called within an external button click function.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1026,7 +1248,7 @@ public class OrderData
## How to get filtered records
-Retrieving filtered records in the Syncfusion® Blazor DataGrid is essential when working with data that matches the currently applied filters. This can be accomplished using available methods and event properties in the Grid.
+Retrieving filtered records is essential when working with data matching currently applied filters. Achieve this using available methods and properties in the DataGrid.
**Fetch filtered Records with GetFilteredRecordsAsync**
@@ -1307,7 +1529,7 @@ public async Task FilteredHandler(FilteredEventArgs args)
## Clear filter via programmatically
-The Syncfusion® Blazor DataGrid provides the [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to remove applied filters and reset the Grid to its original state.
+The DataGrid provides a [ClearFilteringAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearFilteringAsync) method to clear applied filtering. This method removes filter conditions and resets the DataGrid to its original state.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1394,9 +1616,9 @@ public class OrderData
## Filtering events
-Filtering events provide customization options for the Syncfusion® Blazor DataGrid when filtering is applied. These events can be used to prevent filtering for specific columns, display messages, or perform other actions based on application requirements.
+Filtering events allow customizing the behavior of the DataGrid when filtering is applied. Prevent filtering for specific columns, show messages, or perform other actions to suit application needs.
-To implement filtering events, use the available [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) events. These events allow intervention in the filtering process and support customization.
+Implement filtering events using the available [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) and [Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) events. These events allow intervention in the filtering process and customization as needed.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1503,126 +1725,4 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVJDMMmLnklDAQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Filter enum column
-
-Enum-type data can be filtered in the Syncfusion® Blazor DataGrid using the Filter Template feature.
-
-In the following example, the [SfDropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) component is rendered within the [FilterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_FilterTemplate) of the **Type** column. The enumerated list is bound to the column, and filtering is applied dynamically using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event of the `SfDropDownList`. Within this event, the [FilterByColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterByColumnAsync_System_String_System_String_System_Object_System_String_System_Nullable_System_Boolean__System_Nullable_System_Boolean__System_Object_System_Object_System_String_) method is used to apply filtering to the **Type** column.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.DropDowns
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
- public SfGrid Grid;
- public List GridData { get; set; }
- List FilterDropData = new List
- {
- new Data() { Type= "All" },
- new Data() { Type= "Base" },
- new Data() { Type= "Replace" },
- new Data() { Type= "Delta" }
- };
-
- protected override void OnInitialized()
- {
- GridData = OrderData.GetAllRecords();
- }
-
- public async Task Change(ChangeEventArgs args)
- {
- if (args.Value == "All")
- {
- await this.Grid.ClearFilteringAsync();
- }
- else
- {
- await this.Grid.FilterByColumnAsync("Type", "contains", args.Value);
- }
- }
-
- public class Data
- {
- public string Type { get; set; }
- }
-}
-
-{% endhighlight %}
-
-{% highlight c# tabtitle="OrderData.cs" %}
-
-public class OrderData
-{
- public static List Orders = new List();
- public OrderData(){}
-
- public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName, FileType type)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- this.Type = type;
- }
-
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int OrderID = 10248;
- for (int i = 1; i < 3; i++)
- {
- Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevalier", FileType.Base));
- Orders.Add(new OrderData(OrderID + 2, "TOMSP", "Münster", "Toms Spezialitäten", FileType.Replace));
- Orders.Add(new OrderData(OrderID + 3, "HANAR", "Rio de Janeiro", "Hanari Carnes", FileType.Delta));
- Orders.Add(new OrderData(OrderID + 4, "VICTE", "Lyon", "Victuailles en stock", FileType.Base));
- Orders.Add(new OrderData(OrderID + 5, "SUPRD", "Charleroi", "Suprêmes délices", FileType.Replace));
- Orders.Add(new OrderData(OrderID + 6, "HANAR", "Lyon", "Hanari Carnes", FileType.Delta));
- Orders.Add(new OrderData(OrderID + 7, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese", FileType.Base));
- Orders.Add(new OrderData(OrderID + 8, "RICSU", "Münster", "Richter Supermarkt", FileType.Replace));
- Orders.Add(new OrderData(OrderID + 9, "WELLI", "Reims", "Wellington Import", FileType.Delta));
-
- OrderID += 9;
- }
- }
- return Orders;
- }
-
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- public FileType Type { get; set; }
-}
-
-public enum FileType : short
-{
- Base = 1,
- Replace = 2,
- Delta = 3
-}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTDiriFpkNhDml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVJDMMmLnklDAQG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md
index 09fe30aad6..4aef9032a9 100644
--- a/blazor/datagrid/tool-bar.md
+++ b/blazor/datagrid/tool-bar.md
@@ -9,11 +9,11 @@ documentation: ug
# Toolbar in Blazor DataGrid
-The toolbar in the Syncfusion® Blazor DataGrid provides quick access to common actions such as adding, editing, deleting, printing, and exporting data (Excel, CSV, PDF).
+The toolbar in the Syncfusion® Blazor DataGrid offers several general use cases to enhance data manipulation and overall experience. Actions such as adding, editing, and deleting records within the DataGrid can be performed, providing efficient data manipulation capabilities. The toolbar also facilitates data export and import functionality, allowing users to generate downloadable files in formats like Excel, CSV, or PDF.
-The toolbar can be configured with built-in toolbar items or custom items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts:
-- An array of strings for built-in items
-- An array of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects for custom items (text, icon, id, tooltip)
+To enable the toolbar functionality, you need to add the `Toolbar` property to the DataGrid. This property provides the necessary methods to interact with the toolbar items. The toolbar can be customized with built-in toolbar items or custom toolbar items using the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. The `Toolbar` property accepts an array of strings representing the built-in toolbar items or an array of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects for custom toolbar items.
+
+The following example demonstrates enabling toolbar items in the DataGrid:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -86,9 +86,11 @@ The toolbar can be configured with built-in toolbar items or custom items using
## Enable or disable toolbar items
-Enable or disable toolbar items dynamically to control which actions are available based on application logic or user interactions.
+Enabling or disabling toolbar items dynamically in Syncfusion® Blazor DataGrid is to provide control over the availability of specific functionality based on application logic. This powerful capability allows toolbar customization based on various conditions or user interactions.
+
+Toolbar items can be enabled or disabled dynamically by using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This method allows control over the availability of specific toolbar items based on application logic requirements. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the DataGrid generates IDs (for example, Grid_Add, Grid_Edit). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items.
-Toolbar items in the Syncfusion® Blazor DataGrid can be enabled or disabled dynamically using the [EnableToolbarItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableToolbarItemsAsync_System_Collections_Generic_List_System_String__System_Boolean_) method. This provides programmatic control over the availability of specific items by their IDs. For built-in toolbar items specified with strings, the Grid generates IDs (for example, **Grid_Add, Grid_Edit**). For custom items created with ItemModel, set the Id property explicitly and use it when enabling or disabling items.
+In the following example, the [Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) is added to enable and disable the toolbar items using `EnableToolbarItemsAsync` method. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event is triggered and the toolbar items are updated accordingly.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -304,19 +306,20 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIXGVkiYUtauxh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customize Toolbar buttons using CSS
+## Customize toolbar buttons using CSS
-Customize the appearance of built-in toolbar buttons by applying CSS to achieve cohesive theming and clear visual hierarchy. Maintain sufficient color contrast and preserve visible focus indicators for accessibility.
+Enhance the visual presentation of toolbar buttons in the Syncfusion® Blazor DataGrid by modifying their appearance with CSS styles. This flexible approach creates a cohesive user interface tailored to application design requirements.
-The following styles target toolbar button icons and buttons to update the background color:
+The appearance of the built-in toolbar buttons can be modified by applying the following CSS styles:
-```csharp
+```css
.e-grid .e-toolbar .e-tbar-btn .e-icons,
.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
background: #add8e6;
}
```
-The following example demonstrates changing the background color of the `Add`, `Edit`, `Delete`, `Update`, and `Cancel` toolbar buttons using CSS:
+
+The following example demonstrates changing the background color of the `Add`, `Edit`, `Delete`, `Update`, and `Cancel` toolbar buttons by applying CSS styles:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md
index 4caccbd04e..3b18aaeb7b 100644
--- a/blazor/datagrid/toolbar-items.md
+++ b/blazor/datagrid/toolbar-items.md
@@ -9,29 +9,31 @@ documentation: ug
# Toolbar items in Blazor DataGrid
-The Syncfusion® Blazor DataGrid offers a flexible toolbar that enables the addition of custom toolbar items or modification of existing ones. The toolbar appears above the DataGrid, providing convenient access to common actions and custom functionality.
+The Syncfusion® Blazor DataGrid includes a customizable toolbar positioned above the DataGrid for accessing various actions and functionalities. Both built-in and custom toolbar items can be added to meet specific application requirements.
-## Built-in Toolbar item
+## Built-in toolbar items
-Built-in toolbar items in the Syncfusion® Blazor DataGrid use predefined actions to perform standard operations.
+Built-in toolbar items in the Syncfusion® Blazor DataGrid provide predefined actions to perform standard operations within the DataGrid.
-Add them by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in item names (strings). Each item is rendered as a button with an icon and text. The following table lists the built-in toolbar items and their actions:
+These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of built-in items. Each item is rendered as a button with an icon and text. The following table lists the built-in toolbar items and their respective actions:
| Built-in Toolbar Items | Actions |
|------------------------|---------|
-| Add | Adds a new row to the DataGrid. |
-| Edit | Puts the selected row into edit mode. |
-| Update | Saves changes made during edit mode. |
-| Delete | Deletes the selected record. |
-| Cancel | Discards changes made during edit mode. |
-| Search | Displays a search box to filter the records. |
-| Print | Prints the DataGrid content. |
-| ColumnChooser | Opens the Column Chooser to toggle column visibility. |
-| PdfExport | Exports DataGrid data to a PDF file. |
-| ExcelExport | Exports DataGrid data to an Excel file. |
-| CsvExport | Exports DataGrid data to a CSV file. |
-
-N> Built-in item IDs are typically prefixed with the grid ID (for example, Grid_add). Use these IDs in event handlers for robust detection.
+| Add | Adds a new row to the DataGrid.|
+| Edit | Enables editing mode for the selected row in the DataGrid.|
+| Update | Saves the changes made during the editing mode.|
+| Delete | Deletes the selected record from the DataGrid.|
+| Cancel | Discards the changes made during the editing mode.|
+| Search | Displays a search box to filter the DataGrid records.|
+| Print | Prints the DataGrid content.|
+| ColumnChooser | Displays options to choose column visibility.|
+| PdfExport | Exports the DataGrid data to a PDF file.|
+| ExcelExport | Exports the DataGrid data to an Excel file.|
+| CsvExport | Exports the DataGrid data to a CSV file.|
+
+N> Built-in item IDs are typically prefixed with the DataGrid ID (for example, Grid_add). Use these IDs in event handlers for robust detection.
+
+The following example demonstrates enabling built-in toolbar items such as `Print` and `Search` in the DataGrid.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -105,11 +107,18 @@ N> Built-in item IDs are typically prefixed with the grid ID (for example, Grid_
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrAMXrYLyKJdugz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-### Show only icons in built-in Toolbar Items
+### Show only icons in built-in toolbar items
-Showing only icons in the built-in toolbar items allows a compact toolbar layout.
+To display only icons in the built-in toolbar items of the DataGrid, use CSS to hide the text portion of the buttons. For accessibility, provide an accessible name by using **TooltipText** or **aria-label** so screen readers can announce the action correctly.
-To show only icons, hide the text part of the buttons using CSS. For accessibility, provide an accessible name by using **TooltipText** or **aria-label** so screen readers can announce the action correctly.
+```css
+.e-grid .e-toolbar .e-tbar-btn-text,
+.e-grid .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn-text {
+ display: none;
+}
+```
+
+This is demonstrated in the following sample:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -191,9 +200,11 @@ To show only icons, hide the text part of the buttons using CSS. For accessibili
### Customize the built-in toolbar items
-The Syncfusion® Blazor DataGrid allows customizing built-in toolbar items, including disabling default actions and executing custom logic when a button is clicked.
+The Syncfusion® Blazor DataGrid allows customization of the built-in toolbar items to meet specific requirements. This customization can include adding, removing, or modifying toolbar items, as well as handling custom actions when toolbar buttons are clicked.
+
+Customization of built-in toolbar items is achieved using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the DataGrid. This event is triggered when any toolbar button is clicked, allowing custom logic to be implemented. Prefer checking **args.Item.Id** for reliability (IDs are stable and not affected by localization), although Text is also available.
-Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to intercept actions. Prefer checking **args.Item.Id** for reliability (IDs are stable and not affected by localization), although Text is also available.
+The following example demonstrates customizing the toolbar by disabling and canceling the `Add` button functionality and showing a custom message when the `Add` button of toolbar is clicked.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -279,13 +290,13 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVINzCcAGRIvWxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Custom Toolbar Items
+## Custom toolbar items
-Adding custom toolbar items to the Syncfusion® Blazor DataGrid enables personalized functionality.
+Custom toolbar items in the Syncfusion® Blazor DataGrid allow addition of personalized functionality to the toolbar. These items can be added by defining the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects. These objects define the custom items and their corresponding actions. The actions for customized toolbar items are defined in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-Define custom items by setting the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property to a collection of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) objects, and handle actions in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event.
+By default, custom toolbar items are positioned on the left side of the toolbar. The position can be changed by using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the `ItemModel`.
-By default, custom toolbar items are positioned on the **left** side. Change the position using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of ItemModel.
+The following example demonstrates applying the `Align` property with the value `Right` for the "Collapse All" toolbar item.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -379,11 +390,13 @@ By default, custom toolbar items are positioned on the **left** side. Change the
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLIDOgtGItGVQpJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Both built-in and custom items in Toolbar
+## Both built-in and custom items in toolbar
-Combining built-in and custom items provides flexibility to create a toolbar with standard actions and custom functionality.
+The toolbar in the Syncfusion® Blazor DataGrid supports a combination of built-in and custom toolbar items to provide standard and custom actions within the same toolbar.
-Define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property as an array that contains both built-in item names (strings) and custom items (objects with properties such as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text), [PrefixIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_PrefixIcon), and [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Id)).
+To use both types of toolbar items, define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the DataGrid as an array that includes both built-in and custom items. Built-in items are specified as strings, while custom items are defined as objects with properties such as [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Text), [PrefixIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_PrefixIcon), and [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Id).
+
+The following example demonstrates both built-in and custom toolbar items in the DataGrid. The built-in toolbar items include `Add`, `Edit`, `Delete`, `Update`, and `Cancel`, while the custom toolbar item is `Click`.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -472,11 +485,13 @@ Define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gri
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBKCXBEUwAbaVmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Custom Toolbar Items in a specific position
+## Custom toolbar items in a specific position
+
+Custom toolbar items in the Syncfusion® Blazor DataGrid can be positioned in specific locations by modifying the default placement. This enables precise control of each custom toolbar item's positioning according to specific requirements and desired layout within the DataGrid.
-Customizing the position of a custom toolbar item modifies its default placement, allowing precise control over layout.
+By default, custom toolbar items in the DataGrid are aligned on the left side of the toolbar. The position of custom toolbar items can be modified by utilizing the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor).
-By default, custom toolbar items are aligned on the left. Modify the position by setting the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor).
+In the following sample, the "Collapse All" toolbar item is positioned on the `Right`, the "Expand All" toolbar item is positioned on the left, and the `Search` toolbar item is positioned at the center.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -573,8 +588,8 @@ When creating custom toolbar items using the same text as default items (such as
To avoid this behavior and ensure proper functionality:
-- Assign a unique **Id** to each custom toolbar item to distinguish it from default items.
-- Use the **Text**, **PrefixIcon**, and **TooltipText** properties of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) to define appearance.
+- Assign a unique `Id` to each custom toolbar item to distinguish it from default items.
+- Use the `Text`, `PrefixIcon`, and `TooltipText` properties of [ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) to define appearance.
- Handle actions in `OnToolbarClick` using the Id (or Text, if necessary).
{% tabs %}