![](/img/trans.png)
[英]How to trigger change event in Kendo dropdownlist with Angular typescript?
[英]Trigger event when row is selected in a Kendo UI Grid (Angular 2)
在Angular 2的Kendo UI(beta)中,如何在選擇特定行時觸發事件? 行本身沒有指令或組件; 因此,如果沒有行元素,則(click)=“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(){ ... }
}
您需要設置的選項是selectable
,有效值為true
和false
因為目前僅支持單行選擇。 所以你的網格應該是這樣的
<kendo-grid
[data]="gridView"
[selectable]="true"
>
</kendo-grid>
對於事件,您需要附加(selectionChange)
事件處理程序。 這是一個傻瓜
通過可選選項啟用Kendo 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);
}
}
除了原始答案之外,除了一個改變之外,它仍然是真實的
應該說this.gridView.data [e.index]
如果有其他人訪問此頁面,則可以獲取最新信息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.