Combogrid select item with double click instead of single click

[jahangir]

Is it posible to select item from combogrid with double click on row instead of single click.

[jarry]

You can't do that but you can custom your combo component. Please refer to this code:

Code:

var cc = $('#cc').combo({
	editable:false
});
var dg = $('<table></table>').appendTo($('#cc').combo('panel'));
dg.datagrid({
	columns: [[
		{field:'f1',title:'Col1',width:100},
		{field:'f2',title:'Col2',width:100}
	]],
	data: [
		{id:1,f1:'val11',f2:'val12'},
		{id:2,f1:'val21',f2:'val22'}
	],
	onDblClickRow: function(index,row){
		cc.combo('setValue', row.id).combo('setText',row.f1);
		cc.combo('hidePanel')
	}
})

[jahangir]

Thank's jarry it works.

[jahangir]

I am facing a problem, when i add a toolbar to datagrid which includes textboxes i can't select the textbox.
Please see the below image and code.

Code:

<input id="cc" class="easyui-combo"></input>

<div id="tb" style="padding:2px 5px;">			
	Search on: 
	<select class="easyui-combobox" panelHeight="auto" style="width:100px">
		<option value="id">Item ID</option>
		<option value="prod">Product</option>
		<option value="attr">Attribute</option>			
		<option value="status">Status</option>			
	</select>
	Search: <input class="easyui-textbox" style="width:110px"></input>
	<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
</div>	        	

Code:

var cc = $('#cc').combo({
	editable:true, panelWidth: 500
});

var dg = $('<table></table>').appendTo($('#cc').combo('panel'));

dg.datagrid({
	columns: [[
		{field:'itemid',title:'Item ID',width:80},
		{field:'productname',title:'Product',width:120},
		{field:'listprice',title:'List Price',width:80,align:'right'},
		{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
		{field:'attr1',title:'Attribute',width:200},
		{field:'status',title:'Status',width:60,align:'center'}
	]],
	url: 'datagrid_data1.json',
	toolbar:'#tb',
	height:'100%',
	width:'100%',
	fitColumns: true,
	singleSelect:true,				
	onDblClickRow: function(index,row){			
		
		cc.combo('setValue', row.itemid).combo('setText',row.productname);
		cc.combo('hidePanel')
		
	}
});		

[jarry]

Please disable the 'mousedown' event handler.

Code:

var cc = $('#cc').combo({
	editable:false,
	panelWidth: 500,
	panelEvents: {
		mousedown: function(e){
		}
	}
});

[jahangir]

Hi Jarry!

Thanks this solved the problem. One last minor issue combobox dropdown panel border width is doubled. I use following css to solve this issue, but it removes the border from all comboboxes is there any way to remove the panel border from only a specific combobox.

Code:

.combo-panel{
	border:0;
}

[jahangir]

Solved the border issue with this code.

Code:

$('#cc').combo('panel').css('border','none');