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

這就是我實現它的方式。我看不到你是如何綁定的，我使用了GridDataResult。爲了這個例子，我簡化了網格。

了一些必要的組件，特別是GridDataResult，國家和過程中，我在這個例子中使用：

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

一對夫婦的局部變量：

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

組件的HTML網格。這裏需要注意的是，我必須將包含複選框的標題列設置爲sortable = false才能註冊點擊事件。

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

這是我綁定到數據對象數組：

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

這是Click事件。您可以通過前面設置的GridDataResult變量來獲取網格中的當前項目。循環訪問數據並更新綁定到複選框的數據元素。礦被命名爲布爾值「添加」

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

Answer 2

我想我找到了一個simular但也許更簡潔的方案：

使用「劍道併網複選框欄」組件：

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

在劍道網格屬性

[selectedKeys]="rowSelected" 

和

[kendoGridSelectBy]="rowsSelectedKeys" 

然後你可以在控制器中影響這些值：

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。