Merge pull request #6677 from syncfusion-content/983239-HowTo3

983239: How to folder files updated

Author: thavasianand

blazor/treegrid/how-to/customize-column-styles.md

@@ -1,21 +1,21 @@
 ---
 layout: post
 title: Customize Column Styles in Blazor TreeGrid Component | Syncfusion
-description: Checkout and learn here all about Customize Column Styles in Syncfusion Blazor TreeGrid component and more.
+description: Learn how to apply custom styles to specific columns in the Syncfusion Blazor TreeGrid component and more.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
 # Customize Column Styles in Blazor TreeGrid Component
 
- The appearance of the header and content of a particular column can be customized using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_CustomAttributes) property.
+You can customize the appearance of both the header and content cells of specific columns in the TreeGrid using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_CustomAttributes) property.
 
-To customize the Tree Grid column, follow the given steps:
+Follow the steps below to apply custom styles to a column:
 
 **Step 1**:
 
-Create a CSS class with custom style to override the default style for row cell and header cell.
+Define a CSS class with the desired styles to override the default appearance of the row and header cells.
 
 ```css
 .e-attr{
@@ -28,15 +28,15 @@ Create a CSS class with custom style to override the default style for row cell
 
 **Step 2**:
 
-Add the custom CSS class to the specified column by using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_CustomAttributes) property.
+Apply the custom CSS class to the target column using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_CustomAttributes) property.
 
 {% tabs %}
 
 {% highlight razor %}
 
 @using TreeGridComponent.Data;
-@using  Syncfusion.Blazor.Grids;
-@using  Syncfusion.Blazor.TreeGrid;
+@using Syncfusion.Blazor.Grids;
+@using Syncfusion.Blazor.TreeGrid;
 
 <SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" 
             TreeColumnIndex="1" AllowPaging="true" Height="200">
@@ -59,7 +59,7 @@ Add the custom CSS class to the specified column by using the [CustomAttributes]
 
 
 @code{
-        SfTreeGrid<TreeData> TreeGrid;
+    SfTreeGrid<TreeData> TreeGrid;
 
     public List<TreeData> TreeGridData { get; set; }
 

blazor/treegrid/how-to/customize-icon-column-menu.md

@@ -1,31 +1,33 @@
 ---
 layout: post
 title: Customize column menu icon in Blazor TreeGrid Component | Syncfusion
-description: Checkout and learn here all about how to customize column menu icon in Syncfusion Blazor TreeGrid component and more.
+description: Learn how to override the default column menu icon in the Syncfusion Blazor TreeGrid component using custom CSS.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
 # Customize column menu icon in Blazor TreeGrid Component
 
-The column menu icon can be customized by overriding the default icon class `.e-icons.e-columnmenu` with the `content` property.
+You can customize the column menu icon in the TreeGrid by overriding the default icon class `.e-icons.e-columnmenu` using the `content` property in CSS. This allows you to replace the default glyph with a custom one from the Syncfusion icon font set.
+
+To apply this customization, ensure that the TreeGrid has the column menu feature enabled.
 
 ```css
 .e-grid .e-columnheader .e-icons.e-columnmenu::before {
     content: "\e705";
 }
 ```
 
-This is demonstrated in the below sample code,
+The following example demonstrates how to apply a custom icon:
 
 {% tabs %}
 
 {% highlight razor %}
 
 @using TreeGridComponent.Data;
-@using  Syncfusion.Blazor.Grids;
-@using  Syncfusion.Blazor.TreeGrid;
+@using Syncfusion.Blazor.Grids;
+@using Syncfusion.Blazor.TreeGrid;
 
 <SfTreeGrid height="315" DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true" TreeColumnIndex="1" ShowColumnMenu="true" AllowSorting="true">
     <TreeGridColumns>
@@ -67,7 +69,7 @@ public class WrapData
         public DateTime? StartDate { get; set; }
         public DateTime? EndDate { get; set; }
         public int? Duration { get; set; }
-        public String Progress { get; set; }
+        public string Progress { get; set; }
         public string Priority { get; set; }
         public bool Approved { get; set; }
         public int Resources { get; set; }

blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md

@@ -1,25 +1,25 @@
 ---
 layout: post
-title: Display Custom Tooltip in Blazor Tree Grid Cell | Syncfusion
-description: Learn here all about displaying Custom Tooltip in Tree Grid cell in Syncfusion Blazor TreeGrid component and more.
+title: Display Custom Tooltip in Blazor TreeGrid Cell | Syncfusion
+description: Learn how to display custom tooltips in TreeGrid cells using the Column Template and SfTooltip components in Syncfusion Blazor TreeGrid.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Display Custom Tooltip in Tree Grid cell in Blazor TreeGrid Component
+# Display Custom Tooltip in Blazor TreeGrid cell
 
-The custom tooltip in the Tree Grid column can be displayed using the [Column Template](https://blazor.syncfusion.com/documentation/treegrid/columns/column-template) feature by rendering the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) components inside the template.
+Custom tooltips can be displayed in TreeGrid cells by using the [Column Template](https://blazor.syncfusion.com/documentation/treegrid/columns/column-template) feature. This can be achieved by rendering the [Tooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component inside the column template.
 
-This is demonstrated in the below sample code where the tooltip is rendered for **TaskName** column using [Column Template](https://blazor.syncfusion.com/documentation/treegrid/columns/column-template).
+The following example demonstrates how to render a tooltip for the **TaskName** column using the `SfTooltip` component.
 
 {% 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.Popups;
 
 <SfTreeGrid @ref="TreeGrid" DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="1"

blazor/treegrid/how-to/editing-with-template-column.md

@@ -1,23 +1,25 @@
 ---
 layout: post
-title: Editing with template column in Blazor TreeGrid Component | Syncfusion
-description: Checkout and learn here all about editing with template column in Syncfusion Blazor TreeGrid component and more.
+title: Editing with Template Column in Blazor TreeGrid Component | Syncfusion
+description: Learn how to enable editing for template columns in the Syncfusion Blazor TreeGrid component using the Field property and TreeGridEditSettings.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Editing with template column in Blazor TreeGrid Component
+# Editing Template Column in Syncfusion Blazor TreeGrid Component
 
-A template column value can be edited by defining the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) property for that particular [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component.
+To enable editing for a template column in the TreeGrid, define the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) property for the corresponding [TreeGridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html) component. This ensures that the column is recognized as editable during row editing operations.
+
+The following example demonstrates how to configure a template column for editing:
 
 {% tabs %}
 
 {% highlight razor %}
 
 @using TreeGridComponent.Data;
-@using  Syncfusion.Blazor.Grids;
-@using  Syncfusion.Blazor.TreeGrid;
+@using Syncfusion.Blazor.Grids;
+@using Syncfusion.Blazor.TreeGrid;
 
 <SfTreeGrid DataSource="@TreeGridData" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true"
                 TreeColumnIndex="1" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

blazor/treegrid/how-to/hide-treegrid-header.md

@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Hide Tree Grid Header in Blazor TreeGrid Component | Syncfusion
-description: Checkout and learn here all about hiding Tree Grid Header in Syncfusion Blazor TreeGrid component and more.
+title: Hide TreeGrid Header in Blazor TreeGrid Component | Syncfusion
+description: Learn how to hide the header in the Syncfusion Blazor TreeGrid component using custom styles and more.
 platform: Blazor
-control: Tree Grid
+control: TreeGrid
 documentation: ug
 ---
 
-# Hide Tree Grid Header in Blazor TreeGrid Component
+# Hide TreeGrid Header in Syncfusion Blazor TreeGrid Component
 
- The Tree Grid header can be hidden by applying the below styles to Tree Grid component.
+The TreeGrid header can be hidden by applying custom CSS styles to the component. This approach is useful for presenting a cleaner layout or embedding the TreeGrid within a minimal user interface.
 
 ```html
 <style>
@@ -19,6 +19,11 @@ documentation: ug
 </style>
 ```
 
-N> If you want to hide the header for particular Tree Grid, then apply the above styles to that Tree Grid using the ID (#TreeGrid.e-treegrid .e-gridheader .e-columnheader) property value.
+N> To hide the header for a specific TreeGrid instance, apply the above styles using its unique ID selector. For example:
+```css
+#TreeGrid.e-treegrid .e-gridheader .e-columnheader {
+    display: none;
+}
+```
 
 ![Hiding Header in Blazor TreeGrid](../images/blazor-treegrid-hide-header.PNG)