I'm tiring to use the kendo pager with the Kendo TreeList to paginate the Trees (Root Nodes). Remote data binding is enabled to load child nodes (on-demand data loaded at row expand). At the initial load, the TreeList is in Collapsed view.
A Kendo Pager and a kendo DataSource is been used. The server handles the dynamic data loading and paging data.
Sample Tree Hierarchy:-
T1 = A -> B
T2 = C -> D -> E
T3 = X -> Y
Let's say the Page Size is 2. T1 and T2 will show on the first page and the T3 will be on the 2nd page.
Page 1
Page 2 Collapsed view
The problem I'm facing is that when the user selects the page from pager control that data is not sent to the backend.
In the below scenario, when the user selects page 2 pager controller sends page 1 instead of 2. It seems the pager act as the TreeList client pager !?
TreeListView.cshtml
@(Html.Kendo().DataSource<TreeListViewModel>()
.Name("TreeListDataSource")
.TreeList(source =>
{
source.Model(m =>
{
m.Expanded(false);
m.Id(f => f.ObjectID);
m.ParentId(f => f.ParentID).Nullable(true);
m.Field(f => f.Code);
});
source.Read(read => read.Action("ReadTreeListdData", "TreeList").Data("BuildTreeListReadRequestData")).PageSize(2);
})
)
@(Html.Kendo().TreeList<TreeListViewModel>()
.Name("TreeList")
.Columns(columns =>
{
columns.Add().Field(f => f.Code);
})
.DataSource("TreeListDataSource")
)
@(Html.Kendo().Pager()
.Name("TreeListPager")
.DataSource("TreeListDataSource")
)
TreeListController.cs
public JsonResult ReadTreeListData([DataSourceRequest] DataSourceRequest request, int? id)
{
int TotalTreeCount = 0;
int pageSize = request.PageSize;
int page = request.Page;
var Result = GetTreeListDirectory(id, pageSize, page, out TotalTreeCount).ToTreeDataSourceResult(request,
e => e.ObjectID,
e => e.ParentID,
e => id.HasValue ? e.ParentID == id : e.ParentID == null,
e => e
);
Result.Total = TotalTreeCount; //3
return Json(Result, JsonRequestBehavior.AllowGet);
}
References:
Currently, the Kendo Tree view is not supported for server pagination. but you can do it manually as below.
TreeListView.cshtml
Now you can handle pagination by your database. for example, if you are getting data from MSSQL SP you can do as below.