treeGrid - multiSelect rows only with CTRL or SHIFT key

[amir-t]

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.

[amir-t]

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

I'll appreciate any help.

Tnx.

[stworthy]

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

[amir-t]

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?

[stworthy]

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