Data Grid checkbox selection weird behavior on keyboard

[Cesar Smerling]

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

[Ajith Govarthan]

 

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> 

 

Sample Link: https://stackblitz.com/edit/angular-pm1gbg?file=app.component.html 

 

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. 

[Cesar Smerling]

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.

[Ajith Govarthan]

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. 

 

Forum Link: https://www.syncfusion.com/forums/160680/grid-keyboard-actions-on-checkbox-template-and-anchor-template 

 

Regards, 

Ajith G. 

 

 

 

 

[Cesar Smerling]

Hi

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

[Ajith Govarthan]

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.