EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: mzeddd on March 18, 2014, 06:19:11 AM

Title: DataGrid: Multiple select only with CTRL
Post by: mzeddd on March 18, 2014, 06:19:11 AM

Hi,

Is it possible to use CTRL function key to enable multiple select in datagrid?

I mean Datagrid should allow multiple select only when CTRL key is pressed by user.
And I'm talking about mouse click on a row.

But multiple select should work as it is when user clicks on checkbox.
//V

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on March 18, 2014, 08:54:03 PM

The new 'ctrlSelect' property will be added in next version, which only allows multi-selection when ctrl+click is used. To use this feature, please download the updated datagrid plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js and include it to your page. Remember to set 'ctrlSelect' property to true.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: mzeddd on March 18, 2014, 11:42:24 PM

Perfect. This is what I've been waiting for!

But when I load my page in Firefox in console I have the following error:

[10:38:56.803] opts.finder.getRows is not a function @ jquery.datagrid.js:1174

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on March 19, 2014, 12:52:36 AM

Please refer to the attached example 'test.html'. It works fine.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: mzeddd on March 19, 2014, 03:06:30 AM

Hi.

It seems like this error comes from ComboGrid when updated datagrid plugin is used.

See attached file

----------
Update:
Updated datagrid plugin interfere with ComboGrid when pure 1.3.5 version is used.
When I change

Code:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js"></script>

Code:

<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js"></script>

It starts to work again.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on March 19, 2014, 07:39:50 AM

When using combo grid, please extend the 'getRows' for $.fn.combogrid.defaults.finder.

Code:

$.extend($.fn.combogrid.defaults.finder, {
	getRows: function(target){
		return $(target).datagrid('getRows');
	}
})

Another way to solve this issue is to include the combogrid together with datagrid.

Code:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/plugins/jquery.combogrid.js"></script>

Title: Re: DataGrid: Multiple select only with CTRL
Post by: mzeddd on March 21, 2014, 12:00:54 AM

Hi stworthy,

Thank you for this workarounds.

I have one note to updated datagrid plugin:
For example I have datagrid with "singleSelect:false,ctrlSelect:true,pagination:true" options.
1) When I click on a row, I get it selected - Good
2) When I click on another row, I get new row selected. 1st one gets not selected - Good
3) When I click on next row with CTRL. New row gets selected and 2nd row stays selected - Good
4) When I click on 4th row. The 4th row gets selected and #2, #3 rows get not selected - Good
5) I switch to next page. I get new data in datagrid - Good
6) When I click on 1st row in page 2 I get two rows selected: row #4 in page 1 and row #1 on page 2 - Not good

I think in step 6 I have to have one row selected and it should be on page 2.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on March 21, 2014, 12:55:32 AM

This issue have been solved, please download the plugin from http://www.jeasyui.com/easyui/plugins/jquery.datagrid.js.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: mzeddd on March 21, 2014, 02:18:44 AM

~~Seems like 'ctrlSelect' feature stoped working with latest plugin.~~ - i don't know what happend, but now it is working.

But still one note: Lines on 1st page are not selected anymore when I click on any row on next page but checkboxes (I have it as 1st column) remain set.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on March 21, 2014, 06:15:15 AM

Please override the 'clearSelections' and 'clearChecked' methods of datagrid to solve this issue.

Code:

$.extend($.fn.datagrid.methods, {
	clearSelections: function(jq){
		return jq.each(function(){
			var state = $.data(this, 'datagrid');
			var selectedRows = state.selectedRows;
			var checkedRows = state.checkedRows;
			selectedRows.splice(0, selectedRows.length);
			$(this).datagrid('unselectAll');
			if (state.options.checkOnSelect){
				checkedRows.splice(0, checkedRows.length);
			}
		});
	},
	clearChecked: function(jq){
		return jq.each(function(){
			var state = $.data(this, 'datagrid');
			var selectedRows = state.selectedRows;
			var checkedRows = state.checkedRows;
			checkedRows.splice(0, checkedRows.length);
			$(this).datagrid('uncheckAll');
			if (state.options.selectOnCheck){
				selectedRows.splice(0, selectedRows.length);
			}
		});
	}
})

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on March 23, 2014, 11:59:55 AM

Hello
I try to use ctrlSelect in the combination with dragDrop but it looks like it does not work.
When I remove ctrlSelect, dragDrop works OK.
Thanks.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on March 26, 2014, 01:01:40 AM

Hello stworthy
could you please check ctrlSelect when enableDnd is used on grid?
Here it does not working together.

I need that user can select few rows (using ctrlSelect) and drag and drop them all to other grid.
Is that possible?

Thank you

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on March 26, 2014, 02:14:44 AM

The 'enableDnd' method can only drag a single row on grid. To drag multiple rows, you have to use 'draggable' and 'droppable' plugins to achieve this functionality. Please refer to the draggable examples http://www.jeasyui.com/demo/main/index.php?plugin=Draggable&theme=default&dir=ltr&pitem=

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on March 26, 2014, 06:04:47 AM

OK thanks.
There is no way that I use those example to drag multiple rows from one grid to other >:(
Maybe you can write some simple example and put them into Examples section? ;D

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on April 08, 2014, 12:51:05 AM

Quote from: Pierre on March 26, 2014, 06:04:47 AM

OK thanks.
There is no way that I use those example to drag multiple rows from one grid to other >:(
Maybe you can write some simple example and put them into Examples section? ;D

Hello stworthy
any chance that you write some example of how to use drag/drop using ctrl?
I simply can not achieve that,
Thank you.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on April 15, 2014, 06:51:33 PM

Please refer to this simple example http://jsfiddle.net/HSE2j/ that allows dragging multiple rows to another datagrid.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on April 19, 2014, 11:35:23 PM

Thank you man!

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on April 22, 2014, 03:10:32 AM

Hello
is it possible to combine 'enableDnd' with this example?
It works only for the first time (please see attached example).
With other words, when I use drag from left grid and drop to right grid - it works for first time.
What I need is to drag from left and drop to right grid and additional use right grid to move items up or down (using 'enableDnd')
Thanks.

P.S. here is your original example:
http://jsfiddle.net/HSE2j/

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on April 22, 2014, 11:54:07 PM

stworthy, please?

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on April 23, 2014, 12:07:29 AM

This feature request has been sent to our developer team. The 'datagrid-dnd.js' file will be enhanced to support dragging multiple rows.

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on April 23, 2014, 12:30:43 AM

Thank you so much!

Title: Re: DataGrid: Multiple select only with CTRL
Post by: stworthy on April 28, 2014, 08:32:36 PM

The dragging and dropping multiple rows is available now, please download from http://www.jeasyui.com/extension/datagrid_dnd.php. To let the user drag the selected rows, please set 'dragSelection' property to true.

Code:

	$('#dg').datagrid({
		singleSelect: false,
		dragSelection: true,
		onLoadSuccess: function(){
			$(this).datagrid('enableEnd');
		}
	});

Title: Re: DataGrid: Multiple select only with CTRL
Post by: Pierre on April 30, 2014, 06:05:15 AM

Thank you so much. Will try it now!