在Kendo UI Grid中選擇行時的觸發事件（Angular 2）

在Angular 2的Kendo UI（測試版）中，如何在選擇特定行時觸發事件？行本身沒有指令或組件;因此，如果沒有行元素，則（click）=「triggeredFunction（）」無法工作。在Kendo UI Grid中選擇行時的觸發事件（Angular 2）

這裏是我的網格：

<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(){ ... } 

}

來源

2016-11-30 ed-tester

嘗試'[可選擇] = 「 '行'」'http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-selectable –

@DanWilson，感謝您的快速回復。你發給我的鏈接是Angular 1（我需要Angular 2）。所以..我把我的函數放在你提到的位置[selectable] =「triggeredFunction（）」，這會在頁面上每次改變時觸發，也會在你點擊一行時觸發，但是如何通過特定行數據到組件？ –

我認爲你需要指定「row」作爲可選組件，並提供一個'（change）'處理程序，這將是你的'triggeredFunction（）'。 http://demos.telerik.com/kendo-ui/grid/events –

，你需要設置的選項是selectable和有效值爲true和false爲目前只支持單行選擇。所以，你的網格看起來應該是這樣

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

對於需要附加(selectionChange)事件處理該事件。這裏是一個plunkr

來源

2016-12-01 09:13:11 knikolov

謝謝！謝謝！奇蹟般有效。是否有可能傳遞選定的行元素或行數據？我嘗試了$事件，但它只給我索引。使用'KendoCellsTemplates'，您可以使用'let-dataItem'來獲取行數據，我們可以使用所選行的整個行嗎？ –

'$ event'會給你所選項目的索引，然後你可以從數據數組中獲取它 - 這裏http://plnkr.co/edit/xEB6JN9ZVjm499G2KreX?p=preview – knikolov

@knikolov當我們做一個排序，那麼當我們試圖用這個索引查找數據時，它會顯示錯誤的數據。你有沒有其他解決方案？ – indra257

通過可選擇選項啓用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); 
    } 
}

來源

2017-05-09 16:37:18 LaymanHacks

在Kendo UI Grid中選擇行時的觸發事件（Angular 2）

回答

相關問題