984345: Updated the UG Samples in Blazor DataGrid

Author: Naveen-Palanivel

blazor/datagrid/adding-header-and-footer.md

@@ -697,7 +697,7 @@ The following example demonstrates how to repeat the column headers on every pag
         {
             PdfExportProperties ExportProperties = new PdfExportProperties();
             ExportProperties.IsRepeatHeader = true; // Repeats the Grid's header on every page in the PDF document.
-            await this.DefaultGrid.PdfExport(ExportProperties);
+            await this.DefaultGrid.ExportToPdfAsync(ExportProperties);
         }
     }
     protected override void OnInitialized()
@@ -760,4 +760,4 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLyXTCdVQgRVfzE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVINuLIyMVDkBoc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

blazor/datagrid/how-to/enable-or-disable-grid.md

@@ -34,7 +34,7 @@ The following example demonstrates how to enable or disable the Grid and its act
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Buttons
 
-<SfButton CssClass="e-flat" @onclick="ToggleGrid">
+<SfButton CssClass="e-flat" onclick="ToggleGrid">
     @(isGridDisabled? "Enable Grid" : "Disable Grid")
 </SfButton>
 

blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md

@@ -7,7 +7,7 @@ control: DataGrid
 documentation: ug
 ---
 
-# Sending context as additional parameters from events in Blazor DataGrid
+# Sending context as additional parameters in Blazor DataGrid events
 
 The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid offers flexibility to pass additional context information during events. This capability is especially useful for dynamically updating Grid data based on interactions with other components, enabling seamless, real-time data modifications within the Grid.
 
@@ -51,7 +51,7 @@ Height="600" @ref="Grid">
           <SfComboBox TValue="string" TItem="Customer" DataSource="@Customers" @bind-Value="order.CustomerID"
           Placeholder="Select Customer" FloatLabelType="FloatLabelType.Always" AllowFiltering="true">
             <ComboBoxFieldSettings Value="CustomerID" Text="CustomerName"></ComboBoxFieldSettings>
-            <ComboBoxEvents TValue="string" TItem="Customer" ValueChange="@(args => OnCustomerChange(args, order)" >
+           <ComboBoxEvents TValue="string" TItem="Customer" ValueChange="args => OnCustomerChange(args, order)"></ComboBoxEvents>
           </SfComboBox>
         </div>
       </div>

blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md

@@ -7,7 +7,7 @@ control: DataGrid
 documentation: ug
 ---
 
-# How to use radio button instead of checkbox for row selection in Blazor DataGrid
+# How to use radio button instead of checkbox in Blazor DataGrid
 
 By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides checkbox selection to allow multiple row selection. If there is a need to allow only one row to be selected at a time, a radio button can be used instead of checkbox selection. This can be achieved by using the column [Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature to render a [SfRadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) in each row. The radio button can be linked to a unique value from the data source, such as the primary key field.
 
@@ -29,14 +29,14 @@ The following example demonstrates how to handle row selection in the Grid using
     <GridSelectionSettings CheckboxOnly="true"></GridSelectionSettings>
     <GridColumns>
         <GridColumn>
-            <Template>
+             <Template>
                 @{
                     var PrimaryVal = (context as Order);
-                    <SfRadioButton @ref="RadioButtonInstance" Name="RadioBtn "Value="@PrimaryVal.CustomerID" ValueChange="ValueChange" TChecked="string"></SfRadioButton>
+                    <SfRadioButton @ref="RadioButtonInstance" Name="RadioBtn" Value="@PrimaryVal.CustomerID" ValueChange="ValueChange" TChecked="string"></SfRadioButton>
                 }
             </Template>
         </GridColumn>
-        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name"  IsPrimaryKey="true" >
+        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name"  IsPrimaryKey="true">
         </GridColumn>
         <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" Width="110"></GridColumn>
         <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2"></GridColumn>

blazor/datagrid/paging.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Paging in Blazor DataGrid
 
-[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfsion Blazor DataGrid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets.
+[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfusion Blazor DataGrid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets.
 
 To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the Grid. When paging is enabled, a pager rendered at the bottom of the Grid, allowing you to navigate through different pages of data.
 
@@ -450,6 +450,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag
 {% highlight razor tabtitle="Index.razor" %}
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Inputs
+@using Syncfusion.Blazor.Navigations
 
 <SfGrid DataSource="@GridData" @ref="Grid" AllowPaging="true">
       <GridPageSettings PageSize="@pageSize">
@@ -469,6 +470,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag
                         <span> of @totalPages pages (@GridData.Count items)</span>
                     </div>
                 </div>
+             </div>
             }
         </Template>
     </GridPageSettings>

blazor/datagrid/style-and-appearance/editing.md

@@ -1,13 +1,13 @@
 ---
 layout: post
 title: Editing customization in DataGrid | Syncfusion
-description: Learn here all about editing in Syncfusion Blazor DataGrid and more.
+description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details.
 platform: Blazor
 control: DataGrid
 documentation: ug
 ---
 
-# Editing in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid
+# Editing customization in Syncfusion Blazor DataGrid
 
 You can customize the appearance of editing-related elements in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements.
 
@@ -50,7 +50,7 @@ In this example, the **.e-gridform** class represents the editing form, and the
     <GridPageSettings PageSize="8"></GridPageSettings>
     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
     <GridColumns>
-        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
         <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>
@@ -126,7 +126,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLStyZhJXEhbeSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customizing the edit dialog header element
 
@@ -152,7 +152,7 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th
     <GridPageSettings PageSize="8"></GridPageSettings>
     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="Syncfusion.Blazor.Grids.EditMode.Dialog"></GridEditSettings>
     <GridColumns>
-        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
         <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>
@@ -224,7 +224,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDretyNVJZGMwDNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customizing the command column buttons
 
@@ -254,7 +254,7 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class
     <GridPageSettings PageSize="8"></GridPageSettings>
     <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>
     <GridColumns>
-        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
+        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="140"></GridColumn>
         <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="120"></GridColumn>
         <GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="100"></GridColumn>
@@ -337,5 +337,4 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrItotrzWzFhlUN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

blazor/datagrid/template-pdf-export.md

@@ -353,17 +353,21 @@ In the following example:
         <GridColumn Field=@nameof(ProductData.Status) HeaderText="Status" Width="180"></GridColumn>
     </GridColumns>
 </SfGrid>
-<style type="text/css" class="cssStyles">.detailtable td {
-  font-size: 13px;
-  padding: 4px;
-  max-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-weight: normal;
-}
 
-</style>@code {
+<style type="text/css" class="cssStyles">
+    .detailtable td {
+        font-size: 13px;
+        padding: 4px;
+        max-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-weight: normal;
+    }
+
+</style>
+
+@code {
 
   SfGrid<ProductData>DefaultGrid;
 

blazor/datagrid/tool-bar.md

@@ -120,28 +120,28 @@ 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);
         }
 
     }
-
+    
     public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
     {
         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();
         }
     }
 }

blazor/datagrid/toolbar-items.md

@@ -323,11 +323,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,7 +379,7 @@ 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
 
@@ -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.ExpandAllGroupAsync();
         }
         if (args.Item.Text == "Collapse all")
         {
-            await this.Grid.GroupCollapseAll();
+            await this.Grid.CollapseAllGroupAsync();
         }
     }
 }
@@ -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();
         }
     }
 
@@ -674,26 +674,41 @@ You can customize the toolbar items tooltip text by adding toolbar items externa
 @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>
         <GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
         <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
     </GridColumns>
 </SfGrid>
-
 @code {
     private SfGrid<OrderData> Grid;
-
     public List<OrderData> Orders { get; set; }
     private List<object> ToolbarItems = new List<object>() {
         new ItemModel() { Text = "Excel",TooltipText="Export to Excel", PrefixIcon = "e-excelexport", Id = "Grid_excelexport"}, //Here Grid is SfGrid ID.
         new ItemModel(){ Text = "Pdf",TooltipText="Export to PDF", PrefixIcon= "e-pdfexport", Id="Grid_pdfexport"},
         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 +761,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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVIiXZMiFpezqWu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}