Kendo Angular 2 grid with checkbox column

Viewed 16487

I'm trying to implement a column of checkboxs in my Kendo Angular 2 grid.

I am following the example in the documentation (without checkboxes): http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-remote-directives

I have changed the example to add the column: http://plnkr.co/edit/hNkj1ZFZJopDyFxn59B3?p=preview

Here is my component:

@Component({
selector: 'my-app',
template: `
    <kendo-grid 
        productsBinding
        [pageSize]="10"
        [pageable]="true"
        [sortable]="true"
        [height]="270">
      <kendo-grid-column field="checked" title="" width="50" [headerStyle]="{'text-align': 'center'}" [style]="{'text-align': 'center'}">
        <ng-template kendoGridHeaderTemplate let-dataItem>
          <md-checkbox
              class="check-column"
              [checked]="allItemsChecked"
              color="primary"
              (change)="checkAllClicked($event)">
          </md-checkbox>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
          <md-checkbox
              class="check-column"
              [checked]="dataItem.checked"
              color="primary">
          </md-checkbox>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProductID" width="80"></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice" width="80" format="{0:c}"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" width="80"></kendo-grid-column>
   </kendo-grid>
`
})
export class AppComponent {

  public allItemsChecked: boolean = false;

  checkAllClicked($event){
    console.log("checkAllClicked",$event);
    //TODO: implement...
  }
}

(In Plunker you can see the ProductsBindingDirective and ProductsService implementation)

But now I'm not sure what is the best approach to change the checked property of all items when the checkbox in the header is clicked...

Should I get the data from the grid, change the property in all items and set it back? Or there is another option that I'm not seeing?

2 Answers
Related