From caa74d8e13f7cf95b12367be5fb30d90d6fa286f Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Fri, 15 May 2026 20:37:55 +0530 Subject: [PATCH 01/12] 1026594: document updated --- blazor/treegrid/getting-started-webapp.md | 158 +++--------------- .../treegrid/getting-started-with-maui-app.md | 153 +++-------------- .../getting-started-with-server-app.md | 148 +++------------- blazor/treegrid/getting-started.md | 150 +++-------------- 4 files changed, 85 insertions(+), 524 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 463451d672..2a8b2f3bb5 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -147,65 +147,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. - -## Add Syncfusion® Blazor TreeGrid component - -Add the Syncfusion Blazor TreeGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). - -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. - -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - -@code -{ - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); - } -} - -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} - -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Defining columns @@ -253,9 +195,6 @@ Let’s check the properties used here: TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } @@ -264,88 +203,39 @@ Let’s check the properties used here: In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. -## Enable paging +## Add Syncfusion® Blazor TreeGrid component -The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property. +Add the Syncfusion Blazor TreeGrid component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). -In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property. +N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); +{% highlight razor %} - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); - } -} +@* desired render mode define here *@ +@rendermode InteractiveAuto {% endhighlight %} {% endtabs %} -## Enable sorting - -The sorting feature enables to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`. - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeGrid - - + - - - - - + + -@code{ - +@code +{ public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } public int? ParentId { get; set; } } @@ -353,22 +243,23 @@ The sorting feature enables to order the records. It can be enabled by setting t protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.webp)" %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} + +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). ## Handling exceptions @@ -449,9 +340,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md index 970b3cca38..c692045cb9 100644 --- a/blazor/treegrid/getting-started-with-maui-app.md +++ b/blazor/treegrid/getting-started-with-maui-app.md @@ -116,64 +116,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. - -## Add Syncfusion® Blazor TreeGrid component - -Add the Syncfusion® Blazor TreeGrid component in the **~/Pages/Home.razor** file. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - -@code -{ - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); - } -} - -{% endhighlight %} -{% endtabs %} - -### How to run the sample on Windows - -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. - -![Blazor TreeGrid Component](images/blazor-treegrid-maui-app.webp) - -### How to run the sample on Android - -To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps: - -Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. - -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). - -![Blazor TreeGrid Component](images/blazor-treegrid-component.webp) +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Defining columns @@ -232,37 +175,28 @@ Let’s check the properties used here: In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. -## Enable paging - -The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property. +## Add Syncfusion® Blazor TreeGrid component -In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property. +Add the Syncfusion® Blazor TreeGrid component in the **~/Pages/Home.razor** file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeGrid - - + - - - - - + + -@code{ - +@code +{ public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } public int? ParentId { get; set; } } @@ -270,73 +204,33 @@ In root-level paging mode, paging is based on the root-level rows only, i.e., it protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); } } {% endhighlight %} {% endtabs %} -## Enable sorting - -The sorting feature enables to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid +### How to run the sample on Windows - - - - - - - - - - +Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. -@code{ +![Blazor TreeGrid Component](images/blazor-treegrid-maui-app.webp) - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } +### How to run the sample on Android - public List TreeData = new List(); +To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps: - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); - } -} +Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -{% endhighlight %} -{% endtabs %} +N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -![Blazor TreeGrid](images/blazor-treegrid.webp) +![Blazor TreeGrid Component](images/blazor-treegrid-component.webp) ## Handling exceptions @@ -417,9 +311,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index d85ec69f82..17d820854c 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -141,63 +141,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. - -## Add Syncfusion® Blazor TreeGrid component - -Add the Syncfusion® Blazor TreeGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. - -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. - -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveServer - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - -@code -{ - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); - } -} - -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in your default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Defining columns @@ -256,88 +200,39 @@ Let’s check the properties used here: In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. -## Enable paging +## Add Syncfusion® Blazor TreeGrid component -The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property. +Add the Syncfusion® Blazor TreeGrid component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. -In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property. +N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); +{% highlight razor %} - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); - } -} +@* desired render mode define here *@ +@rendermode InteractiveServer {% endhighlight %} {% endtabs %} -## Enable sorting - -The sorting feature enables to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`. - {% tabs %} {% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeGrid - - + - - - - - + + -@code{ - +@code +{ public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } public int? ParentId { get; set; } } @@ -345,22 +240,21 @@ The sorting feature enables to order the records. It can be enabled by setting t protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.webp)" %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in your default web browser. + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} ## Handling exceptions diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 6946ab21cb..6261fb840b 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -141,52 +141,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. - -## Add Syncfusion® Blazor TreeGrid component - -Add the Syncfusion® Blazor TreeGrid component in the **~/Pages/Index.razor** file. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - -@code -{ - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); - } -} - -{% endhighlight %} -{% endtabs %} - -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. ## Defining columns @@ -230,13 +185,9 @@ Let’s check the properties used here: { TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = null, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = 3 , Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 3, Priority = "Normal" }); } } @@ -245,88 +196,28 @@ Let’s check the properties used here: In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ParentIdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ParentIdMapping) properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. -## Enable paging - -The paging feature enables users to view the tree grid record in a paged view. It can be enabled by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowPaging) property to true. The pager can be customized using the [PageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_PageSettings) property. - -In root-level paging mode, paging is based on the root-level rows only, i.e., it ignores the child row count and it can be enabled by using the [PageSettings.PageSizeMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridPageSettings.html#Syncfusion_Blazor_TreeGrid_TreeGridPageSettings_PageSizeMode) property. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); - } -} - -{% endhighlight %} -{% endtabs %} - -## Enable sorting +## Add Syncfusion® Blazor TreeGrid component -The sorting feature enables to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_AllowSorting) property to `true`. +Add the Syncfusion® Blazor TreeGrid component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.TreeGrid - - + - - - - - + + -@code{ - +@code +{ public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } public int? ParentId { get; set; } } @@ -334,24 +225,21 @@ The sorting feature enables to order the records. It can be enabled by setting t protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); } } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.webp)" %} +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} ## Handling exceptions From 4b7f79e765065acf9f46e40e91659aece8259a15 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Fri, 15 May 2026 20:45:09 +0530 Subject: [PATCH 02/12] 1026594: data added --- blazor/treegrid/getting-started-webapp.md | 3 +++ blazor/treegrid/getting-started-with-maui-app.md | 3 +++ 2 files changed, 6 insertions(+) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 2a8b2f3bb5..1716d6efce 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -340,6 +340,9 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md index c692045cb9..0a9921d519 100644 --- a/blazor/treegrid/getting-started-with-maui-app.md +++ b/blazor/treegrid/getting-started-with-maui-app.md @@ -311,6 +311,9 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } From b8ed6017e08d7a9f96b530f3ca6923d5f74d1ee5 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Fri, 15 May 2026 20:49:38 +0530 Subject: [PATCH 03/12] 1026594: style link added --- blazor/treegrid/getting-started-webapp.md | 2 +- blazor/treegrid/getting-started-with-maui-app.md | 2 +- blazor/treegrid/getting-started-with-server-app.md | 2 +- blazor/treegrid/getting-started.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 1716d6efce..d5d698dc74 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -147,7 +147,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. ## Defining columns diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md index 0a9921d519..196ddc9856 100644 --- a/blazor/treegrid/getting-started-with-maui-app.md +++ b/blazor/treegrid/getting-started-with-maui-app.md @@ -116,7 +116,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. ## Defining columns diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index 17d820854c..a2c215a642 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -141,7 +141,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. ## Defining columns diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 6261fb840b..e26a586c96 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -141,7 +141,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/style-and-appearance) topic for customizing the DataGrid appearance and styling options. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. ## Defining columns From b6ed1c5dde3c881830ea994edcf4b30592846394 Mon Sep 17 00:00:00 2001 From: Sanjai-SF5070 Date: Mon, 18 May 2026 13:26:16 +0530 Subject: [PATCH 04/12] 1026594: Updated preview sample --- blazor/treegrid/getting-started-webapp.md | 2 +- blazor/treegrid/getting-started-with-server-app.md | 2 +- blazor/treegrid/getting-started.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index d5d698dc74..afd1ab40e2 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -257,7 +257,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdjSMbVQdpYYAf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index a2c215a642..39e0c85fa0 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -254,7 +254,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdjSMbVQdpYYAf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} ## Handling exceptions diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index e26a586c96..ae996718da 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -239,7 +239,7 @@ Add the Syncfusion® Blazor TreeGrid compone * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdjSMbVQdpYYAf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} ## Handling exceptions From 20957e7994aacf4bc76f100b8af18805799979c7 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Mon, 18 May 2026 21:13:52 +0530 Subject: [PATCH 05/12] 1026594: removed define columns --- blazor/treegrid/getting-started-webapp.md | 53 ------------------ .../treegrid/getting-started-with-maui-app.md | 56 ------------------- .../getting-started-with-server-app.md | 56 ------------------- blazor/treegrid/getting-started.md | 52 ----------------- 4 files changed, 217 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index afd1ab40e2..ce8609b6ff 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -149,59 +149,6 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. -## Defining columns - -The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns. - -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource has been added. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns has been added. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - } -} - -{% endhighlight %} -{% endtabs %} - -In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. ## Add Syncfusion® Blazor TreeGrid component diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md index 196ddc9856..095693ddf5 100644 --- a/blazor/treegrid/getting-started-with-maui-app.md +++ b/blazor/treegrid/getting-started-with-maui-app.md @@ -118,62 +118,6 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. -## Defining columns - -The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns. - -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource is been added. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns is been added. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); - } -} - -{% endhighlight %} -{% endtabs %} - -In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. ## Add Syncfusion® Blazor TreeGrid component diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index 39e0c85fa0..a4b720b32f 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -143,62 +143,6 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. -## Defining columns - -The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns. - -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource is been added. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns is been added. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*. - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); - } -} - -{% endhighlight %} -{% endtabs %} - -In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the `IdMapping` and `ParentIdMapping` properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. ## Add Syncfusion® Blazor TreeGrid component diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index ae996718da..84e9933598 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -143,58 +143,6 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.Refer to the [Style and Appearance](https://blazor.syncfusion.com/documentation/treegrid/custom-style) topic for customizing the DataGrid appearance and styling options. -## Defining columns - -The Tree Grid has an option to define columns using the [TreeGridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumns.html) directive. In the `TreeGridColumn` directive there are properties to customize columns. - -Let’s check the properties used here: -* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_Field) to map with a property name in datasource is been added. -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_HeaderText) to change the title of columns is been added. -* [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.TreeGridColumn.html#Syncfusion_Blazor_TreeGrid_TreeGridColumn_TextAlign) to change the alignment of columns is been used. By default, columns will be left aligned. To change columns to right align, define **TextAlign** as *Right*. - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.TreeGrid - - - - - - - - - - - -@code{ - - public class BusinessObject - { - public int TaskId { get; set; } - public string TaskName { get; set; } - public int Duration { get; set; } - public int Progress { get; set; } - public string Priority { get; set; } - public int? ParentId { get; set; } - } - - public List TreeData = new List(); - - protected override void OnInitialized() - { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", Duration = 5, Progress = 65, ParentId = null, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", Duration = 6, Progress = 77, ParentId = 3 , Priority = "Low" }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", Duration = 9, Progress = 25, ParentId = 3, Priority = "Normal" }); - } -} - -{% endhighlight %} -{% endtabs %} - -In the above code example, the [Self-Referential](https://blazor.syncfusion.com/documentation/treegrid/data-binding#self-referential-data-bindingflat-data) data binding is represented in which the [IdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_IdMapping) and [ParentIdMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ParentIdMapping) properties denotes the hierarchy relationship; whereas in [Hierarchical](https://blazor.syncfusion.com/documentation/treegrid/data-binding#hierarchy-data-binding) data binding [ChildMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeGrid.SfTreeGrid-1.html#Syncfusion_Blazor_TreeGrid_SfTreeGrid_1_ChildMapping) denotes the hierarchy relationship. ## Add Syncfusion® Blazor TreeGrid component From a40446901aeba3d4ebd96e2f75a1a04b055a6df0 Mon Sep 17 00:00:00 2001 From: dhanushaSF4765 Date: Mon, 18 May 2026 21:16:09 +0530 Subject: [PATCH 06/12] 1026594: datasource changed --- blazor/treegrid/getting-started-webapp.md | 3 --- blazor/treegrid/getting-started-with-maui-app.md | 3 --- blazor/treegrid/getting-started-with-server-app.md | 3 --- blazor/treegrid/getting-started.md | 3 --- 4 files changed, 12 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index ce8609b6ff..c2c1bf4d60 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -287,9 +287,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md index 095693ddf5..81f26b5909 100644 --- a/blazor/treegrid/getting-started-with-maui-app.md +++ b/blazor/treegrid/getting-started-with-maui-app.md @@ -255,9 +255,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index a4b720b32f..57e202c87b 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -279,9 +279,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 84e9933598..f76e3b7e5f 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -268,9 +268,6 @@ The following code example shows how to use the [OnActionFailure](https://help.s TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 5, Priority = "Normal" }); - TreeData.Add(new BusinessObject() { TaskId = 7, TaskName = "Parent Task 3", StartDate = new DateOnly(2021, 10, 14), StartTime = new TimeOnly(17, 30, 00), Duration = 4, Progress = 45, ParentId = null, Priority = "High" }); - TreeData.Add(new BusinessObject() { TaskId = 8, TaskName = "Child Task 7", StartDate = new DateOnly(2021, 10, 16), StartTime = new TimeOnly(18, 00, 00), Duration = 3, Progress = 38, ParentId = 7, Priority = "Critical" }); - TreeData.Add(new BusinessObject() { TaskId = 9, TaskName = "Child Task 8", StartDate = new DateOnly(2021, 02, 18), StartTime = new TimeOnly(19, 30, 00), Duration = 7, Progress = 70, ParentId = 7, Priority = "Low" }); } } From 38920498e556d9ae3dc3f2a3459929c738a6fc03 Mon Sep 17 00:00:00 2001 From: Sanjai-SF5070 Date: Mon, 18 May 2026 21:25:00 +0530 Subject: [PATCH 07/12] 1026594: Updated preview samples --- blazor/treegrid/getting-started-webapp.md | 2 +- blazor/treegrid/getting-started-with-server-app.md | 2 +- blazor/treegrid/getting-started.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index c2c1bf4d60..17ddb8b2f0 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -293,7 +293,7 @@ The following code example shows how to use the [OnActionFailure](https://help.s {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBIMtXaTweQwBMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLRteMlIduKzufb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## See also diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index 57e202c87b..bbff23691f 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -285,7 +285,7 @@ The following code example shows how to use the [OnActionFailure](https://help.s {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVztHsLJVPJfMvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLRteMlIduKzufb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index f76e3b7e5f..0c02ab3cab 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -274,7 +274,7 @@ The following code example shows how to use the [OnActionFailure](https://help.s {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVztHsLJVPJfMvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLRteMlIduKzufb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## See also From 55963e3a510944e121b4fd5a9f86eae936a6fa08 Mon Sep 17 00:00:00 2001 From: Sanjai-SF5070 Date: Mon, 18 May 2026 22:08:21 +0530 Subject: [PATCH 08/12] 1026594: Updated preview sample --- blazor/treegrid/getting-started-webapp.md | 2 +- .../getting-started-with-server-app.md | 2 +- blazor/treegrid/getting-started.md | 2 +- .../images/blazor-treegrid-component.webp | Bin 3764 -> 12400 bytes 4 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 17ddb8b2f0..9280494f8c 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -204,7 +204,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdjSMbVQdpYYAf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index bbff23691f..de916f4435 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -198,7 +198,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdjSMbVQdpYYAf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} ## Handling exceptions diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 0c02ab3cab..6af783f969 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -187,7 +187,7 @@ Add the Syncfusion® Blazor TreeGrid compone * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBdjSMbVQdpYYAf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} ## Handling exceptions diff --git a/blazor/treegrid/images/blazor-treegrid-component.webp b/blazor/treegrid/images/blazor-treegrid-component.webp index 9ed7eab13251d5740774506cf94b1b8b06ab2790..309630fe7f0062cd4d70033d29550f5e880399ca 100644 GIT binary patch literal 12400 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 literal 3764 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 N1>B3=@%{a;{s%8uiXH#} From 015bb04c6069fa97b140e2b797255f12ddc9fc51 Mon Sep 17 00:00:00 2001 From: Sanjai-SF5070 Date: Mon, 18 May 2026 22:18:28 +0530 Subject: [PATCH 09/12] 1026594: Updated samples and removed image --- blazor/treegrid/getting-started-webapp.md | 32 ++++++++++------- .../getting-started-with-server-app.md | 33 +++++++++-------- blazor/treegrid/getting-started.md | 35 ++++++++++--------- 3 files changed, 57 insertions(+), 43 deletions(-) diff --git a/blazor/treegrid/getting-started-webapp.md b/blazor/treegrid/getting-started-webapp.md index 9280494f8c..efd9d7c7b1 100644 --- a/blazor/treegrid/getting-started-webapp.md +++ b/blazor/treegrid/getting-started-webapp.md @@ -168,21 +168,27 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.TreeGrid; - - + + + + -@code -{ - public class BusinessObject +@code{ + public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } public int? ParentId { get; set; } } @@ -190,12 +196,12 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" }); } } @@ -204,7 +210,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid). diff --git a/blazor/treegrid/getting-started-with-server-app.md b/blazor/treegrid/getting-started-with-server-app.md index de916f4435..c3e1115ca1 100644 --- a/blazor/treegrid/getting-started-with-server-app.md +++ b/blazor/treegrid/getting-started-with-server-app.md @@ -162,21 +162,27 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.TreeGrid; - - + + + + -@code -{ - public class BusinessObject +@code{ + public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } public int? ParentId { get; set; } } @@ -184,21 +190,20 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" }); } } - {% endhighlight %} {% endtabs %} * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Handling exceptions diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 6af783f969..19145cf0d1 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -151,21 +151,27 @@ Add the Syncfusion® Blazor TreeGrid compone {% tabs %} {% highlight razor tabtitle="Index.razor" %} -@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.TreeGrid; - - + + + + -@code -{ - public class BusinessObject +@code{ + public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } public int? ParentId { get; set; } } @@ -173,21 +179,18 @@ Add the Syncfusion® Blazor TreeGrid compone protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" }); } } -{% endhighlight %} -{% endtabs %} - * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2"%} ## Handling exceptions From 4abc0e245d975ec1079ddc1038191f2ebd2d5696 Mon Sep 17 00:00:00 2001 From: Sanjai-SF5070 Date: Mon, 18 May 2026 22:40:07 +0530 Subject: [PATCH 10/12] 1026594: committed changes --- blazor/treegrid/getting-started.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 19145cf0d1..3cd9c0c48b 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -187,6 +187,8 @@ Add the Syncfusion® Blazor TreeGrid compone TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" }); } } +{% endhighlight %} +{% endtabs %} * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. From 44c124fa25325524eee9e9d68f825e3f0c600e3f Mon Sep 17 00:00:00 2001 From: Sanjai-SF5070 Date: Mon, 18 May 2026 23:01:00 +0530 Subject: [PATCH 11/12] 1026594: Committed changes for Maui --- .../treegrid/getting-started-with-maui-app.md | 30 +++++++++++------- .../images/blazor-treegrid-maui-app.webp | Bin 5538 -> 14046 bytes 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/blazor/treegrid/getting-started-with-maui-app.md b/blazor/treegrid/getting-started-with-maui-app.md index 81f26b5909..658cc3b78c 100644 --- a/blazor/treegrid/getting-started-with-maui-app.md +++ b/blazor/treegrid/getting-started-with-maui-app.md @@ -126,21 +126,27 @@ Add the Syncfusion® Blazor TreeGrid compone {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.TreeGrid +@using Syncfusion.Blazor.TreeGrid; - - + + + + -@code -{ - public class BusinessObject +@code{ + public class BusinessObject { public int TaskId { get; set; } public string TaskName { get; set; } + public DateOnly? StartDate { get; set; } + public TimeOnly? StartTime { get; set; } + public int Duration { get; set; } + public int Progress { get; set; } + public string Priority { get; set; } public int? ParentId { get; set; } } @@ -148,12 +154,12 @@ Add the Syncfusion® Blazor TreeGrid compone protected override void OnInitialized() { - TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", ParentId = 1 }); - TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", ParentId = 1, }); - TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", ParentId = null }); - TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", ParentId = 4 }); - TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", ParentId = 5 }); + TreeData.Add(new BusinessObject() { TaskId = 1, TaskName = "Parent Task 1", StartDate = new DateOnly(2021, 03, 02), StartTime = new TimeOnly(10, 00, 00), Duration = 10, Progress = 70, ParentId = null, Priority = "High" }); + TreeData.Add(new BusinessObject() { TaskId = 2, TaskName = "Child task 1", StartDate = new DateOnly(2021, 03, 04), StartTime = new TimeOnly(11, 30, 00), Duration = 4, Progress = 80, ParentId = 1, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 3, TaskName = "Child Task 2", StartDate = new DateOnly(2021, 03, 06), StartTime = new TimeOnly(12, 00, 00), Duration = 5, Progress = 65, ParentId = 1, Priority = "Critical" }); + TreeData.Add(new BusinessObject() { TaskId = 4, TaskName = "Parent Task 2", StartDate = new DateOnly(2021, 03, 08), StartTime = new TimeOnly(13, 30, 00), Duration = 6, Progress = 77, ParentId = null, Priority = "Low" }); + TreeData.Add(new BusinessObject() { TaskId = 5, TaskName = "Child Task 5", StartDate = new DateOnly(2021, 07, 10), StartTime = new TimeOnly(14, 00, 00), Duration = 9, Progress = 25, ParentId = 4, Priority = "Normal" }); + TreeData.Add(new BusinessObject() { TaskId = 6, TaskName = "Child Task 6", StartDate = new DateOnly(2021, 10, 12), StartTime = new TimeOnly(16, 00, 00), Duration = 9, Progress = 7, ParentId = 4, Priority = "Normal" }); } } diff --git a/blazor/treegrid/images/blazor-treegrid-maui-app.webp b/blazor/treegrid/images/blazor-treegrid-maui-app.webp index d0cbfa6af1b315f82f8a05e395b3c0ec3d13b765..81787b751a931ae01e91a047b8c3bfaf302819cc 100644 GIT binary patch literal 14046 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 QCKBgQ{T_E#KPmtK0F-$}u>b%7 literal 5538 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 Date: Mon, 18 May 2026 23:11:59 +0530 Subject: [PATCH 12/12] 1026594: committed changes --- blazor/treegrid/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/treegrid/getting-started.md b/blazor/treegrid/getting-started.md index 3cd9c0c48b..7ef46b09a1 100644 --- a/blazor/treegrid/getting-started.md +++ b/blazor/treegrid/getting-started.md @@ -192,7 +192,7 @@ Add the Syncfusion® Blazor TreeGrid compone * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeGrid component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2"%} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtSsPSYTTRmob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Handling exceptions