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

Select Next and Previous Items Dynamically

1 Answer 324 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Coty
Top achievements
Rank 1
Coty asked on 10 Feb 2015, 04:39 PM
Hello, how do you select the next node, given that you have the selected node?  How do you select the previous item?

The treeview is loaded from a HierarchicalDataSource.

I get the selected node like this:
var treeview= $(treeid);
var tree = treeview.data('kendoTreeView');
var selectedNode = tv.select();

any help is appreciated,

Thanks.

1 Answer, 1 is accepted

Sort by
0
Coty
Top achievements
Rank 1
answered on 10 Feb 2015, 07:52 PM
Well it doesn't appear this functionality is available out of the box so I wrote my own functions, I have multiple treeviews on my pages I i dynamically initialize them with a unique id (in my case the 'agendaid').  But here are the functions I created, my trees only have two levels, parents and children, but this should work for more levels possibly with minimal effort.

function SelectNextItem(agendaid) {
    var treeid = "#treeview" + agendaid;
    var item = '';
    var tv = $(treeid);
    var selectedLI = tv.find("span.k-state-selected").closest("li");
    var tree = tv.data('kendoTreeView');
    if (selectedLI.length === 0) {
        //no item selected, select first item
        item = tv.find('.k-first');
    } else {
        //get next uid
        var nextid = '';
        //check if selected node has children
        if ($(selectedLI).has("ul").length > 0) {
            //has children, get child id
            nextid = $(selectedLI).find("ul").find("li").data("uid");
        } else {
            //no children, get sibling
            nextid = $(selectedLI).next().data("uid");
            if (typeof nextid === 'undefined')
            {
                //no sibling, get upper level next id
                nextid = $(selectedLI).parent().parent().next().data("uid");
            }
        }
        if (typeof nextid === 'undefined') {
            //must be no more items, select first
            item = tv.find('.k-first');
        } else {
            item = tree.findByUid(nextid);
        }
    }
 
    tree.select(item);
    tree.trigger("select", {
        node: item
    });
}
function SelectPrevItem(agendaid) {
    var treeid = "#treeview" + agendaid;
    var item = '';
    var tv = $(treeid);
    var selectedLI = tv.find("span.k-state-selected").closest("li");
    var tree = tv.data('kendoTreeView');
    if (selectedLI.length === 0) {
        //no item selected, select last item
        item = tv.find("li").last();
    } else {
        var nextid = '';
        prevLI = $(selectedLI).prev(); //.data("uid");
        if ($(prevLI).has("ul").length > 0) {
            //this item has children, select last child
            nextid = $(prevLI).find("li").last().data("uid");
        } else {
            //no children so we can just select this item
            nextid = $(prevLI).data("uid");
            if (typeof nextid === 'undefined') {
                //must be first child of item
                nextid = $(selectedLI).parent().parent().data("uid");
            }
        }
        if (typeof nextid === 'undefined') {
            //must be no more items, select last
            item = tv.find("li").last();
        } else {
            item = tree.findByUid(nextid);
        }
    }


Tags
TreeView
Asked by
Coty
Top achievements
Rank 1
Answers by
Coty
Top achievements
Rank 1
Share this question
or