Selection using keyboard and CTRL key does not work

[Davi Daniel Siepmann]

The normal behavior when selecting rows in a table using the keyboard is navigating and pressing Space key. We can't get this working in Syncfusion's Grid component.

When using the property persistSelecion=true, it selects the rows automatically, and when the property is false it deselect previews selected rows when navigating.

Also, the CTRL key does not work when navigating with the keyboard, probably due to a browser limitation (Chrome in my case)

Anyway, 99% of the time what we see is, you navigate using the keyboard, and you select the row using Space key. That should exist on Syncfusion's Grid component in my opinion.

[Thavasianand Sankaranarayanan]

Hi Davi, 

Greetings from Syncfusion. 

We have analyzed your query. By default, the grid row will be selected automatically when navigating through keyboard. 

1. When persistSelection is true

To select multiple rows, just press “Navigation key” alone 

 

2. When setting selectionSettings type as ‘multiple’

To select multiple rows, press “Shift + Navigation key”  

 

You can refer the below sample for more reference. 

[selection using (shift + navigation key)] 

 

Sample link: https://stackblitz.com/edit/v5hwyp-819hv7?file=index.ts 

Regards, 

Thavasianand S. 

[Davi Daniel Siepmann]

Hi Thavasianand S., thanks for the reply.

However, this is what I'm referring to, the user can't navigate and select the rows he want, because using both of your methods it'll be selecting all the rows when you navigate. I've never seen a behavior like that before.

What the user (including me) normally expect is navigating with the keyboard and selecting just the rows he want to (using Spacebar normally).

What I believe is missing in Syncfusion is a way to use both persistSelection=true (to persist your selection) but navigate between lines without selecting them automatically, so the user can press Spacebar to select just the rows he want to.

Regards

[Madhu Sudhanan P]

Hi Davi, 

As per your requirement, we have created a sample. In the below sample, we have achieved persist selection of multiple rows using rowSelection event and keydown event. Please find the code example. 

[code example] 

... 

rowSelecting: (args) => { 

  selectedRecordIndex = args.rowIndex; 

  if (grid.getSelectedRecords().length && !isSpaceKeyPressed) { 

                args.cancel = true;    //to discard selection while navigating 

  } 

} 

... 

… 

document.addEventListener('keydown', function (eve) { 

  if (eve.keyCode === 32) { 

    isSpaceKeyPressed = true; 

    grid.selectRow(selectedRecordIndex);  //to select record when pressing space key 

    isSpaceKeyPressed = false; 

  } 

}) 

Please find the below sample for more reference, 

Sample link: https://stackblitz.com/edit/v5hwyp-819hv7?file=index.ts 

Regards, 

Madhu Sudhanan P 

[Davi Daniel Siepmann]

Hi Madhu Sudhanan P

It seems to do the job, we're gonna apply this solution.

Thank you.

[Madhu Sudhanan P]

Hi Davi, 

Thanks for the update. Please try the solution and get back to us if you need further assistance. 

Regards, 

Madhu Sudhanan P 

[Davi Daniel Siepmann]

Maybe I missed something, but in order for user suggestion to work, I've changed a lot your example (that, by the way, is not working on stackblitz)

So, our final solution was to add both a keyboard listener and a mouse click listener inside the grid element.

I'd say Syncfusion should deliver the library with this option, as almost 100% of the time in all kinds of the software out there, this is the desired behavior.

//as we've created a bridge, we need to set all this

this.gResizeStop = this.resizeStop;

this.gRowSelecting = this.rowSelecting.bind(this);

this.gridRowNavigationListener = this.gridRowNavigationListener.bind(this);

this.gridRowClickListener = this.gridRowClickListener.bind(this);

//when attaching the component

const gridContent = document.querySelector(".e-gridcontent");

gridContent.addEventListener("keydown", this.gridRowNavigationListener);

gridContent.addEventListener("click", this.gridRowClickListener);

//when dettaching the component

const gridContent = document.querySelector(".e-gridcontent");

gridContent.removeEventListener("keydown", this.gridRowNavigationListener);

gridContent.removeEventListener("click", this.gridRowClickListener);

private rowSelecting = function (args) {

this.selectedRecordIndex = args.rowIndex;

args.cancel = !this.isRowSelectionAllowed;

};

//You must do some checks to be sure when to fire the event when not

private gridRowNavigationListener = function (eve) {

const target = eve.target.nodeName === "INPUT" ? eve.target.parentElement.parentElement : eve.target;

const isChecked = target.classList.contains("e-active");

if (eve.keyCode === 32 && !isChecked) {

setTimeout(() => {

this.isRowSelectionAllowed = true;

this.uiControl.selectRow(this.selectedRecordIndex);

this.isRowSelectionAllowed = false;

});

}

};

//same for the click event, depends on where the user click, and also if it's already checked or not

private gridRowClickListener = function (eve) {

const target = eve.target.nodeName === "SPAN" ? eve.target.parentElement.parentElement : eve.target.parentElement;

const isChecked = target.classList.contains("e-active");

if (!isChecked) {

setTimeout(() => {

this.isRowSelectionAllowed = true;

this.uiControl.selectRow(this.selectedRecordIndex);

this.isRowSelectionAllowed = false;

});

}

};

[Thavasianand Sankaranarayanan]

Hi Davi, 

Thank you for requesting this feature “Spacebar selection support like file explorer selection” and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. We have added this feature request to our database.  

You can now track the current status of this feature request here  

https://www.syncfusion.com/feedback/4186/spacebar-selection-support-like-file-explorer-selection.  

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. 

You can also communicate with us regarding the open features any time using our Feature Report page  

https://www.syncfusion.com/feedback/4186/spacebar-selection-support-like-file-explorer-selection 

Regards, 

Thavasianand S.