如何使用angular2提高kendogrid中的onClick/Change事件

我已經使用包含angular2的kendogrid構建了一個網格。網格通過使用webapi服務獲得記錄。我需要在網格和click事件上引發一個rowclick事件，我需要獲取記錄/異步調用以獲取所選行/記錄的詳細信息，並在下面的細節部分顯示在同一頁面上。細節部分由大約10-12個文本框組成，我應該能夠綁定從服務調用中獲取的值。如何使用angular2提高kendogrid中的onClick/Change事件

在我的UI，我在頂部的網格 - 網格通過消費服務加載的一些記錄。當用戶點擊任意一行時，下面的詳細信息部分將控制加載由異步調用獲取的詳細信息值。

有關如何完成此任何想法？

我嘗試以下方式引發事件，但它不工作。其中k柵被定義

import { Component, Input, Host, ElementRef, OnInit } from '@angular/core'; 

declare var $: any; 

@Component({ 
    selector: 'k-grid', 
    template: '<div></div>' 
}) 

export class Grid implements OnInit { 
    constructor(@Host() private elm: ElementRef) { 
     console.log("in constructor of Grid"); 
    } 

    selectedRow: any; 

    @Input() options: any; 

    ngOnInit() { 
     console.log("in OnInit of Grid"); 
     $(this.elm.nativeElement).children().first().kendoGrid(this.options); 
     console.log("after assigning to to kendo"); 



    } 
}

來源

2016-07-13 Krishnan

好了，我們不知道，怎麼'K-grid'設置 - 也許後'grid.ts'。 – rinukkusu

添加了grid.ts - 定義了k-grid – Krishnan

import { Component, ViewChild } from '@angular/core'; 
import { Grid } from './grid'; 

declare var kendo: any; 
declare var $: any; 

@Component({ 
    selector: 'kendo-grid', 
    template: `<div> 
        <k-grid [options]="options" (change)="onClick($event)"></k-grid> 
       </div>`, 
    providers: [Configuration, Constants], 
    directives: [Grid] 
}) 
export class ExtractorGrid { 

    options: any; 
    rowObject: any; 
    extractorDetails: any; 
    public component: any; 
    queueID: number; 

    constructor(private configSetttings: Configuration, private constants: Constants, private viewContainer: ViewContainerRef, private _cr: ComponentResolver) { 
     this.setUpGridOptions(); 
    } 

    onClick(event) { 
     event.preventDefault(); 
     console.log("click event called"); 
    } 
}

grid.ts我找到了解決方案，我需要分配點擊事件而與所述選擇沿產生kendogrid。

在HTML模板

<div> 
    <k-grid [options]="options" (click)="onChange($event)"></k-grid> 
</div>

在kendogrid發電機組件，

this.options = { 
      dataSource: dataSource, 
      columns: [ 
.... 
], 
    ], 
      pageable: true, 
      groupable: true, 
      sortable: true, 
      selectable: true, 
      click: "onChange", 
}

OnChange事件功能

onChange(event) { 
     console.log("click event called"); 
     console.log("event " + event); 
     event.preventDefault(); 

... 
}

來源

2016-07-13 20:04:12 Krishnan

如何使用angular2提高kendogrid中的onClick/Change事件

回答

相關問題