Print Page - Combogrid select item with double click instead of single click

Title: Combogrid select item with double click instead of single click
Post by: jahangir on January 29, 2019, 10:48:11 PM

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

Title: Re: Combogrid select item with double click instead of single click
Post by: jarry on January 30, 2019, 02:12:00 AM

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')
	}
})

Title: Re: Combogrid select item with double click instead of single click
Post by: jahangir on January 30, 2019, 02:55:22 AM

Thank's jarry it works.

Title: Re: Combogrid select item with double click instead of single click
Post by: jahangir on January 30, 2019, 05:09:42 AM

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.

(https://i.ibb.co/sPS7L0m/combo.png)

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')
		
	}
});

Title: Re: Combogrid select item with double click instead of single click
Post by: jarry on January 30, 2019, 07:07:34 AM

Please disable the 'mousedown' event handler.

Code:

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

Title: Re: Combogrid select item with double click instead of single click
Post by: jahangir on January 30, 2019, 10:16:35 PM

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;
}

Title: Re: Combogrid select item with double click instead of single click
Post by: jahangir on January 31, 2019, 04:04:12 AM

Solved the border issue with this code.

Code:

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

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: jahangir on January 29, 2019, 10:48:11 PM