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

Altering treeView Hierarchy

1 Answer 79 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Yuvarajan
Top achievements
Rank 1
Yuvarajan asked on 15 Feb 2013, 01:20 PM
Hi
I have a doubt in TreeView Component.

I want to move the selected node one step forward or backward.
For example,
Consider a tree structure,

A
  A.1
A.2
A.3
B
B1
B2
B.3
C
C1
C2
Now in my case i click c1 and press button the root element C wants to move one step forward  and the tree model should change like this
A
   A.1
A.2
A.3

C
C1
C2
B
B1
B2
B.3


Thanks in advance,


 

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 19 Feb 2013, 09:06 AM
Hi Yuvarajan,

First of all, I kindly request you to avoid posting duplicate support tickets and forum threads, because this may result in overhead and two different people from Telerik reviewing the same case separately. In cases you really need to do this, please mention it at least in one of the two posts.

The desired behavior can be achieved by using a keydown event handler attached to the TreeView and node manipulation methods from the TreeView API - insertAfter and insertBefore.

It is important to point out that the native TreeView keyboard navigation also uses the arrow keys and the keydown event, so in order to prevent mixing the two behaviors, you will have to disable the native TreeView keyboard navigation.

When the user selects an item and presses an arrow key, you will need to find out the currently selected TreeView item:

http://docs.kendoui.com/api/web/treeview#select

Use e.preventDefault() to prevent the browser window from scrolling the page when using the arrow keys.

The prev() and next() methods used below are part of the jQuery API.

$(document).ready(function() {
    $("#treeview").kendoTreeView();
 
    function moveNode(e) {
        var treeView = $(this).children("ul").data("kendoTreeView"),
            selectedItem = treeView.select();
        if (e.keyCode == kendo.keys.UP) {
            var prevItem = selectedItem.prev();
            if (prevItem.length) {
                treeView.insertBefore(selectedItem, prevItem);
                e.preventDefault();
            }
        }
        if (e.keyCode == kendo.keys.DOWN) {
            var nextItem = selectedItem.next();
            if (nextItem.length) {
                treeView.insertAfter(selectedItem, nextItem);
                e.preventDefault();
            }
        }
    }
 
    $("#treeview").data("kendoTreeView").wrapper.off("keydown.kendoTreeView").on("keydown.myKendoTreeView", moveNode);
});


Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Yuvarajan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or