angular - 带有复选框列的 Kendo Angular 2 网格

Question

我正在尝试在我的 Kendo Angular 2 网格中实现一列复选框。

我遵循文档中的示例(没有复选框): http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-remote-directives

我更改了示例以添加列: http://plnkr.co/edit/hNkj1ZFZJopDyFxn59B3?p=preview

这是我的组件:

@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...
  }
}

(在 Plunker 中你可以看到 ProductsBindingDirective 和 ProductsService 实现)

但现在我不确定单击标题中的复选框时更改所有项目的选中属性的最佳方法是什么...

我应该从网格中获取数据，更改所有项目中的属性并将其设置回去吗？或者还有其他我没有看到的选项？

Answer 1

我想我找到了一个类似但可能更简洁的解决方案:

使用“kendo-grid-checkbox-column”组件:

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

kendo-grid 中的属性

[selectedKeys]="rowSelected"

和

[kendoGridSelectBy]="rowsSelectedKeys"

然后您可以在 Controller 中影响这些值:

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 = [];
    }
}

使用网格数据的优势在于，如果您有过滤器，那么它只会“检查”过滤后的数据。在我的示例中，您可以在任何事件上处理已检查行的 ID。