New to Telerik UI for Blazor? Download Free 30-day trial
TreeView - Lazy Loading
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
- Lazy-loading.razor
- CategoryService.cs
- CategoryDto.cs
- ProductService.cs
- ProductDto.cs
Description
Telerik UI for Blazor TreeView displays data in a tree-like structure. It allows you to navigate through the items and their children. One of the main benefits is the option you have to load the nodes on demand.
The component rendering stays the same regardless of the data type. Yet, its configuration will be different when using hierarchical or flat data. The current demo shows TreeView load on demand (lazy loading) using hierarchical data binding.
The hierarchical data means that the collection of child items is provided in a field of its parent's model, unlike when using flat data. That is the Items
field by default. If a given node has items, an expand icon will be visible. The HasChildren
field can override this, yet - it is not required for hierarchical data binding.
When using load on demand, there is no need to provide all the data the Treeview will render at once - the root nodes are sufficient for an initial display. Then, you can use the OnExpand
event of the component to provide flat or hierarchical data to the node that was just expanded.
Loading nodes on demand can improve the performance of your application by requesting fewer data at any given time.
You can also take a look at the Treeview data binding basics.