FocusableDirective

A directive that controls the way focusable elements receive
focus in a navigable Grid.

@Component({
   selector: 'my-app',
   template: `
     <input type="text" class="k-textbox" placeholder="Tab stop #0" style="margin-bottom: 8px;" />
     <kendo-grid [data]="data" [navigable]="true">
         <kendo-grid-column field="ProductID" title="Product ID" width="100">
         </kendo-grid-column>
         <kendo-grid-column field="ProductName" title="Product Name" width="150">
         </kendo-grid-column>
         <kendo-grid-column>
             <ng-template kendoGridCellTemplate let-dataItem>
                 <!-- The first focusable element will be focused when pressing Enter on the cell -->
                 <input type="text" class="k-textbox" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
                 <button class="k-button" kendoGridFocusable>Update</button>
             </ng-template>
         </kendo-grid-column>
         <kendo-grid-column width="100">
             <ng-template kendoGridCellTemplate>
                 <!-- A single focusable element will be focused during navigation -->
                 <button class="k-button" kendoGridFocusable>Delete</button>
             </ng-template>
         </kendo-grid-column>
     </kendo-grid>
     <input type="text" class="k-textbox" placeholder="Tab stop #2" style="margin-top: 8px;" />
   `
})

class AppComponent {
    public readonly data: any = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": true
    }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false
    }];
}

Selector

[kendoGridFocusable]