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

How to change left and right arrow traversing in React Grid

When the enableRtl attribute of the table is enabled, the LeftArrow and RightArrow buttons on the keyboard do the opposite. When we want to go to the cell on the left side of the table, by pressing the LeftArrow button, it is transferred to the cell on the right and vice versa. Please provide a solution to this problem. Thankful

1 Reply 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team February 8, 2021 04:02 PM UTC

Hi Arman, 

Greetings from syncfusion support 

We have analyzed your query and we would like to inform you that, By default when you enable the RTL mode the LeftArrow and RightArrow buttons on the keyboard will do the opposite. It was the default html behavior.  

If you like to traverse the Grid cell without edit mode by using left and right arrow. You can follow the below solution to achieve your requirement. Based on your query we are prevent the keyboard actions of left and right arrow by using the keyConfigs of Grid in the dataBound event. Please refer the below code example and sample for more information. 

dataBound() { //databound event of Grid 
    this.gridInstance.keyboardModule.keyConfigs.leftArrow = "rightarrow"; 
    this.gridInstance.keyboardModule.keyConfigs.rightArrow = "leftarrow"; 

Note: We cannot achieve this same requirement when the Grid is in edited state. 

Rajapandi R 

Marked as answer
Live Chat Icon For mobile
Up arrow icon