Shift-select multiple rows

[robfParticipant]

Hi,
I have a grid that uses checkboxes for multi selection(s). Is there a way to activate a multi-select using the standard SHIFT key?
e.g. I want to multi-select rows 10-30, but don’t want to select them one-by-one and instead click row 10, hold shift, select row 30, have them all selected.

Is there an option for this?

Thanks
Rob

[robfParticipant]

Follow-up question – I know there is the selectionMode of “multiplerows” but I wanted to take advantage of the “visual” aspect of selecting via checkboxes and also the ‘select all/select none’ options.
Hope this further clarifies by question.

[adminKeymaster]

Hi robf,

We have this implemented in smart.grid – https://www.htmlelements.com/demos/grid/overview/. We will consider it for jqxGrid as in it is currently not implemented.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Thanks, Peter. So for the time being my only option is to go with selectionmode “multiplerows”?
No temporary work-around/reuse of some code from smart.grid?

Rob

[adminKeymaster]

Hi Rob,

It takes time to implement additional selection mode, it is not possible to reuse code from smart.grid in this case.
Yes, you can use the multiple rows selection mode.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hello Peter,

Hoping you can give some guidance on this. Trying to build the shift select functionality for the checkboxes and got something generally working.
Problem is, it is very, very slow. Wanted to know if you see something obvious in my code for optimization. Maybe something with how I am using beginupdate and endupdate

Appreciate any direction on this!
Thanks
Rob

	
myJQGrid.on('rowselect rowunselect', event =>
			{
			handleCheckboxMultiSelect(event);
                        }

var lastSelectedRowIndex = null;

handleCheckboxMultiSelect = event => 
	{
		let grid = myJQGrid;
		let rowIndex = event.args.rowindex;
	
		if (isShiftKeyPressed) 
		{
			if (lastSelectedRowIndex !== null) 
			{
				let startRow = Math.min(rowIndex, lastSelectedRowIndex );
				let endRow = Math.max(rowIndex, lastSelectedRowIndex );
	
				grid.jqxGrid('beginUpdate');

				for (let i = startRow; i <= endRow; i++) 
				{
			           this.toggleCheckboxForRow(grid, i, event);
				}

				grid.jqxGrid('endupdate');
			}
		} 
		else 
		{
			this.toggleCheckboxForRow(grid, rowIndex, event);
		}
	
		lastSelectedRowIndex = rowIndex;
	}
	
	toggleCheckboxForRow = (grid, rowIndex, event) =>
	{
		var rowData = grid.jqxGrid('getrowdata', rowIndex);

		if (rowData)
		{
			rowData.selected = !rowData.selected; 
			grid.jqxGrid('updaterow', rowIndex, rowData);
			grid.jqxGrid(event.type === 'rowselect' ? 'selectrow' : 'unselectrow', rowIndex); 
		}
	}

• This reply was modified 1 month ago by  robf.
• This reply was modified 1 month ago by  robf.
• This reply was modified 1 month ago by  robf.
• This reply was modified 1 month ago by  robf.
• This reply was modified 1 month ago by  robf.

[robfParticipant]

—
Hi Peter – one more follow up question please. It appears that if I do use selectionmode=”multiplerows” there is no way to do a SELECT ALL / SELECT NONE? i.e. the standard CTRL-A doesn’t work in the grid to select all rows, and I don’t see any way to select none.

Any ideas on this? Is this something I would have to build myself?

Also, for a bit more context, the grid has to change from single-select to multi-select based on other things going on in the app. So the selection mode is dynamically set.

Thanks.
Rob

[adminKeymaster]

Hi Rob,

We do not support the selection mode you’re looking for in jqxGrid. As for the provided custom code, it is very probably that rowselect/rowunselect are called during the execution of the code inside the event handler i.e causing a loop. I would suggest you to add if-conditions if this is the case.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hi Peter,
You pointed me in the right direction, and flagging whether I am already inside the event handler did help.
Appreciate your time!
Rob

[Author]

Posts