Print Page - treeGrid - multiSelect rows only with CTRL or SHIFT key

Title: treeGrid - multiSelect rows only with CTRL or SHIFT key
Post by: amir-t on July 30, 2013, 10:06:12 AM

Hi,

When enabling the multiSelect in treeGrid, by setting the 'singleSelect' property to "false",
The multi selected rows are selected on every 'Left mouse click',
instead of just by pressing the CTRL\SHIFT key + Left mouse click.

Is there any way to implement the multiSelect in that way?

We need a common multiSelect behavior:
multi rows will be selected only with CTRL\SHIFT key + Left mouse click,
and when pressing the Left mouse click (without holding CTRL\SHIFT key) on some other row - all the selections will be cleared and only the new current row will be selected.

I found an example for the required muliSelect behavior, in the following jsFiddle example:
http://jsfiddle.net/valchev/QBESY/

Thanks in advance.

Title: Re: treeGrid - multiSelect rows only with CTRL or SHIFT key
Post by: amir-t on August 05, 2013, 04:28:35 AM

Hi, still didn't succeed to fix the multiSelect issue.

I'll appreciate any help.

Tnx.

Title: Re: treeGrid - multiSelect rows only with CTRL or SHIFT key
Post by: stworthy on August 07, 2013, 12:35:31 AM

Here is the simple implementation of multiple selection with CTRL key.

Code:

var dg = $('#dg');
dg.datagrid({...});
var dc = dg.data('datagrid').dc;
var body = dc.body1.add(dc.body2);
body.unbind('click').bind('click',function(e){
	var tr = $(e.target).closest('tr.datagrid-row');
	var index = parseInt(tr.attr('datagrid-row-index'));
	if (!e.ctrlKey){
		dg.datagrid('clearSelections').datagrid('selectRow',index);
	} else {
		if (tr.hasClass('datagrid-row-selected')){
			dg.datagrid('unselectRow',index);
		} else {
			dg.datagrid('selectRow',index);
		}
	}
});

Title: Re: treeGrid - multiSelect rows only with CTRL or SHIFT key
Post by: amir-t on August 07, 2013, 11:41:56 PM

Thanks.

Is this implementation is suitable For TreeGrid Component?

It seems that this implementation is for dataGrid, i guess its the same code for treeGrid with a bit of changes, but how can i convert to be used with TreeGrid?

Title: Re: treeGrid - multiSelect rows only with CTRL or SHIFT key
Post by: stworthy on August 08, 2013, 12:38:21 AM

For treegrid please try the code below:

Code:

var tg = $('#tg');
tg.treegrid({...});  // create treegrid
var panel = tg.treegrid('getPanel');
var body1 = panel.find('div.datagrid-view1 div.datagrid-body-inner');
var body2 = panel.find('div.datagrid-view2 div.datagrid-body');
var body = body1.add(body2);  // the body container
body.unbind('click').bind('click',function(e){
	var tr = $(e.target).closest('tr.datagrid-row');
	var id = tr.attr('node-id');
	if (!e.ctrlKey){
		tg.treegrid('clearSelections').treegrid('selectRow',id);
	} else {
		if (tr.hasClass('datagrid-row-selected')){
			tg.treegrid('unselectRow',id);
		} else {
			tg.treegrid('selectRow',id);
		}
	}
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: amir-t on July 30, 2013, 10:06:12 AM