New to Kendo UI for Angular? Start a free 30-day trial
FocusableDirective
A directive that controls the way focusable elements receive focus in a navigable Grid.
@Component({
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>
<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" kendoGridFocusable [value]="dataItem.ProductName" style="margin-right: 8px;" />
<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 kendoGridFocusable>Delete</button>
</ng-template>
</kendo-grid-column>
</kendo-grid>
<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
}];
}
Selector
[kendoGridFocusable]