We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Selection using keyboard and CTRL key does not work

Thread ID:

Created:

Updated:

Platform:

Replies:

141754 Jan 2,2019 06:35 PM UTC Jan 8,2019 11:00 AM UTC JavaScript - EJ 2 7
loading
Tags: Grid
Davi Daniel Siepmann
Asked On January 2, 2019 06:35 PM UTC

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 [Syncfusion]
Replied On January 3, 2019 06:44 AM UTC

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 
 
  1. 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)] 
 



Regards, 
Thavasianand S. 


Davi Daniel Siepmann
Replied On January 3, 2019 12:59 PM UTC

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 [Syncfusion]
Replied On January 4, 2019 09:39 AM UTC

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, 


Regards, 
Madhu Sudhanan P 


Davi Daniel Siepmann
Replied On January 4, 2019 05:48 PM UTC

Hi Madhu Sudhanan P

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

Thank you.

Madhu Sudhanan P [Syncfusion]
Replied On January 7, 2019 05:26 AM UTC

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
Replied On January 7, 2019 05:06 PM UTC

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 [Syncfusion]
Replied On January 8, 2019 11:00 AM UTC

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  
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  
Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon