This is a migrated thread and some comments may be shown as answers.

Paging a treeview

3 Answers 202 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
jk
Top achievements
Rank 1
jk asked on 02 May 2013, 01:57 PM
Let's say I have hierarchical data that I display in a treeview. It's possible that a particular node might have 1000 children and I don't want to display them all, so I'm toying with the idea of paging the nodes in a tree. I would show 10 children and if there are more, the user needs to click on the next/previous buttons to see them. I've got sql paging working but I can't get the treeview to do what I want. If I do this (first code snippet), my controller gets the proper node id and page id and it returns the correct page of results back. But then the treeview shows only the 1 page of children I just requested; the rest of the hierarchy (all the parents) is lost:
$("#btnNextPage").click(
   function () {
      var selectedNode = treeview.select();
      var selectedNodeID = treeview.dataItem(selectedNode).id;
      ds.read({
         LoopID: selectedNodeID,
         page: ds.page() + 1
         })
});

If I do the second code snippet, I can keep the hierarchy and my controller gets called, but I can't figure out how to pass in the page that I'm requesting.
$("#btnNextPage").click(function () {
   var selectedNode = treeview.select();
   var testnode = treeview.dataItem(selectedNode);
   testnode.loaded(false);
   testnode.load();
});

Any ideas?

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 03 May 2013, 07:11 AM
Hello Jacqui,

Paging in the TreeView is not supported. Since you are already developing custom functionality to enable it, you might want to page the per-level datasources -- each item that has children has the children field that is a datasource, therefore per-level paging might be possible.

All the best,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
jk
Top achievements
Rank 1
answered on 03 May 2013, 12:50 PM
So are you suggesting I do something like this?
var selectedNode = treeview.select();
var selectedNodeID = treeview.dataItem(selectedNode).id;
 
var selectedNodeDataItem = treeview.dataItem(selectedNode);
selectedNodeDataItem.children.read({
                LoopID: selectedNodeID,
                page: selectedNodeDataItem.children.page() + 1
});

The line with selectedNodeDataItem.children.read is not failing but using Firebug I can see that it is not sending a request to my controller. Am I using the child datasource correctly?
0
jk
Top achievements
Rank 1
answered on 03 May 2013, 01:05 PM
Fixed the problem, updated code below in case it's useful to anyone else.
var selectedNode = treeview.select();
var selectedNodeID = treeview.dataItem(selectedNode).id;
 
var selectedNodeDataItem = treeview.dataItem(selectedNode);
var currentPage = selectedNodeDataItem.children.page();
selectedNodeDataItem.children.read({
                LoopID: selectedNodeID,
                page: currentPage + 1
            });
Tejas
Top achievements
Rank 1
commented on 28 Jul 2021, 09:55 PM

can you provide treeview code for front end and back end? I need to implement same for my application. not sure how can we add load more button for large set of nodes?
Tags
TreeView
Asked by
jk
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
jk
Top achievements
Rank 1
Share this question
or