Paging
The TreeList supports client-side paging for large sets of data.
To enable the paging functionality of the TreeList, configure the Pageable settings.
- Remember to set a
PageSize. You can define aPageSizein thePageableor in theDataSourcesettings. If an already existing dataSource instance is passed to the TreeList, then thePageSizeoption has to be set in the dataSource settings and not in thePageablesettings.- By default,
ServerOperationsare enabled in the TreeList HtmlHelper. For client-side paging you have to disable the server operations by setting theServerOperationstofalse.
@(Html.Kendo().TreeList<EmployeeDirectoryModel>()
.Name("treelist")
.Columns(columns =>
{
columns.Add().Field(e => e.FirstName).Width(220).TemplateId("photo-template");
columns.Add().Field(e => e.LastName).Width(160);
columns.Add().Field(e => e.Position);
columns.Add().Field(e => e.Phone).Width(200);
columns.Add().Field(e => e.Extension).Width(140);
columns.Add().Field(e => e.Address);
})
.Filterable()
.Sortable()
.DataSource(dataSource => dataSource
.Read(read => read.Action("All", "EmployeeDirectory"))
.ServerOperation(false)
.Model(m => {
m.Id(f => f.EmployeeId);
m.ParentId(f => f.ReportsTo);
m.Expanded(true);
m.Field(f => f.FirstName);
m.Field(f => f.LastName);
m.Field(f => f.ReportsTo);
})
)
.Height(540)
.Pageable(p => p.PageSize(15)
.PageSizes(true)
)
)The root TreeList items have their parentId field set to the default value for no parent. By default, the value is null and can be configured through the dataSource.schema.model.fields[FIELD_NAME].defaultValue option.
If you use client-side paging together with editing, the user adds an item, and the
idfield of the model has to be nullable (for example,int?), then you have to configure the model so that it features a defaultidfield value on the client side which is different from the defaultparentIdfield value. In such cases, the default value of theidfield (null) will equal the defaultparentIdfield value (null) which creates a circular dependency. To avoid this issue, set the defaultidfield to a different value, for example, tozero.
@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
.Name("treelist")
...
.DataSource(dataSource => dataSource
.ServerOperation(false)
.Read(read => read.Action("All", "EmployeeDirectory"))
.Model(m => {
// Assuming the "EmployeeId" field is equal to null by default and
// the default value of the "ReportsTo" field is also null.
m.Field(f => f.EmployeeId).DefaultValue(0);
m.Id(f => f.EmployeeId);
m.ParentId(f => f.ReportsTo);
m.Field(f => f.ReportsTo);
m.Expanded(true);
})
)
.Height(540)
.Pageable(p => p.PageSize(15)
.PageSizes(true)
)
)