Add a Blazor TreeGrid to Blazor Server App in 10 Minutes

Learn how easily you can create and configure the Blazor TreeGrid of Syncfusion in a Blazor server application.
I will explain how to add columns and show parent-child flat data using the expand and collapse options. I’ll show you how to add useful features to your tree grid, too, like paging, sorting, and filtering.
[00:36] Set up Blazor environment
[01:41] Install Syncfusion Blazor package
[03:27] Add Syncfusion Blazor TreeGrid
[07:04] Enable paging
[08:17] Enable sorting
[09:21] Enable filtering
Example Project: bit.ly/38XTwtP
BLAZOR TREEGRID
----------------------------
Product overview: bit.ly/3aAZbql
Examples: bit.ly/2WWLQVD
Documentation: bit.ly/3bFYMTR
Download free trial: bit.ly/33Y5OAw
NuGet package: bit.ly/2JaYsA9
SUBSCRIBE
---------------
Syncfusion on RUclips: bit.ly/syncfusionyoutube
Sign up to receive email updates: bit.ly/syncfusionemail
SOCIAL COMMUNITIES
----------------------------
Facebook: / syncfusion
Twitter: / syncfusion
LinkedIn: / syncfusion
#blazortreegrid #treegrid #blazorcomponents

[@SyncfusionInc]

If you are working with 20.1 or later versions of the Syncfusion Blazor NuGet packages - blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes, we request you to ensure the following 3 steps in your projects-
1. Manually add the script reference under the section of ~/index.html or ~/Pages/_Host.cshtml files. Read More: blazor.syncfusion.com/documentation/common/adding-script-references
2. Syncfusion.Blazor.Themes is removed from dependencies of Syncfusion.Blazor.Core. So, if you are looking to refer themes from static web assets, ensure to install Syncfusion.Blazor.Themes NuGet package explicitly into your project. Check out how to manually add the style reference, blazor.syncfusion.com/documentation/appearance/themes#static-web-assets
3. While registering Syncfusion Blazor Service in the ~/Program.cs file, you would have set IgnoreScriptIsolation property as true to load the scripts externally. From 2022 Vol-1 (20.1.*) versions, the default value of IgnoreScriptIsolation is changed to true and marked as obsolete, so it is not necessary to set this property explicitly in your projects. Read More: blazor.syncfusion.com/documentation/common/adding-script-references#disable-javascript-isolation

[@jpeisleide]

Great explanation, thanks for sharing this video.

[@SyncfusionInc]

We're glad you found it useful!

[@talkathiriify]

Excellent Tools.
Thank you very much.

[@SyncfusionInc]

Thank you!

[@timromano7085]

If a value in the data-model is changed, without any user-UI interaction, such as by a database server notification that the client app has subscribed to (e.g. SQL Server SqlTableDependency notification), does the SfTreeGrid remember which nodes in the hierarchy are expanded and which are not, and does it resort using the new value? Or does it revert to its default UI state?

[@SyncfusionInc]

Greetings from Syncfusion Support.
When we update any record into the database, it will re-render the component again due to component property changes which is the behavior in Blazor. Because of this behavior, TreeGrid has rendered again, so that state(expand/collapse) has not been maintained. So we couldn’t change the Blazor behavior of re-rendering component but we can maintain the TreeGrid state. We have logged the feedback report for the same and which will be included in our 3rd July weekly nuget release.
Until then, we appreciate your patience.
You can track the current status of your request, review the resolution timeline and contact us for any further inquiries through this link.
www.syncfusion.com/feedback/15862/need-to-maintain-expand-collapse-state-while-on-performing-editing-operations
Note: To view the above feedback, kindly login into your account.