Blazor TreeList - How to bind the component to DevExtreme data source with Entity Framework Core

This example uses Entity Framework Core data access technology to bind the DevExpress Blazor TreeList component to a GridDevExtremeDataSource<T>.

You can use the GridDevExtremeDataSource<T> class to bind the DevExpress Blazor TreeList to a large IQueryable<T> data collection. This data source implementation is based on our DevExtreme.AspNet.Data library. When you use this data source, the TreeList delegates data filtering operations to an underlying query provider (such as EF Core) and loads node children when a node is expanded for the first time. This technique optimizes performance and reduces overall memory consumption.

To use this data source in your next Blazor project, follow the steps below:

1. Create a GridDevExtremeDataSource<T> class instance and pass your IQueryable<T> data collection as the constructor parameter. Assign the result to the TreeList's Data property.
2. Specify KeyFieldName and ParentKeyFieldName properties. The TreeList uses these properties to build its tree.
3. Specify the HasChildrenFieldName property. The TreeList uses this property to determine which nodes require expand buttons.

Files to Review

• TreeList.razor
• Location.cs
• CitiesContext.cs
• CitiesService.cs
• Program.cs

Documentation

• Blazor TreeList

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)