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 prevent tab to focus on a cell when inside a grid in Angular Grid

I have a grid that has the following selectionSettings:

    this.selectionOptions = {
      type: 'Single',
      mode: 'Row',
      cellSelectionMode: 'BoxWithBorder',
    }

When I select a row in the grid and then press the "TAB" button a cell in the selected row becomes focused ( a box around it). When TAB is pressed again the cell to the right gets the focus:



1. How do I prevent this functionality?
2. How do I make TAB select the row below the selected row instead (same as ArrowDown press)?

Thank you,
Skorri




1 Reply 1 reply marked as answer

BS Balaji Sekar Syncfusion Team July 24, 2020 06:44 AM

Hi Skorri, 
 
Thanks for contacting Syncfusion support. 
 
Query #1: How do I prevent this functionality? 

We can prevent the tab key action using keyConfig property of Grid. In below code example, we have prevented the tab key configuration in dataBound event of Grid 
[app.component.ts] 
dataBound() { 
    (this.grid as any).keyConfigs.tab = ""; // Prevent tab key action 
    .     .     .      . 
  } 

  
Query #2: How do I make TAB select the row below the selected row instead (same as ArrowDown press)? 

We have achieved the down arrow key action to tab key press using keydown event. Please refer the below refer the below code example and sample for more information. 

[app.component.ts] 
dataBound() { 
    (this.grid as any).keyConfigs.tab = "" 
    this.grid.getContentTable().addEventListener("keydown", function (e) {       
      if ((<any>e).keyCode == 9) { 
        var selectedindex = Number((<any>e.target).closest("tr").getAttribute("aria-rowindex")); 
        if (selectedindex != -1) { 
          this.grid.selectRows([selectedindex + 1]); 
        } 
      } 
    }.bind(this)) 
  } 
 
 

Please get back to us, if you need further assistance. 

Regards, 
Balaji Sekar. 


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon