web-dev-qa-db-ja.com

剣道Angular 2グリッドとチェックボックス列

剣道Angular 2グリッドにチェックボックスの列を実装しようとしています。

ドキュメントの例に従っています（チェックボックスなし）： http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-リモートディレクティブ

例を変更して列を追加しました： 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の実装を確認できます）

しかし、ヘッダーのチェックボックスがクリックされたときにすべてのアイテムのcheckedプロパティを変更するための最良のアプローチは何であるかわかりません...

グリッドからデータを取得し、すべてのアイテムのプロパティを変更して元に戻す必要がありますか？または、私が見ていない別のオプションがありますか？

angularcheckboxkendo-uikendo-gridkendo-ui-angular2
6
amp

私は似ているがおそらくもっときれいな解決策を見つけたと思います：

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

剣道グリッドの属性を持つ

[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を処理できます。

5
rg10

これが私がそれを実装した方法です。データバインディングがどのように行われているかわかりません。GridDataResultを使用しました。この例のために、グリッドを簡略化しました。

いくつかの必要なコンポーネント、特にこの例で使用するGridDataResult、State、およびプロセス：

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

そして、これはクリックイベントです。前に設定したGridDataResult変数を使用して、グリッド内の現在のアイテムを取得できます。データをループして、チェックボックスにバインドされているデータ要素を更新します。 Mineは、「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;
        }
    }
}
2
cmartin