Merge pull request #6019 from syncfusion-content/956732-review-topics

956732: Updated into latest version

Author: farveensulthana

blazor/datagrid/aggregates.md

@@ -7,13 +7,13 @@ control: DataGrid
 documentation: ug
 ---
 
-# Aggregates in Blazor DataGrid Component
+# Aggregates in Blazor DataGrid
 
-The Aggregates feature in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid component allows you to display aggregate values in the footer, group footer, and group caption of the grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field)  and  [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type).
+The Aggregates feature in the Syncfusion Blazor DataGrid allows you to display aggregate values in the footer, group footer, and group caption of the Grid. With this feature, you can easily perform calculations on specific columns and show summary information.This feature can be configured using the **GridAggregates** component.To represent an aggregate column, you need to specify the minimum required properties, such as [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Field) and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type).
 
 **Displaying aggregate values**
 
-By default, the aggregate values are displayed in the footer, group, and caption cells of the grid. However, you can choose to display the aggregate value in any of these cells by using the following properties:
+By default, the aggregate values are displayed in the footer, group, and caption cells of the Grid. However, you can choose to display the aggregate value in any of these cells by using the following properties:
 
 * [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate): Use this property to display the aggregate value in the footer cell. You can define a custom template to format the aggregate value as per your requirements. 
 
@@ -127,12 +127,12 @@ By default, the aggregate values are displayed in the footer, group, and caption
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrACXUDUeyrfGOs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-> * When using local data, the total summary is calculated based on the entire dataset available in the grid. The aggregate values will reflect calculations across all the rows in the grid.
+> * When using local data, the total summary is calculated based on the entire dataset available in the Grid. The aggregate values will reflect calculations across all the rows in the Grid.
 > * When working with remote data, the total summary is calculated based on the current page records. This means that if you have enabled pagination and are displaying data in pages, the aggregate values in the footer will represent calculations only for the visible page.
 
 ## Built-in aggregate types
 
-The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid component provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column.
+The Syncfusion Blazor DataGrid provides several built-in aggregate types that can be specified in the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to configure an aggregate column.
 
 The available built-in aggregate types are :
 
@@ -145,7 +145,7 @@ The available built-in aggregate types are :
 * **TrueCount:** Counts the number of true values in the column.
 * **FalseCount:** Counts the number of false values in the column.
 
-Here is an example that demonstrates how to use built-in aggregates types in the Syncfusion<sup style="font-size:70%">&reg;</sup> Grid:
+Here is an example that demonstrates how to use built-in aggregates types in the Grid:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}

blazor/datagrid/custom-aggregate.md

@@ -7,9 +7,9 @@ control: DataGrid
 documentation: ug
 ---
 
-# Custom aggregate in Blazor Grid component
+# Custom aggregate in Blazor DataGrid
 
-The custom aggregate feature in Syncfusion’s Blazor Grid component allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below:
+The custom aggregate feature in Syncfusion’s Blazor DataGrid allows you to calculate aggregate values using your own aggregate function. This feature can be useful in scenarios where the built-in aggregate functions do not meet your specific requirements. To use the custom aggregate option, follow the steps below:
 
 * Set the **AggregateType** as Custom in **GridAggregateColumn** component.
 
@@ -21,7 +21,7 @@ The custom aggregate function will be invoked differently for total and group ag
 
 **Group Aggregation:** The custom aggregate function will be called with the current group details and the aggregate column object as arguments.
 
-Here’s an example that demonstrates how to use the custom aggregate feature in the Blazor Grid component:
+Here’s an example that demonstrates how to use the custom aggregate feature in the Grid:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -119,7 +119,7 @@ Here’s an example that demonstrates how to use the custom aggregate feature in
 
 You can calculate the count of distinct values in an aggregate row by using custom aggregate functions. By specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) as **Custom** and providing a custom aggregate function in the `CustomAggregate` property, you can achieve this behavior.
 
-Here’s an example that demonstrates how to show the count of distinct values for the **ShipCountry** column using a custom aggregate.
+Here’s an example that demonstrates how to show the count of distinct values for the **ShipCountry** column using a custom aggregate:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -150,7 +150,6 @@ Here’s an example that demonstrates how to show the count of distinct values f
     </GridColumns>
 </SfGrid>
 
-
 @code {
     private SfGrid<OrderData> Grid;
     public List<OrderData> Orders { get; set; }
@@ -216,5 +215,4 @@ Here’s an example that demonstrates how to show the count of distinct values f
 
 > To display the aggregate value of the current column in another column, you can use the [ColumnName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_ColumnName) property. If the `ColumnName` property is not defined, the field name value will be assigned to the `ColumnName` property.
 
-
-> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.
+> You can refer to the [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Syncfusion Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap4) to understand how to present and manipulate data.

blazor/datagrid/custom-toolbar.md

@@ -6,13 +6,13 @@ platform: Blazor
 control: DataGrid
 documentation: ug
 ---
-# Custom toolbar in Blazor DataGrid component
+# Custom toolbar in Blazor DataGrid
 
-Custom toolbar in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid 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 component.
+Custom toolbar in Syncfusion 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.
 
 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.
 
-The following example demonstrates, how to render the custom Toolbar using `Template`.
+The following example demonstrates, how to render the 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 Grid allows easily render an image along with text in the Toolbar of the DataGrid. This feature enhances the visual presentation of the Grid, providing additional context and improving the overall experience.
+Render an image with text in custom Toolbar in Syncfusion 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.
 
 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.
 
-The following example demonstrates how to render an image in the Toolbar of the grid using `Template`.
+The following example demonstrates how to render an image in the Toolbar of the Grid using `Template`:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -224,11 +224,11 @@ The following example demonstrates how to render an image in the Toolbar of the
 
 ## Render SfDropDownList in Custom Toolbar
 
-Render SfDropDownList in Custom Toolbar in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Grid enables you to extend the functionality of the Custom Toolbar by incorporating a [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html) component, allowing you to perform various actions within the DataGrid based on their selections.
+Render **SfDropDownList** in Custom Toolbar in Syncfusion 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.
 
-This can be achieved by utilizing the `Template`. The example below demonstrates how to render the **SFDropDownList** component 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 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.
 
-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 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.
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}
@@ -268,10 +268,10 @@ In the **OnChange** method, the text of the selected item is checked to determin
         public string text { get; set; }
     }
     List<Select> LocalData = new List<Select>
-{
-            new Select() { text = "Edit"},
-            new Select() { text = "Delete"},
-            new Select() { text = "Update"},
+    {
+        new Select() { text = "Edit"},
+        new Select() { text = "Delete"},
+        new Select() { text = "Update"},
     };
 
     protected override void OnInitialized()
@@ -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 Grid 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 using the Toolbar Template in the Syncfusion 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.
 
-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 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.
 
-The following example demonstrates how to render a **SfButton** component in the Toolbar using `Template` and perform grid action based on the respected button click.
+The following example demonstrates how to render a **SfButton** in the Toolbar using `Template` and perform Grid action based on the respected button click:
 
 {% tabs %}
 {% highlight razor tabtitle="Index.razor" %}