Data Grid checkbox selection weird behavior on keyboard

Hi! I have a grid with the CheckBox column enabled for selecting the row, everything works fine with the mouse click.

But on moving with arrows up, down the behavior sometimes get weird. I show a video with that behavior.

What I want to achieve is that the row is selected when the user set in the checkbox cell or when he/she press a special key like Space. I don't want that the arrow function select the row.

How can I achieve this?.

I attached the code of the grid and the video

Thanks

Attachment: GridSelection_6c34dc4d.7z

5 Replies

AG Ajith Govarthan Syncfusion Team December 11, 2020 02:45 PM UTC

 
Hi Cesar, 
 
Thanks for contacting Syncfusion support. 
 
Query: Data Grid checkbox selection weird behavior on keyboard 
 
Based on the attached video demonstration we have prepared sample, but we did not face issues in the prepared sample for your convenience we have attached the sample so please refer the sample for your reference. 
 
Code Example: 
 
App.component.html 
 
<div class="control-section"> 
    <ejs-grid [dataSource]='data' allowPaging='true' [enableHover]="false" [allowSelection]="true" [selectionSettings]="selectOptions" [editSettings]='editSettings' [toolbar]='toolbar'> 
        <e-columns> 
            <e-column type='checkbox' width='50'></e-column> 
            <e-column field='OrderID' isPrimaryKey='true' headerText='Order ID' width='120' textAlign='Right'></e-column> 
            <e-column field='CustomerName' headerText='Customer Name' width='150'></e-column> 
            <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 
            <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right'></e-column> 
            <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right'></e-column> 
        </e-columns> 
    </ejs-grid> 
</div> 
 
 
Query: What I want to achieve is that the row is selected when the user set in the checkbox cell or when he/she press a special key like Space. I don't want that the arrow function select the row.How can I achieve this?. 
 
Based on your query we are unclear about your requirement “the row is selected when the user set in the checkbox cell or when he/she press a special key like Space”. So, please share more details on your requirement that is how you want to select the rows with keyboard navigation keys(down and up) and special keys. 
 
Regards, 
Ajith G. 



CS Cesar Smerling December 11, 2020 08:20 PM UTC

HI

Query: What I want to achieve is that the row is selected when the user set in the checkbox cell or when he/she press a special key like Space. I don't want that the arrow function select the row.How can I achieve this?. 

What I mean is that I want the user to be posititionated in the cell of the checkbox and press for example Space the Check the row and make it selected. Not when the user "navigates" with the arrows.

It seems that I have to make another workaround for the Data Grid.

Based on the attached video demonstration we have prepared sample, but we did not face issues in the prepared sample for your convenience we have attached the sample so please refer the sample for your reference.

The weird behavior is happening, what I meant with this, is the arrow key navigation select the row.


AG Ajith Govarthan Syncfusion Team December 17, 2020 02:00 PM UTC

Hi Cesar, 
 
Thanks for the update. 
 
Query: What I mean is that I want the user to be posititionated in the cell of the checkbox and press for example Space the Check the row and make it selected. Not when the user "navigates" with the arrows.It seems that I have to make another workaround for the Data Grid. 
 
Based on your query you want to check the checkbox when hit the space button with checkbox cell focus. But in your another forum #160680 you have rendered EJS checkbox component as column template and requested to check and uncheck the checkbox with Enter and Alt+C keys. 
 
So, based on these queries we are unclear about your requirement and please kindly confirm that you want to check and uncheck rows with row selection or you want to check and uncheck the checkbox alone with column template as mentioned in the forum #160680. 
 
 
Regards, 
Ajith G. 
 
 
 
 



CS Cesar Smerling December 17, 2020 02:14 PM UTC

Hi

I want to know both cases but for now I prefer what mentioned in the ticket #160680. 


AG Ajith Govarthan Syncfusion Team December 18, 2020 03:45 PM UTC

Hi Cesar,  
  
Thanks for the update. 
 
Query: I want to know both cases but for now I prefer what mentioned in the ticket #160680. 
 
For the above query you can follow the forum #160680 for further updates. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Ajith G. 


Loader.
Up arrow icon