kendo-ui-angular2 – Kendo-angular2-grid上的行点击事件

发布时间：2020-12-17 17:33:07 所属栏目：安全来源：网络整理

导读：下面是我使用Kendo-Angular2开发的网格. 我需要在行上点击事件,如果我需要行信息. 我写了一个普通的点击事件并尝试获取行信息,但是如果我在分页中转到第二页则不起作用.是否有一个简单的行单击事件,它提供行信息. plnkr： http://plnkr.co/edit/h0fVaP4NykRi

下面是我使用Kendo-Angular2开发的网格.
我需要在行上点击事件,如果我需要行信息.
我写了一个普通的点击事件并尝试获取行信息,但是如果我在分页中转到第二页则不起作用.是否有一个简单的行单击事件,它提供行信息.

plnkr：
http://plnkr.co/edit/h0fVaP4NykRiILA7dyHn?p=preview

点击事件代码：

ngAfterViewInit() {
  this.renderer.listen(this.gridRef.nativeElement,"mousedown",(event) => {
    if (!event.target.matches('tbody>tr *')) {
      return;
    }

    const gridData = this.grid.data;
    const tr = event.target.closest('tr');
    const dataItem = gridData.data[tr.rowIndex + this.grid.skip];

    console.log(dataItem);
  });
}

解决方法

角度模板

<kendo-grid #gridUser
                  [kendoGridBinding]="gridData"
                  [pageSize]="10"
                  [pageable]="true"
                  [sortable]="true"
                  [selectable]="true"
                  (selectionChange)="gridUserSelectionChange(gridUser,$event)">
        <kendo-grid-column field="name" title="ID">
        </kendo-grid-column>
        <kendo-grid-column field="nameThai" title="Name">
        </kendo-grid-column>
        <kendo-grid-pdf fileName="User.pdf"></kendo-grid-pdf>
        <kendo-grid-excel fileName="User.xlsx"></kendo-grid-excel>
      </kendo-grid>

角度分量

gridUserSelectionChange(gridUser,selection) {
     // let selectedData = gridUser.data.data[selection.index];
     const selectedData = selection.selectedRows[0].dataItem;
     console.log(selectedData);
 }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!