From 4fc40a09ad2d48502e06c8eb6dcb885aebc18508 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 15:27:45 +0530 Subject: [PATCH 1/7] 983239: How to folder files updated --- .../treegrid/how-to/customize-column-styles.md | 18 +++++++++--------- .../how-to/customize-icon-column-menu.md | 16 +++++++++------- ...display-custom-tool-tip-in-treegrid-cell.md | 16 ++++++++-------- .../how-to/editing-with-template-column.md | 16 +++++++++------- blazor/treegrid/how-to/hide-treegrid-header.md | 17 +++++++++++------ 5 files changed, 46 insertions(+), 37 deletions(-) diff --git a/blazor/treegrid/how-to/customize-column-styles.md b/blazor/treegrid/how-to/customize-column-styles.md index 2414a3e6e9..5738f48292 100644 --- a/blazor/treegrid/how-to/customize-column-styles.md +++ b/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; @@ -59,7 +59,7 @@ Add the custom CSS class to the specified column by using the [CustomAttributes] @code{ - SfTreeGrid TreeGrid; + SfTreeGrid TreeGrid; public List TreeGridData { get; set; } diff --git a/blazor/treegrid/how-to/customize-icon-column-menu.md b/blazor/treegrid/how-to/customize-icon-column-menu.md index b5c25a7e16..a8334fe9c6 100644 --- a/blazor/treegrid/how-to/customize-icon-column-menu.md +++ b/blazor/treegrid/how-to/customize-icon-column-menu.md @@ -1,15 +1,17 @@ --- 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 { @@ -17,15 +19,15 @@ The column menu icon can be customized by overriding the default icon class `.e- } ``` -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; @@ -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; } diff --git a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md index e77f94a91b..f8692fd183 100644 --- a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md +++ b/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 TreeGrid cell in Syncfusion Blazor TreeGrid Component -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. +You can display custom tooltips in TreeGrid cells using the https://blazor.syncfusion.com/documentation/treegrid/columns/column-template feature by rendering the [Column Template](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component inside the 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; diff --git a/blazor/treegrid/how-to/hide-treegrid-header.md b/blazor/treegrid/how-to/hide-treegrid-header.md index 2f10bcb42d..e5bc3d58c6 100644 --- a/blazor/treegrid/how-to/hide-treegrid-header.md +++ b/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. 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. +You can hide the TreeGrid header by applying custom CSS styles to the component. This approach is useful when you want to present a cleaner layout or embed the Tree rid in a minimal UI. ```html ``` -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) From 3dcb212236556f24e8f252b83e35d94bd21d4218 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 15:59:45 +0530 Subject: [PATCH 2/7] 983239: updated --- .../treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md index f8692fd183..a041a3566b 100644 --- a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md +++ b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md @@ -7,7 +7,7 @@ control: TreeGrid documentation: ug --- -# Display Custom Tooltip in TreeGrid cell in Syncfusion Blazor TreeGrid Component +# Display Custom Tooltip in TreeGrid cell in Blazor TreeGrid Component You can display custom tooltips in TreeGrid cells using the https://blazor.syncfusion.com/documentation/treegrid/columns/column-template feature by rendering the [Column Template](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component inside the template. From fbd6964385b3d2c39736422cf1f80193996ba6a8 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 16:01:20 +0530 Subject: [PATCH 3/7] 983239: updated --- blazor/treegrid/how-to/hide-treegrid-header.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/how-to/hide-treegrid-header.md b/blazor/treegrid/how-to/hide-treegrid-header.md index e5bc3d58c6..7de72cd8b3 100644 --- a/blazor/treegrid/how-to/hide-treegrid-header.md +++ b/blazor/treegrid/how-to/hide-treegrid-header.md @@ -1,7 +1,7 @@ --- layout: post 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. +description: Learn how to hide the header in the Syncfusion Blazor TreeGrid component using custom styles and more. platform: Blazor control: TreeGrid documentation: ug From aa233fa20dd7dac30de6c4131a960f4ef45c1dc1 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Tue, 23 Sep 2025 16:02:11 +0530 Subject: [PATCH 4/7] 983239: updated --- blazor/treegrid/how-to/editing-with-template-column.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/how-to/editing-with-template-column.md b/blazor/treegrid/how-to/editing-with-template-column.md index 8f2fb32b5b..7f79c79207 100644 --- a/blazor/treegrid/how-to/editing-with-template-column.md +++ b/blazor/treegrid/how-to/editing-with-template-column.md @@ -7,7 +7,7 @@ control: TreeGrid documentation: ug --- -# Editing Template Column in Suncfusion Blazor TreeGrid Component +# Editing Template Column in Syncfusion Blazor TreeGrid 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. From f95f6c50c80be39c64642932705f2709d5cc16e4 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Wed, 24 Sep 2025 08:47:36 +0530 Subject: [PATCH 5/7] 983239: updated --- .../treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md index a041a3566b..56b16a1377 100644 --- a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md +++ b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md @@ -7,7 +7,7 @@ control: TreeGrid documentation: ug --- -# Display Custom Tooltip in TreeGrid cell in Blazor TreeGrid Component +# Display Custom Tooltip in Blazor TreeGrid cell You can display custom tooltips in TreeGrid cells using the https://blazor.syncfusion.com/documentation/treegrid/columns/column-template feature by rendering the [Column Template](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component inside the template. From c5cd6489670038787ae175078a1d0dfe8fac0285 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Wed, 24 Sep 2025 08:50:54 +0530 Subject: [PATCH 6/7] 983239: updated --- .../treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md index 56b16a1377..76ecf249d0 100644 --- a/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md +++ b/blazor/treegrid/how-to/display-custom-tool-tip-in-treegrid-cell.md @@ -9,7 +9,7 @@ documentation: ug # Display Custom Tooltip in Blazor TreeGrid cell -You can display custom tooltips in TreeGrid cells using the https://blazor.syncfusion.com/documentation/treegrid/columns/column-template feature by rendering the [Column Template](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component 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. The following example demonstrates how to render a tooltip for the **TaskName** column using the `SfTooltip` component. From 519669d25fb6951131b56f67a32fdcfb1c2590dd Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Wed, 24 Sep 2025 08:52:04 +0530 Subject: [PATCH 7/7] 983239: updated --- blazor/treegrid/how-to/hide-treegrid-header.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/how-to/hide-treegrid-header.md b/blazor/treegrid/how-to/hide-treegrid-header.md index 7de72cd8b3..ac4014cc08 100644 --- a/blazor/treegrid/how-to/hide-treegrid-header.md +++ b/blazor/treegrid/how-to/hide-treegrid-header.md @@ -9,7 +9,7 @@ documentation: ug # Hide TreeGrid Header in Syncfusion Blazor TreeGrid Component -You can hide the TreeGrid header by applying custom CSS styles to the component. This approach is useful when you want to present a cleaner layout or embed the Tree rid in a minimal UI. +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