TreeList Paging
The TreeList component offers support for paging.
In this article:
Basics
- To enable paging, set the TreeList
Pageableparameter totrue. - Set the number of items rendered at once with the
PageSizeparameter (defaults to 10). - If needed, set the current page of the TreeList through its integer
Pageproperty. - You can further customize the pager interface via additional pager settings.
Paging is calculated for the currently expanded and visible items. Children in collapsed nodes are not included in the total count and in the current page. Thus, expanding or collapsing a node (row) can change the items you see on the current page.
Enable paging in Telerik TreeList
Enable paging and start on the second page.
<TelerikTreeList Data="@Data"
Pageable="true" PageSize="15"
IdField="Id" ParentIdField="ParentId"
Width="650px">
<TreeListColumns>
<TreeListColumn Field="Name" Expandable="true" Width="300px"></TreeListColumn>
<TreeListColumn Field="Id"></TreeListColumn>
</TreeListColumns>
</TelerikTreeList>
@code {
public List<Employee> Data { get; set; }
protected override async Task OnInitializedAsync()
{
Data = await GetTreeListData();
}
// sample models and data generation
public class Employee
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Name { get; set; }
}
async Task<List<Employee>> GetTreeListData()
{
List <Employee> data = new List<Employee>();
for (int i = 1; i < 15; i++)
{
data.Add(new Employee
{
Id = i,
ParentId = null,
Name = $"root: {i}"
});
for (int j = 2; j < 5; j++)
{
int currId = i * 100 + j;
data.Add(new Employee
{
Id = currId,
ParentId = i,
Name = $"first level child of {i}"
});
for (int k = 3; k < 5; k++)
{
data.Add(new Employee
{
Id = currId * 1000 + k,
ParentId = currId,
Name = $"second level child of {i} and {currId}"
}); ;
}
}
}
return await Task.FromResult(data);
}
}
You can bind the values of those properties to variables in the
@code {}section. If you want to bind the page index to a variable, you must use the@bind-Page="@MyPageIndexVariable"syntax.
Here is one way to implement a page size choice that puts all records on one page.
Bind Page Size to a variable
Dynamic page size change
<select @onchange=@ChangePageSize>
<option value="10" selected>10</option>
@for (int i = 2; i < 5; i++)
{
<option value=@(i*10)>@(i * 10)</option>
}
<option value="all">all</option>
</select>
<TelerikTreeList Data="@Data"
Pageable="true" PageSize="@PageSize"
IdField="Id" ParentIdField="ParentId"
Width="650px">
<TreeListColumns>
<TreeListColumn Field="Name" Expandable="true" Width="300px"></TreeListColumn>
<TreeListColumn Field="Id"></TreeListColumn>
</TreeListColumns>
</TelerikTreeList>
@code {
int PageSize { get; set; } = 10;
void ChangePageSize(ChangeEventArgs e)
{
if (e.Value.ToString().ToLowerInvariant() == "all")
{
PageSize = Data.Count();
}
else
{
PageSize = int.Parse(e.Value.ToString());
}
}
public List<Employee> Data { get; set; }
protected override async Task OnInitializedAsync()
{
Data = await GetTreeListData();
}
// sample models and data generation
public class Employee
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Name { get; set; }
}
async Task<List<Employee>> GetTreeListData()
{
List<Employee> data = new List<Employee>();
for (int i = 1; i < 15; i++)
{
data.Add(new Employee
{
Id = i,
ParentId = null,
Name = $"root: {i}"
});
for (int j = 2; j < 5; j++)
{
int currId = i * 100 + j;
data.Add(new Employee
{
Id = currId,
ParentId = i,
Name = $"first level child of {i}"
});
for (int k = 3; k < 5; k++)
{
data.Add(new Employee
{
Id = currId * 1000 + k,
ParentId = currId,
Name = $"second level child of {i} and {currId}"
}); ;
}
}
}
return await Task.FromResult(data);
}
}
Events
The TreeList exposes several relevant events. You can find related examples in the Events article.
-
PageChanged- you can use this to react to the user changing the page. -
PageSizeChanged- fires when the user changes the page size via the pager DropDownList.
Pager Settings
In addition to Page and PageSize, the TreeList provides advanced pager configuration options via the TreeListPagerSettings tag, which is nested inside TreeListSettings. These configuration attributes include:
| Attribute | Type and Default Value | Description |
|---|---|---|
Adaptive |
bool ( true) |
Whether pager elements should change based on the screen size. When enabled, the Pager will hide its Pager Info and PageSize Dropdownlist if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element. |
ButtonCount |
int (10) |
The maximum number of page buttons that will be visible. To take effect, ButtonCount must be smaller than the page count (ButtonCount < Total / PageSize). |
InputType |
PagerInputType ( Buttons) |
Whether the pager will show numeric buttons to go to a specific page, or a textbox to type the page index. The arrow buttons are always visible. The PagerInputType enum accepts values Buttons or Input. When Input is used, the page index will change when the textbox is blurred, or when the user hits Enter. This is to avoid unintentional data requests. |
PageSizes |
List<int?> |
Allows users to change the page size via a DropDownList. The attribute configures the DropDownList options. A null item in the PageSizes List will render an "All" option. By default, the Pager DropDownList is not displayed. You can also set PageSizes to null programmatically to remove the DropDownList at any time. |
Position |
PagerPosition enum ( PagerPosition.Bottom) |
The position of the Pager. The available options are Top and Bottom. |
@*Configure the Pager Settings*@
<TelerikTreeList Data="@Data"
Pageable="true" @bind-PageSize="@PageSize" @bind-Page="@CurrentPage"
IdField="Id" ParentIdField="ParentId"
Width="650px">
<TreeListSettings>
<TreeListPagerSettings InputType="PagerInputType.Input"
PageSizes="@PageSizes"
ButtonCount="5"
Adaptive="true"
Position="PagerPosition.Top">
</TreeListPagerSettings>
</TreeListSettings>
<TreeListColumns>
<TreeListColumn Field="Name" Expandable="true" Width="300px"></TreeListColumn>
<TreeListColumn Field="Id"></TreeListColumn>
</TreeListColumns>
</TelerikTreeList>
@code {
public List<Employee> Data { get; set; }
int PageSize { get; set; } = 15;
int CurrentPage { get; set; } = 3;
protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, null };
protected override async Task OnInitializedAsync()
{
Data = await GetTreeListData();
}
// sample models and data generation
public class Employee
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Name { get; set; }
}
async Task<List<Employee>> GetTreeListData()
{
List<Employee> data = new List<Employee>();
for (int i = 1; i < 15; i++)
{
data.Add(new Employee
{
Id = i,
ParentId = null,
Name = $"root: {i}"
});
for (int j = 2; j < 5; j++)
{
int currId = i * 100 + j;
data.Add(new Employee
{
Id = currId,
ParentId = i,
Name = $"first level child of {i}"
});
for (int k = 3; k < 5; k++)
{
data.Add(new Employee
{
Id = currId * 1000 + k,
ParentId = currId,
Name = $"second level child of {i} and {currId}"
}); ;
}
}
}
return await Task.FromResult(data);
}
}