Angular – Kendo Angular 2 grid with checkbox column

angularcheckboxkendo-gridkendo-uikendo-ui-angular2

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?

Best Answer

I think i found a simular but maybe cleaner solution:

use the "kendo-grid-checkbox-column" component:

<kendo-grid-checkbox-column>
    <ng-template kendoGridHeaderTemplate let-dataItem>
        <input 
            type="checkbox" 
            name="selectAll"
            (change)="selectAllRows($event)" 
            [checked]="allRowsSelected"/>
    </ng-template>
</kendo-grid-checkbox-column>

with attributes in kendo-grid 

[selectedKeys]="rowSelected"

and 

[kendoGridSelectBy]="rowsSelectedKeys"

you can then in the controller affect those value:

private rowsSelected: number[] = [];

private rowsSelectedKeys(context: RowArgs): number {
    return context.dataItem.id;
}

private selectAllRows(e): void {
    if (e.target.checked) {
      this.allRowsSelected = true;
      this.rowsSelected = this.gridData.data.map(o => o.id);
    } else {
      this.allRowsSelected = false;
      this.rowsSelected = [];
    }
}

the avantage of using the grid data is that if you have filters, then it will "check" only the data filtered. In my example, you can then on any event handle the ids of the rows checked.

Related Topic