New toTelerik UI for Blazor?Download free 30-day trial

No Data Template

TheNoDataTemplateallows you to define custom content when the TreeList has no data to show. It lets you change the defaultNo records availablelocalizable text.

Custom content for an empty TreeList

Blazor Treelist No Data Template

Use the NoDataTemplate to override the message shown while the data is still loading or when you try to filter a non-existing item

@ *的例子展示了一个TreeList延迟pon initializing its data and filtering on non-existing data *@   Add Data         No Data available / The data is still loading...   @code { public class EmployeeHierarchical { public int EmployeeId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Position { get; set; } public List DirectReports { get; set; } public bool HasReports { get; set; } } public List Data { get; set; } protected async Task LoadData() { Data = await GetEmployees(); } async Task> GetEmployees() { await Task.Delay(2000); List sampleData = new List(); EmployeeHierarchical theCEO = new EmployeeHierarchical { EmployeeId = 1, FirstName = "Daryl", LastName = "Sweeney", Position = "CEO", HasReports = true }; theCEO.DirectReports = new List { new EmployeeHierarchical { EmployeeId = 2, FirstName = "Guy", LastName = "Wooten", Position = "Chief Technical Officer", HasReports = true }, new EmployeeHierarchical { EmployeeId = 3, FirstName = "Nevada", LastName = "Hart", Position = "Chief Financial Officer", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 24, FirstName = "Zena", LastName = "Stanford", Position = "VP, Finance" } } } }; theCEO.DirectReports[0].DirectReports = new List { new EmployeeHierarchical { EmployeeId = 4, FirstName = "Buffy", LastName = "Weber", Position = "VP, Engineering", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 6, FirstName = "Hyacinth", LastName = "Hood", Position = "Team Lead", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 7, FirstName = "Akeem", LastName = "Carr", Position = "Software Developer, Junior" }, new EmployeeHierarchical { EmployeeId = 8, FirstName = "Rinah", LastName = "Simon", Position = "Software Developer" } } }, new EmployeeHierarchical { EmployeeId = 9, FirstName = "Gage", LastName = "Daniels", Position = "Software Architect" }, new EmployeeHierarchical { EmployeeId = 10, FirstName = "Constance", LastName = "Vazquez", Position = "Director, Engineering", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 11, FirstName = "Darrel", LastName = "Solis", Position = "Team Lead", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 12, FirstName = "Brian", LastName = "Yang", Position = "Software Developer, Senior" }, new EmployeeHierarchical { EmployeeId = 13, FirstName = "Lillian", LastName = "Bradshaw", Position = "Software Developer" }, new EmployeeHierarchical { EmployeeId = 14, FirstName = "Keiko", LastName = "Espinoza", Position = "QA Engineer, Junior" } } } } } } }, new EmployeeHierarchical { EmployeeId = 5, FirstName = "Skyler", LastName = "Cleveland", Position = "VP, Engineering", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 16, FirstName = "Karleigh", LastName = "Garza", Position = "Team Lead", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 17, FirstName = "Elmo", LastName = "Tyson", Position = "Software Developer" }, new EmployeeHierarchical { EmployeeId = 18, FirstName = "Stacey", LastName = "Lynn", Position = "QA Engineer", HasReports = true, DirectReports = new List { new EmployeeHierarchical { EmployeeId = 19, FirstName = "Meredith", LastName = "Parish", Position = "QA Engineer, Junior" } } }, new EmployeeHierarchical { EmployeeId = 20, FirstName = "Martha", LastName = "Sargent", Position = "Software Developer, Senior" }, new EmployeeHierarchical { EmployeeId = 21, FirstName = "Cassady", LastName = "Whitley", Position = "Software Developer" }, new EmployeeHierarchical { EmployeeId = 22, FirstName = "Haviva", LastName = "Campbell", Position = "Support Officer" }, new EmployeeHierarchical { EmployeeId = 23, FirstName = "Cameron", LastName = "Ayers", Position = "Support Officer" } } } } } }; sampleData.Add(theCEO); return await Task.FromResult(sampleData); } }

See Also

In this article
Baidu
map