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

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 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

NameTypeDefaultDescription

kendoGridSelectionCheckbox

number

The current index of the dataItem that will be selected.

In this article

Not finding the help you need?