Title: EasyUI Combo Tree does not work with the down arrow key
Post by: Surender Kherwa on July 22, 2013, 05:14:30 AM
EasyUI Combo Tree does not work with the down arrow key. When we select the combo tree and try to navigate though tree option using the down arrow key from keyborad it is not working.
Tried adding: data-options="selectOnNavigation:false" but with no luck.
Is there any other way I can get the down arrow key to navigate to the combotree list?
Title: Re: EasyUI Combo Tree does not work with the down arrow key
Post by: stworthy on July 22, 2013, 08:38:20 AM
You will have to extend the keyboard navigation functionality on combotree component. Here is the simple implementation of doing so. (function(){
$.extend($.fn.combotree.methods,{
nav:function(jq,dir){
return jq.each(function(){
var opts = $(this).combotree('options');
var t = $(this).combotree('tree');
var nodes = t.tree('getChildren');
if (!nodes.length){return}
var node = t.tree('getSelected');
if (!node){
t.tree('select', dir>0 ? nodes[0].target : nodes[nodes.length-1].target);
} else {
var index = 0;
for(var i=0; i<nodes.length; i++){
if (nodes[i].target == node.target){
index = i;
break;
}
}
if (dir>0){
while (index < nodes.length-1){
index++;
if ($(nodes[index].target).is(':visible')){break}
}
} else {
while (index > 0){
index--;
if ($(nodes[index].target).is(':visible')){break}
}
}
t.tree('select',nodes[index].target);
}
if (opts.selectOnNavigation){
var node = t.tree('getSelected');
$(node.target).trigger('click');
$(this).combotree('showPanel');
}
});
}
});
$.extend($.fn.combotree.defaults.keyHandler,{
up:function(){
$(this).combotree('nav',-1);
},
down:function(){
$(this).combotree('nav',1);
},
enter:function(){
var t = $(this).combotree('tree');
var node = t.tree('getSelected');
if (node){
$(node.target).trigger('click');
}
$(this).combotree('hidePanel');
}
});
})(jQuery);
|