Kendo Grid: How can I TAB to Command Column Buttons when editing a Row?

[Paul]

We have this code (it's way stripped down) and when I have focus on the last field during editing, I want to be able TAB from it to the Cancel button in the command column. This currently does not work. TABing instead takes me to the next focusable elements outside the Grid.

Any suggestions appreciated.

<!-- we dynamically generate columns and user our own component to render the field when editing -->
<ng-container *ngFor="let columnDef of this.GridColumnDefs; let iColIndex=index">
            <kendo-grid-column  field="{{columnDef.name}}"
                               title="{{columnDef.displayName}}">
                <ng-template kendoGridCellTemplate let-dataItem>
                    . . .
                </ng-template>
                <ng-template kendoGridEditTemplate>
                    <app-form-field-wrapper ...etc...><app-form-field-wrapper> <!-- this is our own component -->
                </ng-template>
            </kendo-grid-column>
        </ng-container>

        <kendo-grid-command-column [width]="180">
            <ng-template kendoGridCellTemplate>
                <button kendoGridCancelCommand kendoGridFocusable>Cancel</button>
            </ng-template>
        </kendo-grid-command-column>
        . . .    

[Slavena]

Hello Paul,

Thank you for the provided details and code snippet.

I tried to reproduce the described behavior but to no avail. Here is an example of my attempt:

https://stackblitz.com/edit/angular-p3rdwb?file=src%2Fapp%2Fapp.component.ts

Please feel free to update the example above so that it demonstrates the unwanted behavior. This would help us further investigate and propose a suitable solution. Thank you for your cooperation in advance.