Merge pull request #6637 from syncfusion-content/983239-Columns

983239: Columns Updated

Author: thavasianand

blazor/treegrid/columns/column-chooser.md

@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Column Chooser in Blazor Tree Grid Component | Syncfusion
-description: Checkout and learn here all about column chooser in Syncfusion Blazor Tree Grid component and much more details.
+title: Column Chooser in Blazor TreeGrid Component | Syncfusion
+description: Checkout and learn here all about column chooser in Syncfusion Blazor TreeGrid component and much more details.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Column Chooser in Blazor Tree Grid Component
+# Column Chooser in Blazor TreeGrid Component
 
-The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnChooser.html) as true.
+The column chooser provides options to dynamically show or hide columns at runtime. Enable it by setting the [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnChooser.html) property to true.
 
 {% tabs %}
 
@@ -78,11 +78,11 @@ public class TreeData
 
 ![Show or Hide Columns in Blazor TreeGrid](../images/blazor-treegrid-show-hide-column.png)
 
-N> The column names can be hidden in the column chooser by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
+N> Specific columns can be excluded from the column chooser by setting the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_ShowInColumnChooser) property to false on the corresponding column.
 
 ## Open column chooser by external button
 
-The column chooser has options to show or hide columns dynamically. It can be enabled by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) as true.
+Open the column chooser programmatically, for example from an external button, by invoking the `OpenColumnChooser` method on the TreeGrid instance. Ensure [ShowColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnChooser.html) is enabled.
 
 {% tabs %}
 
@@ -157,17 +157,17 @@ public class TreeData
 
 {% endtabs %}
 
-![Opening Column Chooser in Blazor Tree Grid](../images/blazor-treegrid-open-column-chooser.png)
+![Opening Column Chooser in Blazor TreeGrid](../images/blazor-treegrid-open-column-chooser.png)
 
-N> The column names in column chooser can be hidden by defining the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowInColumnChooser.html) property as false.
+N> Specific columns can be excluded from the column chooser by setting the [ShowInColumnChooser](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn~ShowInColumnChooser.html) property to false on the corresponding column.
 
 ## Template support in column chooser
 
-Template can be rendered in column chooser of tree grid by customizing the column chooser using **Template** and **FooterTemplate** of the [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) Component.
+Render a custom template in the column chooser by configuring the **Template** and **FooterTemplate** of the [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) component.
 
-Below example demonstrates simple column chooser template using [TreeGridColumnChooserItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserItem.html) inside the [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) Component.
+The following example demonstrates a simple column chooser template using [TreeGridColumnChooserItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserItem.html) within [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html).
 
-`ColumnChooserTemplateContext` is accessible inside the `Template` from which we can access column details inside `Template` and handle template rendering of column chooser.
+Use `ColumnChooserTemplateContext` inside the `Template` to access column details and control template rendering of the column chooser.
 
 {% tabs %}
 
@@ -259,11 +259,11 @@ namespace TreeGridComponent.Data
 
 {% endtabs %}
 
-![Column Chooser Template with Blazor Tree Grid](../images/blazor-treegrid-column-chooser-template.png)
+![Column Chooser Template with Blazor TreeGrid](../images/blazor-treegrid-column-chooser-template.png)
 
 ### Custom component in column chooser template
 
-In below example, we have rendered ListView as custom component inside the Template of [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) in tree grid. Inside the custom component, we have added image in ListView Template.
+In the following example, a ListView is rendered as a custom component inside the `Template` of [TreeGridColumnChooserSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserSettings.html) in the TreeGrid. Inside the custom component, an image is added in the ListView template.
 
 {% tabs %}
 
@@ -486,11 +486,11 @@ namespace TreeGridComponent.Data
 
 The following output is displayed as a result of the above code example.
 
-![Column Chooser Template with Blazor Tree Grid](../images/blazor-treegrid-column-with-chooser-template.png)
+![Column Chooser Template with Blazor TreeGrid](../images/blazor-treegrid-column-with-chooser-template.png)
 
 ### Column Chooser with group template
 
-We can also group the columns inside the column chooser template with the help of Group Template. To group columns we need to wrap [TreeGridColumnChooserItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserItem.html) inside [TreeGridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserItemGroup.html)  as shown in the below example code.
+Columns can also be grouped inside the column chooser template using a group template. To group columns, wrap [TreeGridColumnChooserItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserItem.html) inside [TreeGridColumnChooserItemGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumnChooserItemGroup.html) as shown in the following example.
 
 {% tabs %}
 
@@ -591,4 +591,7 @@ namespace TreeGridComponent.Data
 
 The following output is displayed as a result of the above code example.
 
-![Column Chooser with Group in Blazor Tree Grid](../images/blazor-treegrid-column-chooser-group-template.png)
+
+![Column Chooser with Group in Blazor TreeGrid](../images/blazor-treegrid-column-chooser-group-template.png)
+
+

blazor/treegrid/columns/column-menu.md

@@ -1,25 +1,25 @@
 ---
 layout: post
-title: Column Menu in Blazor Tree Grid Component | Syncfusion
-description: Checkout here and learn more details about the column menu in the Syncfusion Blazor Tree Grid component.
+title: Column Menu in Blazor TreeGrid Component | Syncfusion
+description: Checkout here and learn more details about the column menu in the Syncfusion Blazor TreeGrid component.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Column menu in Blazor Tree Grid Component
+# Column menu in Blazor TreeGrid Component
 
-The column menu has options to integrate features like sorting, filtering, and autofit. It shows a menu with the integrated feature when users click on an icon in the column header. To enable column menu, define the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property as true.
+The column menu provides quick access to features such as sorting, filtering, and auto-fit. It appears when users click the menu icon in a column header. To enable the column menu, set the [ShowColumnMenu](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.SfTreeGrid~ShowColumnMenu.html) property to true. Menu items are shown only when the corresponding feature is enabled (for example, AllowSorting, AllowFiltering, or AllowResizing).
 
 The default items are displayed in the following table.
 
 | Item | Description |
 |-----|-----|
 | **SortAscending** | Sort the current column in ascending order. |
 | **SortDescending** | Sort the current column in descending order. |
-| **AutoFit** | Auto fit the current column. |
-| **AutoFitAll** | Auto fit all columns. |
-| **Filter** | Show the filter option as given in **FilterSettings.Type** |
+| **AutoFit** | Auto-fit the current column. |
+| **AutoFitAll** | Auto-fit all columns. |
+| **Filter** | Shows the filter UI as configured in **FilterSettings.Type**. |
 
 {% tabs %}
 
@@ -85,6 +85,6 @@ public class TreeData
 
 {% endtabs %}
 
-![Blazor Tree Grid with Column Menu](../images/blazor-treegrid-column-menu.png)
+![Blazor TreeGrid with Column Menu](../images/blazor-treegrid-column-menu.png)
 
 N> The column menu can be disabled for a particular column by defining the `ShowColumnMenu` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper as false.

blazor/treegrid/columns/column-reorder.md

@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Column Reorder in Blazor Tree Grid Component | Syncfusion
-description: Checkout here and learn more details about the column reorder in the Syncfusion Blazor Tree Grid component.
+title: Column Reorder in Blazor TreeGrid Component | Syncfusion
+description: Checkout here and learn more details about the column reorder in the Syncfusion Blazor TreeGrid component.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Column Reorder in Blazor Tree Grid Component
+# Column Reorder in Blazor TreeGrid Component
 
-Reordering can be done by drag and drop of a particular column header from one index to another index within the tree grid. To enable reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowReordering) property to true.
+Reordering can be performed by dragging a column header from one index to another within the TreeGrid. To enable reordering, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowReordering) property to true.
 
 {% tabs %}
 
@@ -73,13 +73,13 @@ public class TreeData
 
 {% endtabs %}
 
-![Reordering Columns in Blazor Tree Grid](../images/blazor-treegrid-column-reorder.gif)
+![Reordering Columns in Blazor TreeGrid](../images/blazor-treegrid-column-reorder.gif)
 
 N> You can disable reordering a particular column by setting the `AllowReordering` property of the [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) tag helper to false.
 
 ## Reorder single column
 
-Tree Grid has option to reorder a column either by interaction or by using the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method. In the following sample, **TaskName** column is reordered to third column position by using the method on button click.
+TreeGrid supports reordering a column either through interaction or programmatically using the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method. In the following sample, the **TaskName** column is moved to the third position by invoking the method on a button click.
 
 {% tabs %}
 
@@ -150,14 +150,14 @@ public class TreeData
 
 {% endtabs %}
 
-The following GIF represents the Reordering column **TaskName** by using the method,
-![Reordering Single Column in Blazor Tree Grid](../images/blazor-treegrid-reorder-single-column.gif)
+The following GIF represents reordering the **TaskName** column using the method.
+![Reordering Single Column in Blazor TreeGrid](../images/blazor-treegrid-reorder-single-column.gif)
 
 ## Reorder multiple columns
 
-User can reorder a single column at a time by Interaction. Sometimes, you need to reorder multiple columns at the same time by passing list of columns programmatically in the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method.
+Users can reorder a single column at a time by interaction. To reorder multiple columns at once, pass a list of column field names programmatically to the [ReorderColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ReorderColumnsAsync_System_Collections_Generic_List_System_String__System_String_) method.
 
-In the following sample, **TaskName** and **Duration** columns are reordered to the last column position using this method on the click button.
+In the following sample, the **TaskName** and **Duration** columns are moved to the last position using this method on a button click.
 
 {% tabs %}
 
@@ -228,4 +228,6 @@ public class TreeData
 
 {% endtabs %}
 
-![Reordering Multiple Columns in Blazor Tree Grid](../images/blazor-treegrid-reorder-multiple-columns.gif)
+
+![Reordering Multiple Columns in Blazor TreeGrid](../images/blazor-treegrid-reorder-multiple-columns.gif)
+