SelectionCheckboxDirective
Represents the row-selection checkbox of the Grid. The directive expects the
index of the current row as an input parameter. Inside the
CheckboxColumnComponent
, apply the
directive to an input
element. When the user clicks the checkbox that is associated
with the directive, a selectionChange
event is triggered.
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData" [selectable]="{enabled: true, checkboxOnly: true}">
<kendo-grid-checkbox-column title="Custom checkbox">
<ng-template kendoGridCellTemplate let-idx="rowIndex">
Select row <input [kendoGridSelectionCheckbox]="idx" />
</ng-template>
</kendo-grid-checkbox-column>
<kendo-grid-column field="ProductID" title="Product ID" width="120">
</kendo-grid-column>
<kendo-grid-column field="ProductName" title="Product Name">
</kendo-grid-column>
</kendo-grid>
`
})
class AppComponent {
public gridData: any[];
constructor() {
this.gridData = products;
}
}
const products = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000,
"Discontinued": true
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000,
"Discontinued": false
}
];
Selector
[kendoGridSelectionCheckbox]
Inputs
kendoGridSelectionCheckbox
number
The current index of the dataItem
that will be selected.