Override OOTB up and down navigation functionalities in DHTMLX tree structure?

Question

How can I override the OOTB key up and key down functionalities . Currently in the OOTB navigation works fine and after we have navigated to desired selection when we press enter it displays the corresponding tree item details . But what I have been trying is the details should be displayed on up and down navigation only without pressing enter .

Previously this was the code .

 tree.attachEvent('onKeyPress', function(key, event){
            if((tree._selected).length > 0){
                var xKey = 88, vKey = 86, cKey = 67, delKey = 46, escKey = 27,enterKey = 13,i, treeId, selectedNodeId, selectedNodeIds=[];
                if(event.ctrlKey && (key==cKey)) {
                    pubsub.publish('copyTree' + index);
                }   
                else if(event.ctrlKey && (key==vKey)){
                    pubsub.publish('pasteTree' + index);
                }   
                else if(event.ctrlKey && (key==xKey)){
                    pubsub.publish('cutTree' + index);
                }
                else if(key==delKey){
                    pubsub.publish('deleteTree' + index, 'delete');
                }else if(key==escKey){
                    tree.clearCut();
                    cutCopyManager.clear();
                }else if(key==enterKey){
                    if(tree._selected && tree._selected.length>0){
                        treeId = (tree._selected)[0].id;
                        showProductDetails(treeId);
                    }
                }
                else{
                     return true;
                }
            }
        });

I have modified this way

tree.attachEvent('onKeyPress', function(key, event){
            if((tree._selected).length > 0){
                var xKey = 88, vKey = 86, cKey = 67, delKey = 46, escKey = 27,enterKey = 13,downKey = 40,upKey = 38,
                    i, treeId, selectedNodeId, selectedNodeIds=[];
                if(event.ctrlKey && (key==cKey)) {
                    pubsub.publish('copyTree' + index);
                }   
                else if(event.ctrlKey && (key==vKey)){
                    pubsub.publish('pasteTree' + index);
                }   
                else if(event.ctrlKey && (key==xKey)){
                    pubsub.publish('cutTree' + index);
                }
                else if(key==delKey){
                    pubsub.publish('deleteTree' + index, 'delete');
                }else if(key==escKey){
                    tree.clearCut();
                    cutCopyManager.clear();
                }else if(key==enterKey){
                    if(tree._selected && tree._selected.length>0){
                        treeId = (tree._selected)[0].id;
                        showProductDetails(treeId);
                    }
                }
                else if(key==upKey){
                    if(tree._selected && tree._selected.length>0){
                        treeId = (tree._selected)[0].id;
                        showProductDetails(treeId);
                    }
                }
                else if(key==downKey){
                    if(tree._selected && tree._selected.length>0){
                        treeId = (tree._selected)[0].id;
                        showProductDetails(treeId);
                    }
                }
                else{
                     return true;
                }
            }
        });

But the selection it self has disappeared now. Tried to debug this since 2 days . Can some one tell me what is wrong ??

Answer 1

I found it out myself with some research . We can actually traverse a tree by incrementing or decrementing index.

else if(key==40 || key==38){
    if(tree._selected && tree._selected.length>0){
      treeId = (tree._selected)[0].id;
      indexid = tree.getIndexById(treeId);
       if(key==40){
        tempId = tree.getRootNode().id;
        indexid = indexid + 1;
        treeId = tree.getItemIdByIndex(tempId,indexid);
        showProductDetails(treeId);
       }else if(key==38){
        tempId = tree.getRootNode().id;
        indexid = indexid - 1;
        treeId = tree.getItemIdByIndex(tempId,indexid);
        showProductDetails(treeId);
    }
}
return true;
}