Kendo Angular 2 grid with checkbox column

Question

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?

Answer 1

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.

Answer 2

This is how I implemented it. I can't see how you are databinding, I used GridDataResult. I simplified the grid for the sake of this example.

some required components, particularly GridDataResult, State and process I use in this example:

import { GridDataResult, PageChangeEvent } from '@progress/kendo-angular-grid';
import { SortDescriptor, State, process } from '@progress/kendo-data-query';

A couple local variables:

export class ClassComponent {
    gridViewAdd: GridDataResult;  // stores grid data
    allStudentsSelected: boolean = false;  // bound to header checkbox
    stateAdd: State = {   // will hold grid state
        skip: 0,
        take: 2
    };

Component HTML grid. One note here, I had to set the header column that holds the checkbox to sortable=false to get the click event to register.

<kendo-grid 
[data]="gridViewAdd">
    <kendo-grid-column [sortable]="false" field="add" width="50" [headerStyle]="{'text-align': 'center'}" [style]="{'text-align': 'center'}">
        <ng-template kendoGridHeaderTemplate let-dataItem>
            <input style="zoom: 1.2;" 
                 type="checkbox" 
                 name="selectAll"
                 (change)="selectAllStudentsChange($event)" 
                 [checked]="allStudentsSelected"/>
         </ng-template>
         <ng-template kendoGridCellTemplate let-dataItem>
             <input style="zoom: 1.2;" 
                 type="checkbox" 
                 [checked]="dataItem.add" />
         </ng-template>
    </kendo-grid-column>
</kendo-grid>

This is where I bind to the data object array:

private loadStudents(): void {
    this.gridViewAdd = process(this.students, this.stateAdd);
}

And this is the click event. You can grab the current items in the grid through the GridDataResult variable I set earlier. Loop through your data and update the data element bound to your checkboxes. Mine is a boolean value named "add"

selectAllStudentsChange(e): void {
    // switch inactive checked value
    if (e.target.checked)
    {
        this.allStudentsSelected = true;
        for (let i = 0;i < this.gridViewAdd.data.length; i++) {
            this.gridViewAdd.data[i].add = true;
        }
    } else {
        this.allStudentsSelected = false;
        for (let i = 0;i < this.gridViewAdd.data.length; i++) {
            this.gridViewAdd.data[i].add = false;
        }
    }
}