Question

我正在使用一个kendo网格，我需要在按钮点击时访问Angular 4中的选定行ID。想要在网格中显示一些数据，这些数据将在按钮点击时打开。

这是我的代码。

clients.component.html

<kendo-grid [data]="view | async"
            [pageSize]="gridState.take"
            [skip]="gridState.skip"
            [sort]="gridState.sort"
            [sortable]="true"
            [pageable]="true"
            [scrollable]="'none'"
            (dataStateChange)="onStateChange($event)"
            (edit)="editHandler($event)"
            (remove)="removeHandler($event)"
            (add)="addHandler($event)">
  <ng-template kendoGridToolbarTemplate>
    <button kendoGridAddCommand>Add new</button>
  </ng-template>
  <kendo-grid-column field="clientId"></kendo-grid-column>
  <kendo-grid-column field="name"></kendo-grid-column>

  <kendo-grid-command-column title="command" width="220">
    <ng-template kendoGridCellTemplate>
      <button kendoGridEditCommand class="k-primary">Edit</button>
      <button kendoGridRemoveCommand>Delete</button>
    </ng-template>
  </kendo-grid-command-column>
</kendo-grid>

<ccx-edit-client [model]="editDataItem" [isNew]="isNew"
                 (save)="saveHandler($event)"
                 (cancel)="cancelHandler()">
</ccx-edit-client>

clients.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { State, process } from '@progress/kendo-data-query';
import { GridDataResult, DataStateChangeEvent } from '@progress/kendo-angular-grid';

import { ClientService } from './clients.service';
import { Client } from '../clientEdit/clientModel';
import { ClientEditService } from '../clientEdit/clientEdit.service';

@Component({
    selector: 'ccx-client',
    templateUrl: './clients.component.html',
    styleUrls: ['./clients.component.css']
})
export class ClientComponent implements OnInit {

    public view: Observable<GridDataResult>;
    public gridState: State = {
        sort: [],
        skip: 0,
        take: 10
    };

    private editService: ClientEditService;
    private editDataItem: Client;
    private isNew: boolean;

    //constructor(private service: ClientService) {
    //    this.view = service;
    //    this.service.query(this.state);
    //}

    constructor( @Inject(ClientEditService) editServiceFactory: any) {
        this.editService = editServiceFactory();
    }

    public ngOnInit(): void {
        this.view = this.editService.map(data => process(data, this.gridState));
        this.editService.read();
    }

    public onStateChange(state: State) {
        this.gridState = state;
        this.editService.read();
    }

    public addHandler() {
        this.editDataItem = new Client();
        this.isNew = true;
    }

    public editHandler({ dataItem }) {
        this.editDataItem = dataItem;
        this.isNew = false;
    }

    public cancelHandler() {
        this.editDataItem = undefined;
    }

    public saveHandler(client: Client) {
        this.editService.save(client, this.isNew);
        this.editDataItem = undefined;
    }

    public removeHandler({ dataItem }) {
        this.editService.remove(dataItem);
    }

}

我想在网格中点击按钮显示网格。所以我需要在按钮点击时选择行ID。我怎么能这样做？

Answer 1

我不确定这个问题是否仍然有效;但是，要获取当前行的值，可以使用ng-Template并定义按钮。下面是示例，而不是制作详细的代码：

            <ng-template kendoGridCellTemplate let-dataItem>
                <span class="whole-cell">{{dataItem.id}}</span>
            </ng-template>

dataItem ：基于字段名称的行值。

Answer 2

您可以使用行索引

<ng-template kendoGridCellTemplate let-rowIndex="rowIndex">
               <span >{{rowIndex}}</span>
 </ng-template>

Answer 3

首先通过设置像selectable="true"这样的指令来使网格可选择。然后添加 selectedKeys 指令以指定要存储选择键（或多个键）的位置：[selectedKeys]="selectedKeys"。最后，您需要通过设置如下指令来告诉kendo网格它应该如何解释每行的键：[kendoGridSelectBy]="rowSelectionKey"。

<kendo-grid [data]="view | async"
  ...
  selectable="true"
  [kendoGridSelectBy]="rowSelectionKey"
  [selectedKeys]="selectedKeys"
  ...
</kendo-grid>

这是一个实现此功能的示例，并在按钮单击时提醒选择行索引：

export class AppComponent {
    private gridData: any[] = [... some data ... ];
    private selectedKeys: number[] = [];

   private rowSelectionKey(context: RowArgs): string {
        // Here you can access the row item (model) from context.dataItem.
        return context.index;
    }

    handleButtonClick() {
      const selected = this.selectedKeys.length ? 'Index: ' + this.selectedKeys[0] : 'Nothing selected';
      alert(selected);
    }
}

有关kendos official (excellent) documentation

的更多信息

获取Kendo UI Angular 4打字稿中所选行的ID

3 个答案: