Hi @Buddy_Outsystems ,

The default behavior of FlexGrid is to let the browser handle focus. However, the keyActionTab property can be used to enable Excel-like tab navigation.

You can use the following JavaScript in the grid’s OnInitialize event to implement the desired tab order:

1. const gridObj = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);
2. 
   
3. if (gridObj && gridObj.provider) {
4.     const grid = gridObj.provider;
5. 
   
6.     if (wijmo && wijmo.grid && wijmo.grid.KeyAction) {
7.         grid.keyActionTab = wijmo.grid.KeyAction.Cycle;
8.     }
9. 
   
10. }

I set the KeyAction to Cycle which move the selection to the next column and at the end goes to the next row, but you can change it to another one depending on your requirements, you can find the list here: KeyAction Enumeration .

You can check more about this functionality among others here: Accessibility Extender.

@Mihai Melencu Thanks,Tab order works fine on normal cell but on row header check box is  not working could you please provide example for rowheader check box column from first check box to down

this property will generate multiselect check box right on this column i want tab order

I want starting fromthe header check box till last check box without moving horizontally on moving inside check box

Hi,

The row header checkbox is not a normal Data Grid column, so keyActionTab does not include it automatically in the tab order.

The solution was to manually handle Tab, Shift + Tab, Space, and Enter. When Tab reaches the last data cell, the script moves focus to the row header checkbox of the next row. When pressing Tab on the checkbox, focus goes back to the first data cell. Space and Enter toggle the checkbox, and focus is restored afterward because Wijmo may otherwise move it back to the selected cell.

 I've updated the OML to include the rowheader as well.