diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md
index 6c76758b65..7a4a40f0f2 100644
--- a/blazor/datagrid/custom-toolbar.md
+++ b/blazor/datagrid/custom-toolbar.md
@@ -1,18 +1,18 @@
 ---
 layout: post
 title: Custom Toolbar Items in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Custom Toolbar Items in Syncfusion Blazor DataGrid component and much more details.
+description: Learn how to create and use custom toolbar items in the Syncfusion Blazor DataGrid, including templates, icons with text, dropdowns, and export actions.
 platform: Blazor
 control: DataGrid
 documentation: ug
 ---
 # Custom toolbar in Blazor DataGrid
 
-Custom toolbar in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to create a distinctive toolbar layout, style, and functionality that aligns with the specific needs of your application, providing a personalized experience within the Grid.
+The custom toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables a distinctive toolbar layout, style, and behavior tailored to application requirements, delivering a personalized Grid experience.
 
-This can be achieved by utilizing the `Template` property, which offers extensive customization options for the Toolbar. You can define a custom Template for the Toolbar and handle the actions of the ToolbarItems in the **OnClick** event.
+This is implemented by using the `Template` property, which provides extensive customization options for the toolbar. Define a custom template for the toolbar and handle toolbar item actions in the **OnClick** event.
 
-The following example demonstrates, how to render the custom Toolbar using `Template`:
+The following example demonstrates how to render a custom toolbar using `Template`:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -117,11 +117,11 @@ The following example demonstrates, how to render the custom Toolbar using `Temp
 
 ## Render image with text in custom Toolbar
 
-Render an image with text in custom Toolbar in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows easily render an image along with text in the Toolbar of the Grid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience.
+Rendering an image with text in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid helps provide context and improves visual clarity for actions.
 
-To render an image with text in Custom Toolbar, you can utilize the Template in [SfToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html) in your code.
+To render an image with text in the custom toolbar, use the `Template` in [SfToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html).
 
-The following example demonstrates how to render an image in the Toolbar of the Grid using `Template`:
+The following example demonstrates how to render images and text in the Grid toolbar using `Template`:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -160,13 +160,13 @@ The following example demonstrates how to render an image in the Toolbar of the
     {
         Orders = OrderData.GetAllRecords();
     }
-    public void AddButton()
+    public async Task AddButton()
     {
-        this.Grid.AddRecordAsync();
+        await this.Grid.AddRecordAsync();
     }
-    public void DeleteButton()
+    public async Task DeleteButton()
     {
-        this.Grid.DeleteRecordAsync();
+        await this.Grid.DeleteRecordAsync();
     }
 }
 <style>
@@ -220,15 +220,15 @@ The following example demonstrates how to render an image in the Toolbar of the
 {% endhighlight %}
 {% endtabs %}
 
-> You can further customize the styles and layout of the image and text in the Custom Toolbar to suit your specific design requirements.
+> The styles and layout of the image and text in the custom toolbar can be further customized to meet specific design requirements. For better accessibility, include alt text on images.
 
 ## Render SfDropDownList in Custom Toolbar
 
-Render **SfDropDownList** in Custom Toolbar in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables you to extend the functionality of the Custom Toolbar by incorporating a [SfDropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html), allowing you to perform various actions within the Grid based on their selections.
+Rendering an **SfDropDownList** in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid extends toolbar functionality and enables actions based on user selection.
 
-This can be achieved by utilizing the `Template`. The example below demonstrates how to render the **SfDropDownList** in the Custom Toolbar, where the Toolbar Template includes the its [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event is bound to the **OnChange** method.
+This is achieved by using the `Template`. The example below shows how to render the **SfDropDownList** in the custom toolbar, where the toolbar template binds the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event to the **OnChange** method.
 
-In the **OnChange** method, the text of the selected item is checked to determine the appropriate action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method is called to exit the edit mode. If **Edit** is selected, the selected record is passed to the [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) method to initiate the edit mode dynamically. Similarly, if **Delete** is picked, the selected record is passed to the [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) method to remove it from the Grid.
+In the **OnChange** method, the selected item text determines the action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method exits edit mode. If **Edit** is selected, the selected record is passed to [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) to start editing dynamically. Similarly, if **Delete** is chosen, the selected record is passed to [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) to remove it from the Grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -278,32 +278,32 @@ In the **OnChange** method, the text of the selected item is checked to determin
     {
         Orders = OrderData.GetAllRecords();
     }
-    public void AddButton()
+    public async Task AddButton()
     {
-        this.Grid.AddRecordAsync();
+        await this.Grid.AddRecordAsync();
     }
-    public void DeleteButton()
+    public async Task DeleteButton()
     {
-        this.Grid.DeleteRecordAsync();
+        await this.Grid.DeleteRecordAsync();
     }
-    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Select> args)
+    public async Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Select> args)
     {
         var selectedRow = this.Grid.GetSelectedRecordsAsync();
         if (args.ItemData.text == "Edit")
         {
-            this.Grid.StartEditAsync();
+            await this.Grid.StartEditAsync();
         }
         if (args.ItemData.text == "Delete")
         {
-            this.Grid.DeleteRecordAsync();
+            await this.Grid.DeleteRecordAsync();
         }
         if (args.Value == "Update")
         {
-            this.Grid.EndEditAsync();
+            await this.Grid.EndEditAsync();
         }
         this.Dropdown.Placeholder = args.ItemData.text;
-
     }
+
 }
 {% endhighlight %}
 {% highlight c# tabtitle="OrderData.cs" %}
@@ -351,17 +351,17 @@ In the **OnChange** method, the text of the selected item is checked to determin
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVgWDUiLWIJdsVg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrSMjjihtPwLWfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Render SfAutoComplete in custom toolbar
 
-Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to enhance the Grid's usability by enabling dynamic search operations based on input.
+Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enhances usability by enabling dynamic search based on user input.
 
-This can be achieved by utilizing the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below demonstrates how to render the `SfAutoComplete` within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of the `SfAutoComplete` is bound to the **OnSearch** method, which performs a search operation on the Grid based on the selected input.
+This is implemented by using the `Template` property of the [Toolbar](https://blazor.syncfusion.com/documentation/toolbar/getting-started-webapp). The example below renders the `SfAutoComplete` within the custom toolbar. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.AutoCompleteEvents-2.html#Syncfusion_Blazor_DropDowns_AutoCompleteEvents_2_ValueChange) event of `SfAutoComplete` is bound to the **OnSearch** method, which searches the Grid based on the selected input.
 
-In the **OnSearch** method, the selected value from the `SfAutoComplete` is used as a search keyword. The Grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method is called to filter records matching the keyword across all searchable columns.
+In the **OnSearch** method, the selected value from `SfAutoComplete` is used as the search keyword. The Grid’s [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method filters records that match the keyword across all searchable columns.
 
-The following example demonstrates how to render the `SfAutoComplete` inside the Grid's toolbar and use it to perform search operations:
+The following example shows how to render `SfAutoComplete` inside the Grid toolbar and use it to perform search operations:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -474,11 +474,11 @@ The following example demonstrates how to render the `SfAutoComplete` inside the
 
 ## Render a component or element using the Toolbar Template
 
-Rendering a component or element using the Toolbar Template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to extend the capabilities of the Grid Toolbar by incorporating custom components or elements. This provides flexibility to enhance the Toolbar with custom buttons, dropdowns, input fields, icons, or any other desired UI elements. You can bind event handlers or handle interactions within the Template to enable specific actions or behaviors associated with the added components or elements.
+Rendering a component or element by using the toolbar template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid extends the toolbar with custom components such as buttons, dropdowns, input fields, icons, or other UI elements. Event handlers can be bound within the template to enable actions for the added components.
 
-To render custom components or elements within the Toolbar, use the `Template` directive. This allows you to include other components, such as a [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html), and perform specific Grid actions based on the button click. For example, when the **ExcelExport** button is clicked, the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the Grid to Excel. Similarly, when the **PdfExport** button is clicked, the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method is called to export the Grid to PDF format.Likewise, when the Print button is clicked, the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method will triggered to print the Grid.
+To render custom components within the toolbar, use the `Template` directive. For example, include an [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html) and perform specific Grid actions based on button clicks. When the **ExcelExport** button is clicked, [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) exports the Grid to Excel. When the **PdfExport** button is clicked, [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) exports the Grid to PDF. Likewise, when the Print button is clicked, [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) is triggered to print the Grid.
 
-The following example demonstrates how to render a **SfButton** in the Toolbar using `Template` and perform Grid action based on the respected button click:
+The following example demonstrates how to render an **SfButton** in the toolbar using `Template` and perform Grid actions based on the corresponding button click:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -515,17 +515,17 @@ The following example demonstrates how to render a **SfButton** in the Toolbar u
     {
         Orders = OrderData.GetAllRecords();
     }
-    public void ExcelExport()
+    public async Task ExcelExport()
     {
-        this.Grid.ExportToExcelAsync();
+        await this.Grid.ExportToExcelAsync();
     }
-    public void PdfExport()
+    public async Task PdfExport()
     {
-        this.Grid.ExportToPdfAsync();
+        await this.Grid.ExportToPdfAsync();
     }
-    public void Print()
+    public async Task Print()
     {
-        this.Grid.PrintAsync();
+        await this.Grid.PrintAsync();
     }
 }
 {% endhighlight %}
@@ -576,4 +576,4 @@ The following example demonstrates how to render a **SfButton** in the Toolbar u
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLUCtDUyMhZgqEX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVysZtiBWCpVQjw?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 2b29f12b52..608782fb55 100644
--- a/blazor/datagrid/tool-bar.md
+++ b/blazor/datagrid/tool-bar.md
@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Toolbar in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Toolbar in Syncfusion Blazor DataGrid component and much more details.
+title: Toolbar Styling in Blazor DataGrid Using CSS | Syncfusion
+description: Learn how to customize the Syncfusion Blazor DataGrid toolbar using CSS, including background, button styles, isolation tips, and accessibility.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -9,11 +9,13 @@ documentation: ug
 
 # Toolbar in Blazor DataGrid
 
-The toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers several general use cases to enhance data manipulation and overall experience. Actions such as adding, editing, and deleting records within the Grid can be performed, providing efficient data manipulation capabilities. The toolbar also facilitates data export and import functionality, allowing you to generate downloadable files in formats like Excel, CSV, or PDF.
+The toolbar in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides quick access to common actions such as adding, editing, deleting, printing, and exporting data (Excel, CSV, PDF).
 
-This service 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 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)
 
-The following example demonstrates how to enable toolbar items in the Grid:
+The following example demonstrates how to configure toolbar items in the Grid:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -86,11 +88,11 @@ The following example demonstrates how to enable toolbar items in the Grid:
 
 ## Enable or disable toolbar items
 
-Enabling or disabling toolbar items dynamically in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid is to provide control over the availability of specific functionality based on application logic. This feature allows you to customize the toolbar based on various conditions or individuals interactions.
+Enable or disable toolbar items dynamically to control which actions are available based on application logic or user interactions.
 
-You can enable or disable toolbar items 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 you to control the availability of specific toolbar items based on your application logic.
+Toolbar items in the Syncfusion<sup style="font-size:70%">&reg;</sup> 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 [Blazor Toggle Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) Button 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.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) event is triggered and the toolbar items are updated accordingly:
+In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html) toggles toolbar item availability via a Grid 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 executes and updates the toolbar items. Verify that the IDs passed match the toolbar item IDs generated for the Grid in the target version.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -120,15 +122,15 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com
         Orders = OrderData.GetAllRecords();
     }
 
-    private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
+    private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args)
     {
         if (args.Checked)
         {
-            this.Grid.EnableToolbarItems(new List<string>() { "Grid_Expand", "Grid_Collapse" }, false);
+            await this.Grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Expand", "Grid_Collapse" }, false);
         }
         else
         {
-            this.Grid.EnableToolbarItems(new List<string>() { "Grid_Expand", "Grid_Collapse" }, true);
+            await this.Grid.EnableToolbarItemsAsync(new List<string>() { "Grid_Expand", "Grid_Collapse" }, true);
         }
 
     }
@@ -137,11 +139,11 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com
     {
         if (args.Item.Text == "Expand")
         {
-            await this.Grid.GroupExpandAll();
+            await this.Grid.ExpandAllGroupAsync();
         }
         if (args.Item.Text == "Collapse")
         {
-            await this.Grid.GroupCollapseAll();
+            await this.Grid.CollapseAllGroupAsync();
         }
     }
 }
@@ -205,11 +207,11 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com
 
 ## Enable or disable toolbar items based on selected row data
 
-You can enable or disable toolbar items based on the selected row data in a Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid. This allows you to dynamically control which toolbar actions are available, ensuring they are only active when relevant to the selected row. 
+Enable or disable toolbar items based on the selected row so that actions are available only when relevant to the current selection.
 
-This can be achieved by using the [RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelecting) event along with 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 you to programmatically enable or disable specific toolbar items based on the selected row's data.
+Use the [RowSelecting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowSelecting) event with 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 to toggle specific items by id during selection. For built-in items, refer to the generated toolbar item IDs (for example, Grid_Add, Grid_Edit, Grid_Delete). For custom items, use the ItemModel Id value. Ensure that the IDs used match the rendered toolbar item IDs in the target version.
 
-The following code example demonstrates how to enable or disable the toolbar items based on the selected row data:
+The following code example demonstrates enabling or disabling toolbar items based on the selected row data:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -310,9 +312,9 @@ public class OrderData
 
 ## Customize Toolbar buttons using CSS
 
-Customizing Toolbar buttons in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using CSS involves modifying the appearance of built-in toolbar buttons by applying CSS styles. This provides a flexible and customizable way to enhance the visual presentation of the toolbar and create a cohesive interface.
+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.
 
-The appearance of the built-in Toolbar buttons can be modified by applying the following CSS styles:
+The following styles target toolbar button icons and buttons to update the background color:
 
 ```csharp
 .e-grid .e-toolbar .e-tbar-btn .e-icons,
@@ -320,7 +322,7 @@ The appearance of the built-in Toolbar buttons can be modified by applying the f
     background: #add8e6;   
 }
 ```
-The following example demonstrates how to change the background color of the `Add`, `Edit`, `Delete`, `Update` and `Cancel` toolbar buttons by applying CSS styles
+The following example demonstrates changing the background color of the `Add`, `Edit`, `Delete`, `Update`, and `Cancel` toolbar buttons using CSS:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -401,4 +403,6 @@ The following example demonstrates how to change the background color of the `Ad
 
 [View Sample in GitHub](https://github.com/SyncfusionExamples/Customizing-the-toolbar-items-tooltip-text-in-Blazor-Grid)
 
-N> You can refer to our [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) 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.
+
+N> Styling tips: when using CSS isolation, place styles in the component’s .razor.css file. To target inner elements from isolated CSS, use the ::deep selector where appropriate. Consider additional state styles (hover, active, focus-visible, disabled) and high-contrast themes to improve accessibility.
\ No newline at end of file
diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md
index 555c8b9298..f1a9784ced 100644
--- a/blazor/datagrid/toolbar-items.md
+++ b/blazor/datagrid/toolbar-items.md
@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Toolbar Items in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Toolbar Items in Syncfusion Blazor DataGrid component and much more details.
+description: Learn how to use built-in and custom toolbar items in Syncfusion Blazor DataGrid, including icons, alignment, tooltips, and handling toolbar actions.
 platform: Blazor
 control: DataGrid
 documentation: ug
@@ -9,29 +9,31 @@ documentation: ug
 
 # Toolbar items in Blazor DataGrid
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers a flexible toolbar that enables the addition of custom Toolbar Items or modification of existing ones. This customizable toolbar is positioned above the Grid, providing a convenient way to access various actions and functionalities.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> 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.
 
 ## Built-in Toolbar item
 
-Built-in toolbar items in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid involves utilizing pre-defined actions to perform standard operations within the Grid.
+Built-in toolbar items in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid use predefined actions to perform standard operations.
 
-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:
+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:
 
 | Built-in Toolbar Items | Actions |
 |------------------------|---------|
-| Add | Adds a new row to the Grid.|
-| Edit | Enables editing mode for the selected row in the Grid.|
-| Update | Saves the changes made during the editing mode.|
-| Delete | Deletes the selected record from the Grid.|
-| Cancel | Discards the changes made during the editing mode.|
-| Search | Displays a search box to filter the Grid records.|
-| Print | Print the Grid content.|
-| ColumnChooser | Choose the column’s visibility. |
-| PdfExport | Exports the Grid data to a PDF file.|
-| ExcelExport | Exports the Grid data to an Excel file.|
-| CsvExport | Exports the Grid data to a CSV file.|
-
-The following example demonstrates how to enable built-in Toolbar items such as **Print** and **Search** in the Grid:
+| 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.
+
+The following example demonstrates how to enable built-in toolbar items such as `Print` and `Search` in the DataGrid:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -107,9 +109,9 @@ The following example demonstrates how to enable built-in Toolbar items such as
 
 ### Show only icons in built-in Toolbar Items
 
-Showing only icons in the built-in Toolbar Items of the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid involves customizing the appearance of the toolbar to display icons without text.
+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 Grid, you can use CSS to hide the text portion of the buttons using the following CSS style.
+To display only icons, hide the text portion of the buttons using CSS. Consider accessibility: keep an accessible name by providing TooltipText or aria-labels so screen readers still announce the action.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -191,11 +193,11 @@ To display only icons in the built-in Toolbar Items of the Grid, you can use CSS
 
 ### Customize the built-in toolbar items
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows you to customize the built-in toolbar items to meet your specific requirements. This can include adding, removing, or modifying toolbar items, as well as handling custom actions when toolbar buttons are clicked.
+The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid allows customizing built-in toolbar items, including disabling default actions and executing custom logic when a button is clicked.
 
-To customize the built-in toolbar items, you can use the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the Grid.
+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 demonstrate how to customize the toolbar by disabling and canceling the **Add** button functionlity and showing a custom message when the **Add** button of toolbar is clicked:
+The following example demonstrates disabling and canceling the `Add` button functionality and showing a custom message when the `Add` button is clicked:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -283,11 +285,11 @@ public class OrderData
 
 ## Custom Toolbar Items
 
-Adding custom Toolbar Items to the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid involves incorporating personalized functionality into the Toolbar.
+Adding custom toolbar items to the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables personalized functionality.
 
-Custom Toolbar Items can be added to the Grid 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 the customized toolbar items are defined in the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#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. However, you can change the position by using the [Align](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel_Align) property of the `ItemModel`. The following example demonstrates how to apply the `Align` property with the value **Right** for the **Collapse All** Toolbar Item:
+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 positions **Collapse All** on the `right`:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -323,11 +325,11 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool
     {
         if (args.Item.Text == "Expand all")
         {
-            await this.Grid.GroupExpandAll();
+            await this.Grid.ExpandAllGroupAsync();
         }
         if (args.Item.Text == "Collapse all")
         {
-            await this.Grid.GroupCollapseAll();
+            await this.Grid.CollapseAllGroupAsync();
         }
     }
 }
@@ -379,19 +381,18 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool
 {% endtabs %}
 
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVqiNBEKnOsnFxm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% 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
 
-Built-in and custom items in a Toolbar within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides the flexibility to create a customized toolbar with a combination of standard actions and custom actions.
+Combining built-in and custom items provides flexibility to create a toolbar with standard actions and custom functionality.
 
-To use both types of toolbar items, you can define the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property of the Grid as an array that includes both built-in and custom items. The built-in items are specified as strings, while the 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) within the 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)).
 
-The following example demonstrates, how to use both built-in and custom toolbar items in the Grid. The built-in toolbar items includes **Add**, **Edit**, **Delete**, **Update**, and **Cancel**, while the custom toolbar item is **Click**:
+The following example demonstrates how to use both built-in and custom toolbar items in the DataGrid. Built-in items include **Add**, **Edit**, **Delete**, **Update**, and **Cancel**, and the custom item Click triggers a custom message:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
-@using Syncfusion.Blazor
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 
@@ -479,15 +480,14 @@ The following example demonstrates, how to use both built-in and custom toolbar
 
 ## Custom Toolbar Items in a specific position
 
-Customizing the position of a custom toolbar within the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid involves modifying the default placement of the custom Toolbar Items. This enables you to precisely control the positioning of each custom Toolbar item according to your specific requirements and desired layout within the Grid.
+Customizing the position of a custom toolbar item modifies its default placement, allowing precise control over layout.
 
-By default, custom Toolbar Items in Grid are aligned on the left side of the toolbar. However, you have the ability to modify the position of the custom toolbar items 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**:
+In the following sample, the `Collapse All` item is positioned on the **right**, the `Expand All` item on the **left**, and the `Search` item in the **center**:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
-@using Syncfusion.Blazor
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 
@@ -496,7 +496,7 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the
     <GridGroupSettings Columns=@GroupOption></GridGroupSettings>
     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>
     <GridColumns>
-        <GridColumn Field=@nameof(OrderData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Integer" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.FirstName) HeaderText="First Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.Country) HeaderText="Country" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
         <GridColumn Field=@nameof(OrderData.PostalCode) HeaderText="PostalCode" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>
@@ -518,11 +518,11 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the
     {
         if (args.Item.Text == "Expand all")
         {
-            await this.Grid.GroupExpandAll();
+            await this.Grid.CollapseAllGroupAsync();
         }
         if (args.Item.Text == "Collapse all")
         {
-            await this.Grid.GroupCollapseAll();
+            await this.Grid.CollapseAllGroupAsync();
         }
     }
 }
@@ -573,19 +573,19 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMNXKhRPOCyLS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIXaKXmSgAyyhA?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customize the text name of custom Toolbar Items with same as default Toolbar Items
 
-When creating custom toolbar items in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using the same text as default toolbar items (such as "Add", "Edit", or "Delete"), the Grid treats them as default items. This may result in unexpected behavior—such as the toolbar buttons becoming disabled during certain Grid states.
+When creating custom toolbar items using the same text as default items (such as Add, Edit, or Delete), the DataGrid may treat them as default items. This can lead to unexpected behavior—for example, the buttons may be disabled in certain states.
 
 To avoid this behavior and ensure proper functionality:
 
-* Assign a unique **Id** to each custom toolbar item to distinguish them from default toolbar items.
-* Use the `Text`, `PrefixIcon`, and `TooltipText` properties of the [ItemModel]([ItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor)) to define the button appearance.
-* Handle actions using the `OnToolbarClick` event based on the Id or Text.
+- 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).
 
-This is demonstrated in the following sample code where there are custom toolbar items with text same as Add and Delete buttons. These toolbar buttons will be enabled only when `GridEditSettings` is defined in Grid. So custom toolbar will be disabled state considering it as default toolbar item.
+The following sample shows custom toolbar items with text matching default items. These may be disabled when `GridEditSettings` is present because they are considered default items without unique IDs.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -628,27 +628,27 @@ This is demonstrated in the following sample code where there are custom toolbar
         }).ToList();
     }
 
-    public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
     {
         if (args.Item.Text == "Add")
         {
-            Grid.AddRecord();
+            await Grid.AddRecordAsync();
         }
         if (args.Item.Text == "Edit")
         {
-            Grid.StartEdit();
+            await Grid.StartEditAsync();
         }
         if (args.Item.Text == "Delete")
         {
-            Grid.DeleteRecord();
+            await Grid.DeleteRecordAsync();
         }
         if (args.Item.Text == "Update")
         {
-            Grid.EndEdit();
+            await Grid.EndEditAsync();
         }
         if (args.Item.Text == "Cancel")
         {
-            Grid.CloseEdit();
+            await Grid.CloseEditAsync();
         }
     }
 
@@ -663,19 +663,20 @@ This is demonstrated in the following sample code where there are custom toolbar
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheXeVNVHTgrfqL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLSXOUtQoSjTmfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customizing the toolbar items tooltip text
 
-You can customize the toolbar items tooltip text by adding toolbar items externally by setting [ItemModel.TooltipText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) property.
+Customize a toolbar item’s tooltip text by adding items externally and setting the [ItemModel.TooltipText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemModel.html#Syncfusion_Blazor_Navigations_ItemModel__ctor) property. Tooltips also improve accessibility by conveying the action’s purpose when icons are shown without text.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 
-<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar=@ToolbarItems>
+<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" Toolbar=@ToolbarItems AllowExcelExport="true" AllowPdfExport="true">
     <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
+    <GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
     <GridColumns>
         <GridColumn Field=@nameof(OrderData.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
@@ -694,6 +695,22 @@ You can customize the toolbar items tooltip text by adding toolbar items externa
         new ItemModel(){ Text = "CSV",TooltipText="Export to CSV", PrefixIcon= "e-csvexport", Id="Grid_csvexport"},
     };
 
+    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+    {
+        if (args.Item.Id == "Grid_pdfexport")  //Id is combination of Grid's ID and itemname.
+        {
+            await this.Grid.ExportToPdfAsync();
+        }
+        else if (args.Item.Id == "Grid_excelexport")
+        {
+            await Grid.ExportToExcelAsync();
+        }
+        else if (args.Item.Id == "Grid_csvexport")
+        {
+            await Grid.ExportToCsvAsync();
+        }
+    }
+
     protected override void OnInitialized()
     {
         Orders = OrderData.GetAllRecords();
@@ -746,4 +763,4 @@ You can customize the toolbar items tooltip text by adding toolbar items externa
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVACXLuoSzCcoOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVIiXZMiFpezqWu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file