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" />
     <kendo-grid [data]="data" [navigable]="true">
         <kendo-grid-column field="ProductID" title="Product ID" width="40">
         <kendo-grid-column field="ProductName" title="Product Name" width="100">
             <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" />
                 <input type="button" kendoGridFocusable value="Update" />
         <kendo-grid-column width="80">
             <ng-template kendoGridCellTemplate>
                 <!-- A single focusable element will be focused during navigation -->
                 <input type="button" kendoGridFocusable value="Delete" />
     <input type="text" placeholder="Tab stop #2" />

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