Navigation and Edit with keyboard

Sample: dhtmlxTree

Navigation and Edit with keyboard

Tree allows navigate with keyboard.
Functionality is enabled by enableKeyboardNavigation method. You can use default keys or set own keys. Try to assign new keys and then press 8 or 2 key to move up/down, 6 or 4 to open/close, 8 to call function for selected item.
There are also some keys for editing:
- Press F2 to edit selected item
- Press Enter to close editor
- Use Cursor keys to navigate

	Enable navigation Disable navigation set custom keys - numeric keypad (2,4,5,6,8)

 
    tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
    tree.setImagePath("../imgs/");
    tree.enableSmartXMLParsing(true);
    tree.enableDragAndDrop(true);
    
    //enable item editor
    tree.enableItemEditor(true);
    //enable navigation
    tree.enableKeyboardNavigation(true);
    tree.loadXML("tree.xml");
    
    ...
    //set custom keys - numeric keypad
    tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);

Select any item in tree and use next keys

Up arrow - select upper item

Down arrow - select lower item

Right arrow - open item

Left arrow - close item

Enter - call item's action

F2 - edit

Esc - close editor

 
tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
tree.setImagePath("../imgs/");
tree.enableSmartXMLParsing(true);
tree.enableDragAndDrop(true);
//enable navigation
tree.enableKeyboardNavigation(true);
tree.loadXML("tree.xml");
 
...
//set custom keys - numeric keypad
tree.assignKeys([["up",104],["down",98],["open",102],["close",100],["call",101]]);

THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.