New to Kendo UI for Angular? Start a free 30-day trial


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

   selector: 'my-app',
   template: `
     <input type="text" 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 field="ProductName" title="Product Name" [width]="150">
             <ng-template kendoGridCellTemplate let-dataItem>
                 <!-- The first focusable element will be focused when pressing Enter on the cell -->
                 <input type="text" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
                 <button kendoGridFocusable>Update</button>
         <kendo-grid-column [width]="100">
             <ng-template kendoGridCellTemplate>
                 <!-- A single focusable element will be focused during navigation -->
                 <button kendoGridFocusable>Delete</button>
     <input type="text" 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



In this article

Not finding the help you need?