Question

借助此示例，我可以使用内联编辑功能创建一个工作网格
https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-row-click/

我现在要做的是在用户按下Enter键时强制保存，而不是单击移至另一行或移至当前行。我想可以在标题中添加“保存”按钮吗？

Answer 1

类似于 Giannis 的回答，但有一些小的修改：

将 keydown 事件添加到 kendo-grid 标签。
调用 grid.closeCell() 而不是直接调用 closeHander。

模板

    <kendo-grid #grid
                [data]="data$ | async"
                (cellClose)="cellCloseHandler($event)"
                (keydown)="onKeydown(grid, $event)"
    >

类

    onKeydown(grid: GridComponent, e: KeyboardEvent) {
        if (e.key === 'Enter') {
            grid.closeCell();
        }
    }

    cellCloseHandler(args: CellCloseEvent) {
        const { formGroup, dataItem } = args;
        // save to backend etc
    }

调用grid.closeCell();将使网格调用cellCloseHandler

Answer 2

您可能会在HTML (cellClose)="cellCloseHandler($event)"-API Documentation

中使用 cellClose 事件

然后您可以在cellCloseHandler()中编写自己的代码（使用打字稿），以相应地修改和保存更新的项目。

从Kendo UI中获取Angular文档： In-Cell Editing

您可以捕获Enter键击，然后像这样强制执行cellCloseHandler()：

@HostListener('keydown', ['$event'])
public keydown(event: any): void {
  console.log("keydown event", event);
  if (event.keyCode === 13) {
        this.cellCloseHandler();
    }
}

Answer 3

您不必自己为Keydown实现HostListener。如果将可导航输入设置为 true ，则在编辑单元格或行时按Enter键会触发 cellClose事件。这样，您还可以在cellCloseHandler中获取行的数据以进行保存。

<kendo-grid [navigable]="true" (cellClose)="cellCloseHandler($event)"></kendo-grid>

kendo ui角网格-当用户点击Enter键而不是单击行时如何离开行

3 个答案: