blazor-devexpress-dot-blazor-dot-dxtreelist-e38b96c1.md
Allows you to populate a node with child nodes. The TreeList component raises this event when the node is expanded for the first time.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public Func<TreeListChildrenLoadingOnDemandEventArgs, Task> ChildrenLoadingOnDemand { get; set; }
| Type | Description |
|---|---|
| TreeListChildrenLoadingOnDemandEventArgs |
An object that contains data for this event.
|
The TreeList component gives you an option to initially load only root nodes. It retrieves child nodes on demand when a user expands a node for the first time. Follow the steps below to enable this behavior:
ChildrenLoadingOnDemand event. In the event handler, use the Parent event argument to determine the processed node and assign the node’s children to the Children collection.Read Tutorial: Bind Blazor TreeList to Data Run Demo: Load Data on Demand
In the following example, the TreeList component displays the file structure:
@inject FileSystemDataProvider FileSystemDataProvider
<DxTreeList Data="TreeListData"
HasChildrenFieldName="HasChildren"
ChildrenLoadingOnDemand="TreeList_ChildrenLoadingOnDemand"
CustomizeCellDisplayText="TreeList_CustomizeCellDisplayText">
<Columns>
<DxTreeListDataColumn FieldName="Name" />
<DxTreeListDataColumn FieldName="Type" Width="100" />
<DxTreeListDataColumn FieldName="DateModified" Width="120" />
<DxTreeListDataColumn FieldName="Size" Width="100" />
</Columns>
</DxTreeList>
@code {
object TreeListData { get; set; }
protected override async Task OnInitializedAsync() {
TreeListData = await FileSystemDataProvider.GetRootItemsAsync();
}
Task TreeList_ChildrenLoadingOnDemand(TreeListChildrenLoadingOnDemandEventArgs e) {
var item = e.Parent as FileSystemDataItem;
e.Children = item.Children;
return Task.CompletedTask;
}
void TreeList_CustomizeCellDisplayText(TreeListCustomizeCellDisplayTextEventArgs e) {
if(e.FieldName == "Size") {
var item = (FileSystemDataItem)e.DataItem;
e.DisplayText = GetSizeColumnDisplayText(item.Type, item.Size);
}
}
string GetSizeColumnDisplayText(FileType fileType, long size) {
if(fileType == FileType.Folder)
return null;
if(size >= 1024)
return string.Format("{0:### ### ###} KB", size / 1024);
return string.Format("{0} Bytes", size);
}
}
using System.Collections.Generic;
public class FileSystemDataItem {
public string Name { get; set; }
public FileType Type { get; set; }
public DateTime DateCreated { get; set; }
public DateTime DateModified { get; set; }
public long Size { get; set; }
public List<FileSystemDataItem> Children { get; set; }
public bool HasChildren => Children != null && Children.Count > 0;
}
public enum FileType { File, Folder }
public class FileSystemDataProvider {
List<FileSystemDataItem> _rootItems;
public FileSystemDataProvider(DataSourcesFileContentProvider fileContentProvider) {
FileContentProvider = fileContentProvider;
}
DataSourcesFileContentProvider FileContentProvider { get; }
public async Task<List<FileSystemDataItem>> GetRootItemsAsync() {
if(_rootItems == null) {
var json = await FileContentProvider.GetFileSystemDataItemsContentAsync();
_rootItems = JsonSerializer.Deserialize<List<FileSystemDataItem>>(json);
}
return _rootItems;
}
}
public class DataSourcesFileContentProvider{
string _fileSystemDataItemsContent;
public async Task<string> GetFileSystemDataItemsContentAsync() {
if(_fileSystemDataItemsContent == null) {
string pathToDataFile = Path.Combine(AppContext.BaseDirectory, "DataSources", "FileSystemDataItems.json");
_fileSystemDataItemsContent = await File.ReadAllTextAsync(pathToDataFile);
}
return _fileSystemDataItemsContent;
}
}
// ...
builder.Services.AddSingleton<FileSystemDataProvider>();
builder.Services.AddSingleton<DataSourcesFileContentProvider>();
The on-demand mode has the following specifics and limitations:
AllPages mode of the Select All checkbox is not supported.See Also