Title: keyboard navigation on combotree's tree panel
Post by: iskandarkbr on February 08, 2015, 08:41:17 PM
I've applied keyboard navigation on combotree, it works properly. But, when i click the tree panel the navigation doesn't work at all. I've solved that by add tree extend for keyboard navigation, and it works (thank for the forum's solution) The problem appears when i enter the node on tree panel, the cursor doesnt want to focus on textbox (validatebox). Any one can solve it? here the tree navigation code: $.extend($.fn.tree.methods, {
highlight: function(jq, target){
return jq.each(function(){
$(this).find('.tree-node-selected').removeClass('tree-node-selected');
$(target).addClass('tree-node-selected');
})
},
nav: function(jq){
return jq.each(function(){
var t = $(this);
t.attr('tabindex',0);
t.unbind('.tree').bind('keydown.tree', function(e){
var curr = getCurr();
if (!curr.length){return}
if (e.keyCode == 40){ // down
var li = getNext(curr);
if (li.length){
t.tree('highlight', li[0]);
}
} else if (e.keyCode == 38){ // up
var li = getPrev(curr);
if (li.length){
t.tree('highlight', li[0]);
}
} else if (e.keyCode == 13){
t.tree('select', curr[0]);
} else if (e.keyCode == 39){ // right
if (!t.tree('isLeaf', curr[0])){
t.tree('expand', curr[0]);
}
} else if (e.keyCode == 37){ // left
if (!t.tree('isLeaf', curr[0])){
t.tree('collapse', curr[0]);
}
}
e.preventDefault();
}).bind('mouseover.tree', function(e){
var node = $(e.target).closest('div.tree-node');
if (node.length){
t.find('.tree-node-hover').each(function(){
if (this != node[0]){
$(this).removeClass('tree-node-hover');
}
})
}
});
function getCurr(){
var n = t.find('.tree-node-hover');
if (!n.length){
n = t.find('.tree-node-selected');
}
return n;
}
function getNext(curr){
var n = $();
var node = t.tree('getNode', curr[0]);
if (t.tree('isLeaf', node.target)){
n = curr.parent().next().children('div.tree-node');
if (!n.length){
var p = t.tree('getParent', curr[0]);
if (p){
n = $(p.target).parent().next().children('div.tree-node');
}
}
} else {
if (node.state == 'closed'){
n = curr.parent().next().children('div.tree-node');
} else {
var cc = t.tree('getChildren', curr[0]);
if (cc.length){
n = $(cc[0].target);
}
}
}
return n;
}
function getPrev(curr){
var n = curr.parent().prev().children('div.tree-node');
if (n.length){
var node = t.tree('getNode', n[0]);
if (node.state == 'open'){
var cc = t.tree('getChildren', node.target);
if (cc.length){
n = $(cc[cc.length-1].target);
}
}
} else {
var p = t.tree('getParent', curr[0]);
if (p){
n = $(p.target);
}
}
return n;
}
})
}
});here the apply it : $(function(){
var t=$('#cbtree').combotree('tree');
t.tree('nav');
t.bind('keydown.tree', function(e){
if (e.keyCode == 13){
var node= t.tree('getSelected');
$('#cbtree').combotree('setText',node.text);
$(node.target).trigger('dblclick');
$('#cbtree').focus();
//$('#cbtree').combotree('hidePanel');
}
})
})
Title: Re: keyboard navigation on combotree's tree panel
Post by: stworthy on February 09, 2015, 08:48:31 PM
To do the navigation on combotree, please override the 'keyHandler' option. $('#cbtree').combotree({
keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
down: function(e){
$(this).combotree('tree').trigger(e);
},
up: function(e){
$(this).combotree('tree').trigger(e);
},
left: function(e){
$(this).combotree('tree').trigger(e);
},
right: function(e){
$(this).combotree('tree').trigger(e);
}
})
})
$('#cbtree').combotree('tree').tree('nav');
Title: Re: keyboard navigation on combotree's tree panel
Post by: roberto on November 24, 2016, 06:03:56 PM
Is it possible to add a 'scroll' behavior when the next/prev node is not visible? :)
Title: Re: keyboard navigation on combotree's tree panel
Post by: stworthy on November 25, 2016, 05:36:17 PM
The 'scrollTo' method is available in the 'tree' component. You can call it to scroll to the special node.
Title: Re: keyboard navigation on combotree's tree panel
Post by: roberto on November 26, 2016, 08:58:56 AM
hi,
Yes, it solved my 'problem'!
Tks
|