How to prevent tab to focus on a cell when inside a grid in Angular Grid

[Skorri Júlíusson]

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

[Balaji Sekar]

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)) 

  } 

 

 

Sample link: https://stackblitz.com/edit/angular-dgxgkn-7o6bu9 

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

Regards, 

Balaji Sekar.