Merge pull request #6671 from syncfusion-content/983239-HowTo1

983239: How-To files updated in Blazor document

Author: thavasianand

blazor/treegrid/how-to/access-public-methods.md

@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Access public methods in Blazor TreeGrid Component | Syncfusion
-description: Learn here all about accessing public methods in Tree Grid in Syncfusion Blazor TreeGrid component and more.
+title: Access Public Methods in Blazor TreeGrid Component | Syncfusion
+description: Learn how to access and invoke public methods of the Syncfusion Blazor TreeGrid by using a component reference, including a Print example.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Access public methods in Tree Grid in Blazor TreeGrid Component
+# Access Public Methods in Syncfusion Blazor TreeGrid Component
 
-The public methods available in the Tree Grid component can be accessed by using its reference defined in the component initialization.
+Public methods of the TreeGrid component can be accessed by using the component reference defined during initialization.
 
-This is demonstrated in the below sample code where the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PrintAsync) method of the Tree Grid component is invoked on button click using the Tree Grid reference,
+The following example shows how to invoke the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PrintAsync) method on button click using the TreeGrid reference.
 
 {% tabs %}
 
@@ -87,4 +87,4 @@ public class TreeData
 
 {% endtabs %}
 
-N> Similarly all the public methods of the Tree Grid can be invoked. The available public methods can be found in this [link](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html).
+N> All public methods of the TreeGrid can be invoked similarly through the component reference. For the complete list of public methods, see the [TreeGrid public API](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html).

blazor/treegrid/how-to/calculate-column-value-based-on-other-columns.md

@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Calculate column value in Blazor TreeGrid | Syncfusion
-description: Learn here all about how to calculate column value based on other columns in Syncfusion Blazor TreeGrid component and more.
+title: Calculate Column Value in Blazor TreeGrid | Syncfusion
+description: Learn how to calculate column value from other columns in the Syncfusion Blazor TreeGrid using column templates and the row context.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
 # Calculate column value based on other columns in Blazor TreeGrid
 
-The values for a Tree Grid column can be calculated based on other column values by using the **context** parameter in the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component. Inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template), the column values can be accessed using the implicit named parameter **context** and then calculate the values for the new column as required.
+A TreeGrid column value can be calculated from other column values by using the **context** parameter in the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template) of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component. Inside the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Template), access the current row via the implicit context parameter and compute the value for the new column as needed.
 
-This is demonstrated in the following sample code where the value for **Resources** column is calculated based on the values of **Duration** and **Progress** columns.
+The following example calculates the value of the **Resources** column based on the values of the **Duration** and **Progress** columns.
 
 {% tabs %}
 

blazor/treegrid/how-to/change-data-source-dynamically.md

@@ -1,17 +1,17 @@
 ---
 layout: post
-title: Change datasource dynamically in Blazor TreeGrid | Syncfusion
-description: Learn here all about how to change datasource dynamically in Syncfusion Blazor TreeGrid component and more.
+title: Change DataSource Dynamically in Blazor TreeGrid | Syncfusion
+description: Learn how to change the TreeGrid data source dynamically at runtime using a bound property and an external button.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Change datasource dynamically in Blazor TreeGrid Component
+# Change DataSource Dynamically in Syncfusion Blazor TreeGrid
 
-The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) of the Tree Grid component can be changed dynamically through an external button.
+The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) of the TreeGrid component can be changed dynamically using an external button.
 
-This is demonstrated in the below sample code where the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) is dynamically modified using the bounded property.
+The following example demonstrates changing the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_DataSource) at runtime through a bound property.
 
 {% tabs %}
 

blazor/treegrid/how-to/custom-control-in-treegrid-toolbar.md

@@ -1,25 +1,25 @@
 ---
 layout: post
 title: Custom control in Blazor TreeGrid Toolbar | Syncfusion
-description: Learn here all about Custom control in Tree Grid toolbar in Syncfusion Blazor TreeGrid component and more.
+description: Learn how to integrate custom controls like Autocomplete into the Tree Grid toolbar in Syncfusion Blazor TreeGrid component.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Custom control in Tree Grid toolbar in Blazor TreeGrid Component
+# Custom control in Syncfusion Blazor TreeGrid Toolbar
 
-The custom controls can be rendered inside the Tree Grid's toolbar area. This can be achieved by initializing the custom controls within the Template property of the Toolbar component. This toolbar component is defined inside the Tree Grid component.
+You can integrate custom controls within the toolbar area of the Tree Grid component. This is accomplished by initializing the desired control inside the `Template` property of the `Toolbar` component, which is nested within the TreeGrid.
 
-This is demonstrated in the below sample code where Autocomplete component is rendered inside the Tree Grid's toolbar and is used for performing search operation on the Tree Grid.
+The following example demonstrates how to render an `SfAutoComplete` control inside the TreeGrid's toolbar to enable search functionality.
 
 {% tabs %}
 
 {% highlight razor %}
 
 @using TreeGridComponent.Data;
-@using  Syncfusion.Blazor.Grids;
-@using  Syncfusion.Blazor.TreeGrid;
+@using Syncfusion.Blazor.Grids;
+@using Syncfusion.Blazor.TreeGrid;
 @using Syncfusion.Blazor.DropDowns;
 @using Syncfusion.Blazor.Navigations;
 
@@ -118,4 +118,4 @@ public class TreeData
 
 {% endtabs %}
 
-![Custom Control in Blazor TreeGrid Toolbar](../images/blazor-treegrid-custom-control-in-toolbar.gif)
+![Custom Control in Blazor TreeGrid Toolbar](../images/blazor-treegrid-custom-control-in-toolbar.gif)

blazor/treegrid/how-to/custom-toolbar-items-with-text-name-same-as-default-toolbar-items.md

@@ -1,26 +1,27 @@
 ---
 layout: post
 title: Custom toolbar items in Blazor TreeGrid Component | Syncfusion
-description: Learn here all about custom toolbar items with text name same as default toolbar items in Syncfusion Blazor TreeGrid component and more.
+description: Learn how to configure custom toolbar items with identical text to default buttons in Syncfusion Blazor TreeGrid and more.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
 # Custom toolbar items in Blazor TreeGrid Component
 
-The Custom toolbar items can be created with text name same as default toolbar items (Add,Edit,Delete,etc.). But while creating them, they will be considered as default toolbar items which will cause some issues while clicking on it. To overcome this behavior, it is suggested to define the **Id** property for custom toolbar items.
+Custom toolbar items can be created using text labels identical to default toolbar items such as **Add**, **Edit**, or **Delete**. However, when these items are defined without an explicit `Id`, they are treated as default toolbar items, which may lead to unintended behavior—such as being disabled when certain settings are not configured.
 
-This is demonstrated in the below sample code where there are custom toolbar items with text same as **Add** and **Delete** buttons. These toolbar buttons will be enabled only when TreeGridEditSettings is defined in TreeGrid. So custom toolbar will be in disabled state considering it as default toolbar item. That behavior must be overcame by defining the Id property.
+To prevent this issue, it is recommended to define the **Id** property for each custom toolbar item. This ensures that the Tree Grid treats them as distinct from the default toolbar actions.
+
+The following example demonstrates how to define custom toolbar items with the same text as default buttons, and how to handle their click events appropriately.
 
 {% tabs %}
 
 {% highlight razor %}
 
 @using TreeGridComponent.Data;
-@using  Syncfusion.Blazor.Grids;
-@using  Syncfusion.Blazor.TreeGrid;
-
+@using Syncfusion.Blazor.Grids;
+@using Syncfusion.Blazor.TreeGrid;
 @{
     List<Syncfusion.Blazor.Navigations.ItemModel> Toolbaritems = new List<Syncfusion.Blazor.Navigations.ItemModel>();
     Toolbaritems.Add(new Syncfusion.Blazor.Navigations.ItemModel() { Text = "Add", Id = "add", TooltipText = "Add Record", PrefixIcon = "add" });
@@ -32,7 +33,7 @@ This is demonstrated in the below sample code where there are custom toolbar ite
     <TreeGridColumns>
         <TreeGridColumn Field="TaskId" HeaderText="Task ID" IsPrimaryKey="true" Width="70" TextAlign="TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="85"></TreeGridColumn>
-        <TreeGridColumn Field="Duration" HeaderText="Duation" Width="70" TextAlign="TextAlign.Right"></TreeGridColumn>
+        <TreeGridColumn Field="Duration" HeaderText="Duration" Width="70" TextAlign="TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="Progress" HeaderText="Progress" Width="70" TextAlign="TextAlign.Right"></TreeGridColumn>
         <TreeGridColumn Field="Priority" HeaderText="Priority" Width="70"></TreeGridColumn>
     </TreeGridColumns>