Select Next and Previous Items Dynamically

2 posts, 0 answers
  1. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 10 Feb 2015 Link to this post

    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.
  2. Coty
    Coty avatar
    41 posts
    Member since:
    Jun 2014

    Posted 10 Feb 2015 in reply to Coty Link to this post

    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);
            }
        }


  3. Kendo UI is VS 2017 Ready
Back to Top