Question

我使用带有angular2的kendogrid构建了一个网格。通过使用webapi服务，网格将填充记录。我需要在网格和click事件上引发rowclick事件，我需要获取记录/异步调用以获取所选行/记录的详细信息，并在同一页面的详细信息部分下方显示。详细信息部分包含大约10-12个文本框，我应该能够绑定从服务调用中获取的值。

在我的UI中，我在顶部有一个网格 - 网格通过使用服务加载了一些记录。当用户单击任何一行时，下面的详细信息部分控件将加载由异步调用获取的详细信息值。

关于如何实现这一目标的任何想法？

我尝试了以下方式来举起活动，但它没有用。

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，其中定义了k-grid

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");



    }
}

Answer 1

我找到了解决方案，我需要在生成kendogrid和选择器的同时分配click事件。

在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();

...
}

如何使用angular2在kendogrid中引发onClick / Change事件

1 个答案: