search combotree

[zombie86]

Dear all,

first of all I would like to thank you for this lovely UI..

actually I do need some help in searching a combotree which placed in datagrid when I search for some values it shorten the list for the founded records but I need it to expand the tree as well.....

your help is highly appreciated

[jarry]

Set the 'editable' property to true for the combotree component.

[zombie86]

Set the 'editable' property to true for the combotree component.

thanks  Jarry for your effort, but I already set it by the options
can you have a look on attached images

I need it to show like combotree2 as expanded tree for searched result

you help is highly appreciated

[jarry]

You can call 'expandTo' method to tree to expand to the specified node. Please refer to this code.

Code:

$('#ct').combotree({
	editable: true,
	data: data,
	keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
		query: function(q,e){
			$.fn.combotree.defaults.keyHandler.query.call(this,q,e);
			var t = $(this).combotree('tree');
			var node = t.tree('findBy',{field:'text',value:q});
			if (node){
				t.tree('expandTo', node.target)
			}
		}
	})
})

[zombie86]

You can call 'expandTo' method to tree to expand to the specified node. Please refer to this code.

Code:

$('#ct').combotree({
	editable: true,
	data: data,
	keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
		query: function(q,e){
			$.fn.combotree.defaults.keyHandler.query.call(this,q,e);
			var t = $(this).combotree('tree');
			var node = t.tree('findBy',{field:'text',value:q});
			if (node){
				t.tree('expandTo', node.target)
			}
		}
	})
})

thanks Jarry for your effort, I tried the code but it only works for the first found exact match, and fails when there is more results

and could you please guide me how to achieve the navigation functionality for the combotree which is defined in datagrid

here is some snipt of code:

var account = $('#dg_invoice_trans').datagrid('getColumnOption', 'account_id');
            account.editor = {
                type:'combotree',
                options:{
                    valueField:'id',
                    treeField:'text',
                    method:'get',
                    data:accounts.coa,
                    selectOnNavigation:true,
                    editable:true,
                    required:true,
                    value: row.account_id,
                    filter: function(q, node){
                        return node.text.toLowerCase().indexOf(q.toLowerCase()) >= 0;
                    },
                    keyHandler: $.extend({}, $.fn.combotree.defaults.keyHandler, {
                        enter:function(e){
                            var t = $(this).combotree('tree');
                            t.tree('expandAll');
                        },
                        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);
                        }
                    }),
                    onBeforeSelect:function(node){
                        var isLeaf = $(this).tree('isLeaf', node.target);
                        if(!isLeaf){ 
                            return false;
                        } 
                    },
                    onChange:function(value){
                        if(value>0){
                            $.ajax({
                                url:'<?php echo base_url('pediaerp/fam/accounting/ajax_get_account_details/NULL/')?>'+value,
                                type:'GET',
                                dataType:'JSON',
                                success:function(data){
                                    var ed_cost_center_id=$('#dg_invoice_trans').datagrid('getEditor',{index:rowIndex,field:'cost_center_id'});
                                    if(data.mfc_id==2){
                                        $(ed_cost_center_id.target).combotree('enable');
                                    }else{
                                        $(ed_cost_center_id.target).combotree('reset');
                                        $(ed_cost_center_id.target).combotree('disable');
                                    }
                                }
                            });
                        }
                    }
                }
            }