web-dev-qa-db-ja.com

Kendo UIグリッド（Angular 2）で行が選択されたときにイベントをトリガーします

Angular 2の剣道UI（ベータ版）では、特定の行が選択されたときにどのようにイベントをトリガーしますか？行自体のディレクティブやコンポーネントはありません。したがって、（クリック）=行要素がない場合、「triggeredFunction（）」は機能しません。

これが私のグリッドです：

<kendo-grid [data]="gridData" [selectable]="true">

  <kendo-grid-column field="ProductName">
    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
     {{column.field}}({{columnIndex}})
    </template>
  </kendo-grid-column>     

  <kendo-grid-column field="ProductName">
    <template kendoCellTemplate let-dataItem>
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
    </template>
  </kendo-grid-column>

</kendo-grid>

これが私のコンポーネントです：

@Component({
 selector: "ultron",
 styleUrls: [String("./ultron.component.less")],
 templateUrl: "./ultron.component.html",
 })
 export class UltronComponent {

   private gridData: any[] = [{
      "ProductID": 1,
      "ProductName": "Chai",
      "UnitPrice": 18.0000,
      "Discontinued": true,
    }, {
      "ProductID": 2,
      "ProductName": "Chang",
      "UnitPrice": 19.0000,
      "Discontinued": false,
    }
  }];

  private listItems: Array<string> = ["@", "$", "#", "%"];

  public triggeredFunction(){ ... }

}
eventsangularkendo-uikendo-gridkendo-ui-angular2
7
ed-tester

設定する必要のあるオプションはselectableであり、現在は単一行の選択のみがサポートされているため、有効な値はtrueおよびfalseです。したがって、グリッドは次のようになります。

<kendo-grid
      [data]="gridView"
      [selectable]="true"
    >
  </kendo-grid>

イベントの場合、(selectionChange)イベントハンドラーをアタッチする必要があります。これが plunkr

9
knikolov

選択可能なオプションを介して有効化された剣道UIでの選択。選択された行インデックスと選択された状態は、selectionChangeイベントを通じて提供されます。グリッド内のデータも並べ替えまたはページングしている場合は、GridDataResultにバインドされます。グリッドで選択した行のバインドされたアイテムを取得するには、GridDataResultのdataプロパティを使用します。次のコードサンプルを参照してください。

import { Component } from '@angular/core';
import { GridDataResult, SelectionEvent } from "@progress/kendo-angular-grid";
import { SortDescriptor, orderBy } from "@progress/kendo-data-query";


@Component({
    selector: 'my-app',
    template: `
            <kendo-grid [data]="gridDataResult" [selectable]="true" [height]="500" 
                [sortable]="true" (selectionChange)="selectedRowChange($event)" 
                [sort]="sort" (sortChange)="sortChange($event)">
                <kendo-grid-column field="ProductID" title="Product ID" [width]="300"></kendo-grid-column>
                <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
                <kendo-grid-column field="UnitPrice" title="UnitPrice"></kendo-grid-column>
                <kendo-grid-column field="Discontinued" title="Discontinued"></kendo-grid-column>
            </kendo-grid>
            `
})

export class AppComponent {
    public sort: SortDescriptor[] = [{ dir: "asc", field: "ProductID" }];

    private gridDataResult: GridDataResult;

    public products: any[] = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": true,
    }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false,
    }
    ];

    protected sortChange(sort: SortDescriptor[]): void {
       this.sort = sort;
       this.gridDataResult = {
            data: orderBy(this.products, this.sort),
            total: this.products.length
        };
    }

    public selectedRowChange(selectionEvent: SelectionEvent) {
        let selectedItem = this.gridDataResult.data[selectionEvent.index];
        console.log(selectedItem);
    }
}
4
LaymanHacks

プランカーの1つの変更を除いてまだ真実である元の答えへの単なる追加

this.gridView.data [e.index]と表示されます。

他の誰かがこのページに来たら、最新の情報を得ることができます。

1
r2018