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

回答

相关问题