Paging a treeview

[jk]

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?

[Alex Gyoshev]

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

[jk]

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?

[jk]

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]

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?