From 200a1fa69ad0fe1cf4b281b874145164c94e34f1 Mon Sep 17 00:00:00 2001
From: Naveen S P <naveen.palanivel@syncfusion.com>
Date: Fri, 14 Aug 2026 18:58:35 +0530
Subject: [PATCH 1/2] 1046286: Paging Revamp Updated

---
 blazor/datagrid/paging.md | 105 ++++++++++++++++++--------------------
 1 file changed, 50 insertions(+), 55 deletions(-)

diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md
index 0d63fbd673..c68d2425b0 100644
--- a/blazor/datagrid/paging.md
+++ b/blazor/datagrid/paging.md
@@ -9,17 +9,17 @@ documentation: ug
 
 # Paging in Blazor Data Grid
 
-Paging provides an option to display [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) data in segmented pages, making it easier to navigate large datasets. This feature is particularly useful when dealing with extensive data sets.
+Paging provides an option to display [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) data in segmented pages, making it easier to navigate large datasets. Paging is particularly useful when dealing with extensive datasets.
 
 To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. When paging is enabled, a pager is rendered at the bottom of the Grid, allowing navigation through different pages of data.
 
 Paging options can be configured through the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. GridPageSettings allows control of page size, current page, and total record count.
 
-> For large data sources, paging improves performance by fetching and rendering only a subset of records per page. For remote data, combine paging with server-side data retrieval to avoid loading all records at once.
+> For large data sources, paging improves performance by fetching and rendering only a subset of records per page. For remote data, combine paging with server-side data retrieval to avoid loading all records at once. See the [Remote Data](https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data) documentation for more details.
 
 ## Customize the pager options
 
-Customizing pager options in  Blazor DataGrid helps adjust pagination to specific needs. The **PageCount** property sets the number of numeric buttons. The **CurrentPage** property defines the active page. The **PageSize** property specifies the number of records displayed per page. The **PageSizes** property provides a dropdown for selecting different page sizes.
+Customizing pager options in Blazor DataGrid helps adjust pagination to specific needs. The **PageCount** property sets the number of numeric buttons. The **CurrentPage** property defines the active page. The **PageSize** property specifies the number of records displayed per page. The **PageSizes** property provides a dropdown for selecting different page sizes.
 
 ### Change the page size
 
@@ -59,7 +59,7 @@ The Blazor DataGrid allows control over the number of records displayed per page
     {
         GridData = OrderData.GetAllRecords();
     }
-    private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
+    private void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
     {
         if(args.Value != null && args.Value != 0)
         {
@@ -129,7 +129,7 @@ The Blazor DataGrid allows control over the number of records displayed per page
 
 The Blazor DataGrid allows adjusting the number of numeric buttons displayed in the pager. By default, **PageCount is 8**.
 
-To change the page count, use the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), which defines how many pages are shown in the pager container.
+To change the page count, use the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), which sets the number of numeric buttons displayed in the pager.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -164,7 +164,7 @@ To change the page count, use the [PageCount](https://help.syncfusion.com/cr/bla
     {
         GridData = OrderData.GetAllRecords();
     }
-    private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
+    private void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
     {
         if (args.Value != null && args.Value != 0)
         {
@@ -270,7 +270,7 @@ To change the current page, use the [CurrentPage](https://help.syncfusion.com/cr
     {
         GridData = OrderData.GetAllRecords();
     }
-    private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
+    private void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
     {
         if (args.Value != null && args.Value != 0)
         {
@@ -350,9 +350,6 @@ To use the pager template, specify the [Template](https://help.syncfusion.com/cr
 <SfGrid DataSource="@GridData" @ref="Grid" AllowPaging="true">
     <GridPageSettings PageSize="@pageSize">
         <Template>
-            @{
-                var Paging = (context as PagerTemplateContext);
-            }
             <div style="display: flex; align-items: center;">
                 <SfNumericTextBox TValue="int" Format="###" Step="1" Min="1" Max="20" Value="@pageSize" Placeholder="Select Page Size" Width="200px">
                     <NumericTextBoxEvents TValue="int" ValueChange="@OnPageSizeChange"></NumericTextBoxEvents>
@@ -446,7 +443,7 @@ public class OrderData
 
 The pager with a page size dropdown in Blazor DataGrid allows dynamically changing the number of records displayed in the Grid.
 
-To enable the page size dropdown, set the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property to true in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). This renders a dropdown list within the pager to select the desired page size. The selected value determines the number of records displayed on each page.
+To enable the page size dropdown, set the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property to **true** in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). A dropdown list appears within the pager to select the desired page size. The selected value determines the number of records displayed on each page.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -522,13 +519,13 @@ public class OrderData
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hDLHNmtqoLlLKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
-> * If the PageSizes property is set to a boolean value (true or false), the page size dropdown defaults to options such as [‘All’, ‘5’, ‘10’, ‘15’, ‘20’].
+> * When the PageSizes property is set to true, the page size dropdown uses default options such as [‘All’, ‘5’, ‘10’, ‘15’, ‘20’]. When set to false, the dropdown is hidden.
 > * Refer to the [Blazor Grid Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) feature tour for an overview of paging.
 > * Refer to the Blazor DataGrid feature tour and the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=fluent2) to understand data presentation and manipulation.
 
 ### Customize page size dropdown
 
-The Blazor DataGrid allows customizing the default values in the page size dropdown. To do this, define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of strings instead of a boolean.
+The Blazor DataGrid allows customizing the default values in the page size dropdown. Define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of strings instead of a boolean to customize page size options.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -601,7 +598,7 @@ The Blazor DataGrid allows customizing the default values in the page size dropd
 
 > The PageSizes property can be configured with either an array of strings or a boolean value.
 
-## How to navigate to particular page
+## How to navigate to a particular page
 
 Navigating to a particular page in the Blazor DataGrid is useful when dealing with large datasets, enabling quick jumps to specific pages.
 
@@ -616,7 +613,7 @@ To navigate programmatically, use the [GoToPageAsync](https://help.syncfusion.co
 @using Syncfusion.Blazor.Buttons
 
 <div>
-    <label style="padding: 30px 17px 0 0">Enter page index:</label>
+    <label style="padding: 30px 17px 0 0">Enter page number:</label>
     <SfNumericTextBox Width="120px" Value="@value" ShowSpinButton="false" TValue="int?">
         <NumericTextBoxEvents TValue="int?" ValueChange="@ValueChangeHandler"></NumericTextBoxEvents>
     </SfNumericTextBox>
@@ -641,7 +638,7 @@ To navigate programmatically, use the [GoToPageAsync](https://help.syncfusion.co
     {
         GridData = OrderData.GetAllRecords();
     }
-    private async Task ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
+    private void ValueChangeHandler(Syncfusion.Blazor.Inputs.ChangeEventArgs<int?> args)
     {
         if (args.Value != null && args.Value != 0)
         {
@@ -704,7 +701,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthdNwDgorFllWXK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLRDlCJpxmPIMGb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ## Dynamically calculate page size based on element height
 
@@ -805,9 +802,9 @@ It is possible to dynamically calculate the page size of a Grid by considering t
 
 ## Render pager at the top of the Grid
 
-By default, the pager is rendered at the bottom of the Grid when [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) is enabled. Using [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component, it is possible to render a pager at the top of the Grid. This is achieved by keeping the Grid’s internal pager disabled (`AllowPaging` set to **false**) and rendering `Pager` externally. Paging actions are synchronized with the Grid by manually applying Skip and Take based on the pager events.
+By default, the pager is rendered at the bottom of the Grid when [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) is enabled. Using the [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component, it is possible to render a pager at the top of the Grid. This is achieved by keeping the Grid’s internal pager disabled (`AllowPaging` set to **false**) and rendering the `SfPager` externally. Paging actions are synchronized with the Grid by manually applying Skip and Take based on the pager events.
 
-In the following sample, `Pager` component is rendered above the Grid. Initially, the Pager’s [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) determines the number of records shown. The SfPager also includes a [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizes) property to offer a dropdown of sizes such as { 5, 10, 12, 20 }. Navigation is handled in the [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event by computing SkipValue and TakeValue using PageSize and the current page.
+In the following sample, the `SfPager` component is rendered above the Grid. Initially, the Pager’s [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) determines the number of records shown. The SfPager also includes a [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizes) property to offer a dropdown of sizes such as { 5, 10, 12, 20 }. Navigation is handled in the [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event by computing SkipValue and TakeValue using PageSize and the current page. The `HandleKeyDown` method ensures that pressing Enter in the pager input field synchronizes pagination with the Grid's data display.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -815,8 +812,8 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Grids
 
-<div @onkeydown=HandleKeyDown>
-    <SfPager @ref="Page" PageSize="@TakeValue"  PageSizes=@pagesizes PageSizeChanged="PageSize" NumericItemsCount=4 TotalItemsCount="@count" ShowAllInPageSizes="true" ItemClick="Click">
+<div @onkeydown="HandleKeyDown">
+    <SfPager @ref="Page" PageSize="@TakeValue" PageSizes="@pageSizes" PageSizeChanged="OnPageSizeChanged" NumericItemsCount="4" TotalItemsCount="@count" ShowAllInPageSizes="true" ItemClick="OnPagerItemClick">
     </SfPager>
 </div>
 
@@ -840,7 +837,7 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
     public int TakeValue = 10;
     public int count { get; set; }
     public SfPager Page { get; set; }
-    public List<int> pagesizes = new List<int> { 5, 10, 12, 20 };
+    public List<int> pageSizes = new List<int> { 5, 10, 12, 20 };
     public void HandleKeyDown(KeyboardEventArgs args) 
     { 
         if (args.Code == "Enter" || args.Key == "Enter")
@@ -850,17 +847,16 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
             TakeValue = Page.PageSize;
         } 
     }
-    public void Click(PagerItemClickEventArgs args)
+    public void OnPagerItemClick(PagerItemClickEventArgs args)
     {
         SkipValue = (args.CurrentPage * Page.PageSize) - Page.PageSize;
         TakeValue = Page.PageSize;
     }
-    public void PageSize(PageSizeChangedArgs args)
+    public void OnPageSizeChanged(PageSizeChangedArgs args)
     {
-        int page = Grid.PageSettings.CurrentPage;
-        SkipValue = (page * Page.PageSize) - Page.PageSize;
+        var currentPage = Page.CurrentPage;
+        SkipValue = (currentPage * Page.PageSize) - Page.PageSize;
         TakeValue = Page.PageSize;
-
     }
     protected override void OnInitialized()
     {
@@ -870,27 +866,27 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
 }
 {% endhighlight %}
 {% highlight c# tabtitle="OrderData.cs" %}
-    public class OrderData
-    {
-        public static List<OrderData> Orders = new List<OrderData>();
+public class OrderData
+{
+    public static List<OrderData> Orders = new List<OrderData>();
 
-        public OrderData()
-        {
+    public OrderData()
+    {
 
-        }
-        public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName)
-        {
-            this.OrderID = OrderID;
-            this.CustomerID = CustomerID;
-            this.ShipCity = ShipCity;
-            this.ShipName = ShipName;
-        }
-        public static List<OrderData> GetAllRecords()
+    }
+    public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName)
+    {
+        this.OrderID = OrderID;
+        this.CustomerID = CustomerID;
+        this.ShipCity = ShipCity;
+        this.ShipName = ShipName;
+    }
+    public static List<OrderData> GetAllRecords()
+    {
+        if (Orders.Count() == 0)
         {
-            if (Orders.Count() == 0)
-            {
 
-                int OrderID = 10248;
+            int OrderID = 10248;
                 for (int i = 1; i < 7; i++)
                 {
                     Orders.Add(new OrderData(OrderID + 1, "VINET", "Reims", "Vins et alcools Chevali"));
@@ -916,9 +912,9 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrxDGtAeAMFPRqM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLRNbsTfvzBFbKO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
-> * In this approach, the Grid’s default pager is not used.
+> * When rendering the pager externally, the Grid’s default pager is not used.
 > * During paging, the pager triggers the following events:
 >   * [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_Created) — triggered when the Pager is created.
 >   * [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) — triggered when a numeric item in the pager is clicked.
@@ -928,9 +924,9 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
 
 The Blazor DataGrid triggers two pager events during paging actions:
 
-[PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging) - Triggered before any paging action (such as changing the page or page size). Use this event to customize or control paging behavior.
+[PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging) - Triggered before any paging action (such as changing the page or page size). The PageChanging event can be used to customize or control paging behavior.
 
-[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged) - Triggered after a paging action completes. It provides information such as CurrentPage, CurrentPageSize, PreviousPage, and TotalPages. Use this event to perform follow-up actions or update the UI.
+[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged) - Triggered after a paging action completes. The PageChanged event provides information such as CurrentPage, CurrentPageSize, PreviousPage, and TotalPages. The PageChanged event can be used to perform follow-up actions or update the UI.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -962,22 +958,21 @@ The Blazor DataGrid triggers two pager events during paging actions:
     }
     public string message;
     public string message1;
-    public async Task PageChangingHandler(GridPageChangingEventArgs args)
+    public void PageChangingHandler(GridPageChangingEventArgs args)
     {
          message = args.CurrentPage > args.PreviousPage
-               ? $"You are going to switch to page {args.CurrentPage + 1}"
-               : $"You are going to switch to page {args.PreviousPage}";
+               ? $"You are going to switch to page {args.CurrentPage}"
+               : $"You are going to switch to page {args.CurrentPage}";
     }
 
-    public async Task PageChangedHandler(GridPageChangedEventArgs args)
+    public void PageChangedHandler(GridPageChangedEventArgs args)
     {
          message1 = "Now you are in page " + args.CurrentPage;
-
     }
 }
 {% endhighlight %}
 {% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
+public class OrderData
     {
         public static List<OrderData> Orders = new List<OrderData>();
         public OrderData()
@@ -1020,7 +1015,7 @@ The Blazor DataGrid triggers two pager events during paging actions:
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHtmNUoKBseWzs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVnNPCzJHfXPdCo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ## See also
 

From d06c6674bf3d68bc999475d1ec4809687bf385d8 Mon Sep 17 00:00:00 2001
From: Naveen S P <naveen.palanivel@syncfusion.com>
Date: Mon, 17 Aug 2026 13:57:35 +0530
Subject: [PATCH 2/2] 1046286: CustomToolbar Revamp updated

---
 blazor/datagrid/custom-toolbar.md | 146 ++++++++++++++----------------
 1 file changed, 68 insertions(+), 78 deletions(-)

diff --git a/blazor/datagrid/custom-toolbar.md b/blazor/datagrid/custom-toolbar.md
index 050d5e5952..478ba13572 100644
--- a/blazor/datagrid/custom-toolbar.md
+++ b/blazor/datagrid/custom-toolbar.md
@@ -10,7 +10,7 @@ documentation: ug
 
 The custom toolbar in the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) enables a distinctive toolbar layout, style, and behavior tailored to application requirements, delivering a personalized Grid experience.
 
-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.
+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 **Clicked** event.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -50,19 +50,15 @@ This is implemented by using the `Template` property, which provides extensive c
     {
         if (args.Item.Text == "Collapse All")
         {
-            this.Grid.CollapseAllGroupAsync();
+            await this.Grid.CollapseAllGroupAsync();
         }
         if (args.Item.Text == "Expand All")
         {
-            this.Grid.ExpandAllGroupAsync();
+            await this.Grid.ExpandAllGroupAsync();
         }
     }
 }
-<style>
-    .e-collapse::before {
-        content: '\e834';
-    }
-</style>
+
 {% endhighlight %}
 {% highlight c# tabtitle="OrderData.cs" %}
     public class OrderData
@@ -85,7 +81,6 @@ This is implemented by using the `Template` property, which provides extensive c
         {
             if (Orders.Count() == 0)
             {
-                int code = 10;
                 for (int? i = 1; i < 2; i++)
                 {
                     Orders.Add(new OrderData(1, "Nancy", "Lyon", "Victuailles en stock"));
@@ -97,7 +92,6 @@ This is implemented by using the `Template` property, which provides extensive c
                     Orders.Add(new OrderData(7, "Nancy", "Rio de Janeiro", "Suprêmes délices"));
                     Orders.Add(new OrderData(8, "Margaret", "Bern", "Victuailles en stock"));
                     Orders.Add(new OrderData(9, "Janet", "Lyon", "Hanari Carnes"));
-                    code += 5;
                 }
             }
             return Orders;
@@ -113,11 +107,11 @@ This is implemented by using the `Template` property, which provides extensive c
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/VDhRXQZLBCsmUVxW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
-## Render image with text in custom Toolbar
+## Render Image With Text in Custom Toolbar
 
-Rendering an image with text in the custom toolbar of the Blazor DataGrid helps provide context and improves visual clarity for actions.
+Rendering an image with text in the custom toolbar of the Blazor DataGrid adds context and improves visual clarity for actions.
 
-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).
+To render an image with text in the custom toolbar, use the `Template` property in [SfToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html).
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -190,19 +184,17 @@ To render an image with text in the custom toolbar, use the `Template` in [SfToo
         {
             if (Orders.Count() == 0)
             {
-                int code = 10;
                 for (int? i = 1; i < 2; i++)
                 {
                     Orders.Add(new OrderData(1, "Nancy", new DateTime(1993, 09, 15), 98));
                     Orders.Add(new OrderData(2, "Andrew", new DateTime(1997, 06, 01), 46));
                     Orders.Add(new OrderData(3, "Steven", new DateTime(2000, 04, 04), 56));
-                    Orders.Add(new OrderData(4, "Margaret", new DateTime(1895, 11, 11), 74));
+                    Orders.Add(new OrderData(4, "Margaret", new DateTime(1995, 11, 11), 74));
                     Orders.Add(new OrderData(5, "Janet", new DateTime(2001, 08, 04), 83));
                     Orders.Add(new OrderData(6, "Andrew", new DateTime(2022, 04, 09), 51));
                     Orders.Add(new OrderData(7, "Nancy", new DateTime(2023, 06, 06), 23));
                     Orders.Add(new OrderData(8, "Margaret", new DateTime(2011, 12, 30), 87));
                     Orders.Add(new OrderData(9, "Janet", new DateTime(2012, 07, 07), 34));
-                    code += 5;
                 }
             }
             return Orders;
@@ -220,11 +212,12 @@ To render an image with text in the custom toolbar, use the `Template` in [SfToo
 
 ## Render SfDropDownList in Custom Toolbar
 
-Rendering an [SfDropdownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) in the custom toolbar of the Blazor DataGrid extends toolbar functionality and enables actions based on user selection.
+Rendering an [SfDropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) in the custom toolbar of the Blazor DataGrid extends toolbar functionality and enables actions based on user selection.
 
-This is achieved by using the `Template`. The example below shows how to render the `SfDropDownList` in the custom toolbar, where the toolbar template binds the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event to the **OnChange** method.
+This is achieved by using the `Template` property. The example below shows how to render the `SfDropDownList` in the custom toolbar and bind the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_ValueChanged) event to the **OnChange** method.
+
+In the **OnChange** method, the selected item text determines the action. When **Update** is selected, [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) exits edit mode. When **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. When **Delete** is selected, the selected record is passed to [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) to remove it from the Grid.
 
-In the **OnChange** method, the selected item text determines the action. For example, if **Update** is chosen, the [EndEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EndEditAsync) method exits edit mode. If **Edit** is selected, the selected record is passed to [StartEditAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_StartEditAsync) to start editing dynamically. Similarly, if **Delete** is chosen, the selected record is passed to [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DeleteRecordAsync) to remove it from the Grid.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -233,20 +226,24 @@ In the **OnChange** method, the selected item text determines the action. For ex
 @using Syncfusion.Blazor.DropDowns
 
 <SfGrid DataSource="@Orders" AllowPaging="true" Height="200" @ref="Grid">
-    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>    
-    <SfToolbar>
-        <ToolbarItems>
-            <ToolbarItem Type="ItemType.Input">
-                <Template>
-                    <label>Change the value: </label>
-                    <SfDropDownList @ref="Dropdown" TValue="string" TItem="Select" DataSource=@LocalData Width="200">
-                        <DropDownListFieldSettings Text="text" Value="text"> </DropDownListFieldSettings>
-                        <DropDownListEvents TValue="string" TItem="Select" ValueChange="OnChange"> </DropDownListEvents>
-                    </SfDropDownList>
-                </Template>
-            </ToolbarItem>
-        </ToolbarItems>
-    </SfToolbar>
+    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
+    <GridTemplates>
+        <ToolbarTemplate>
+            <SfToolbar>
+                <ToolbarItems>
+                    <ToolbarItem Type="ItemType.Input">
+                        <Template>
+                            <label>Change the value: </label>
+                            <SfDropDownList @ref="Dropdown" TValue="string" TItem="Select" DataSource=@LocalData Width="200">
+                                <DropDownListFieldSettings Text="text" Value="text"> </DropDownListFieldSettings>
+                                <DropDownListEvents TValue="string" TItem="Select" ValueChange="OnChange"> </DropDownListEvents>
+                            </SfDropDownList>
+                        </Template>
+                    </ToolbarItem>
+                </ToolbarItems>
+            </SfToolbar>
+        </ToolbarTemplate>
+    </GridTemplates>
     <GridColumns>
         <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
@@ -274,17 +271,8 @@ In the **OnChange** method, the selected item text determines the action. For ex
     {
         Orders = OrderData.GetAllRecords();
     }
-    public async Task AddButton()
-    {
-        await this.Grid.AddRecordAsync();
-    }
-    public async Task DeleteButton()
-    {
-        await this.Grid.DeleteRecordAsync();
-    }
     public async Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Select> args)
     {
-        var selectedRow = this.Grid.GetSelectedRecordsAsync();
         if (args.ItemData.text == "Edit")
         {
             await this.Grid.StartEditAsync();
@@ -321,19 +309,17 @@ In the **OnChange** method, the selected item text determines the action. For ex
         {
             if (Orders.Count() == 0)
             {
-                int code = 10;
                 for (int? i = 1; i < 2; i++)
                 {
                     Orders.Add(new OrderData(1, "Nancy", new DateTime(1993, 09, 15), 98));
                     Orders.Add(new OrderData(2, "Andrew", new DateTime(1997, 06, 01), 46));
                     Orders.Add(new OrderData(3, "Steven", new DateTime(2000, 04, 04), 56));
-                    Orders.Add(new OrderData(4, "Margaret", new DateTime(1895, 11, 11), 74));
+                    Orders.Add(new OrderData(4, "Margaret", new DateTime(1995, 11, 11), 74));
                     Orders.Add(new OrderData(5, "Janet", new DateTime(2001, 08, 04), 83));
                     Orders.Add(new OrderData(6, "Andrew", new DateTime(2022, 04, 09), 51));
                     Orders.Add(new OrderData(7, "Nancy", new DateTime(2023, 06, 06), 23));
                     Orders.Add(new OrderData(8, "Margaret", new DateTime(2011, 12, 30), 87));
                     Orders.Add(new OrderData(9, "Janet", new DateTime(2012, 07, 07), 34));
-                    code += 5;
                 }
             }
             return Orders;
@@ -349,7 +335,7 @@ In the **OnChange** method, the selected item text determines the action. For ex
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BNhHZGZLhsrXKhyJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
-## Render SfAutoComplete in custom toolbar
+## Render SfAutoComplete in the Custom Toolbar
 
 Rendering the [SfAutoComplete](https://blazor.syncfusion.com/documentation/autocomplete/getting-started-with-web-app) in the custom toolbar of the Blazor DataGrid enhances usability by enabling dynamic search based on user input.
 
@@ -366,19 +352,22 @@ In the **OnSearch** method, the selected value from `SfAutoComplete` is used as
 
 <SfGrid DataSource="@Orders" AllowPaging="true" @ref="Grid">
     <GridPageSettings PageSize="8"></GridPageSettings>
-    <GridEvents TValue="Order"></GridEvents>
-    <SfToolbar>
-        <ToolbarItems>
-            <ToolbarItem Type="ItemType.Input">
-                <Template>
-                    <SfAutoComplete Placeholder="Search Customer Name" TItem="CustomerDetails" TValue="string" DataSource="@Customers">
-                        <AutoCompleteEvents ValueChange="OnSearch" TValue="string" TItem="CustomerDetails"></AutoCompleteEvents>
-                        <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
-                    </SfAutoComplete>
-                </Template>
-            </ToolbarItem>
-        </ToolbarItems>
-    </SfToolbar>
+    <GridTemplates>
+        <ToolbarTemplate>
+            <SfToolbar>
+                <ToolbarItems>
+                    <ToolbarItem Type="ItemType.Input">
+                        <Template>
+                            <SfAutoComplete Placeholder="Search Customer Name" TItem="CustomerDetails" TValue="string" DataSource="@Customers">
+                                <AutoCompleteEvents ValueChange="OnSearch" TValue="string" TItem="CustomerDetails"></AutoCompleteEvents>
+                                <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>
+                            </SfAutoComplete>
+                        </Template>
+                    </ToolbarItem>
+                </ToolbarItems>
+            </SfToolbar>
+        </ToolbarTemplate>
+    </GridTemplates>
     <GridColumns>
         <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
@@ -447,7 +436,6 @@ In the **OnSearch** method, the selected value from `SfAutoComplete` is used as
              Orders.Add(new Order(10255, "TOMSP", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
              Orders.Add(new Order(10256, "HANAR", 13.97, "Resende", "Wellington Import Export", "Brazil"));
              Orders.Add(new Order(10257, "VINET", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
-            
          }
 
          return Orders;
@@ -466,11 +454,11 @@ In the **OnSearch** method, the selected value from `SfAutoComplete` is used as
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hjLntGDLBsLGXeDQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
-## Render a component or element using the Toolbar Template
+## Render a Custom Component Using the Toolbar Template
 
-Rendering a component or element by using the toolbar template in the 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.
+Custom components can be rendered within the toolbar template of the Blazor DataGrid to add buttons, dropdowns, input fields, icons, and other UI elements. Event handlers bound within the template enable actions on these components.
 
-To render custom components within the toolbar, use the `Template` directive. For example, include an [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html) and perform specific Grid actions based on button clicks. When the **ExcelExport** button is clicked, [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) exports the Grid to Excel. When the **PdfExport** button is clicked, [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) exports the Grid to PDF. Likewise, when the Print button is clicked, [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) is triggered to print the Grid.
+To render custom components within the toolbar, use the `Template` directive with [SfButton](https://help.syncfusion.com/cr/blazor/syncfusion.blazor.buttons.sfbutton.html) to perform Grid actions based on clicks. When **ExcelExport** is clicked, [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) exports the Grid to Excel. When **PdfExport** is clicked, [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) exports to PDF. When **Print** is clicked, [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) triggers print.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -479,19 +467,23 @@ To render custom components within the toolbar, use the `Template` directive. Fo
 @using Syncfusion.Blazor.Buttons
 
 <SfGrid DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" AllowPdfExport="true" Height="200" @ref="Grid">
-    <SfToolbar>
-        <ToolbarItems>
-            <ToolbarItem Type="ItemType.Input">
-                <Template>
-                    <div>
-                        <SfButton id="addButton" OnClick="ExcelExport">Excel Export</SfButton>
-                        <SfButton id="addButton" OnClick="PdfExport">Pdf Export</SfButton>
-                        <SfButton id="addButton" OnClick="Print">Print</SfButton>
-                    </div>
-                </Template>
-            </ToolbarItem>
-        </ToolbarItems>
-    </SfToolbar>
+    <GridTemplates>
+        <ToolbarTemplate>
+            <SfToolbar>
+                <ToolbarItems>
+                    <ToolbarItem Type="ItemType.Input">
+                        <Template>
+                            <div>
+                                <SfButton id="excelExportButton" OnClick="ExcelExport">Excel Export</SfButton>
+                                <SfButton id="pdfExportButton" OnClick="PdfExport">Pdf Export</SfButton>
+                                <SfButton id="printButton" OnClick="Print">Print</SfButton>
+                            </div>
+                        </Template>
+                    </ToolbarItem>
+                </ToolbarItems>
+            </SfToolbar>
+        </ToolbarTemplate>
+    </GridTemplates>
     <GridColumns>
         <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
@@ -542,7 +534,6 @@ To render custom components within the toolbar, use the `Template` directive. Fo
         {
             if (Orders.Count() == 0)
             {
-                int code = 10;
                 for (int i = 1; i < 2; i++)
                 {
                     Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Cheval"));
@@ -554,7 +545,6 @@ To render custom components within the toolbar, use the `Template` directive. Fo
                     Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
                     Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
                     Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importado"));
-                    code += 5;
                 }
             }
             return Orders;