剑道编辑单元格光标消失

时间:2018-10-31 04:36:14

标签: angular kendo-ui-angular2

我正在编辑剑道网格中的单元格。

当我单击单元格并开始编辑时,我只能键入1个字符,光标消失。我必须再次单击以单击单元格,以便我可以继续输入。

下面是我的组件的代码。现在我有2个事件onCellClick和onCellClose

export class MyComponent implements OnInit {
  @Input() data: MyModel[]
  @Input() columns: string[]

  ngOnInit() { }

  onCellClick({ sender, rowIndex, columnIndex, dataItem, isEdited, type }) {
    if (!isEdited) sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem);
  }

  onCellClose(args: any) {
    const { formGroup, dataItem, rowIndex } = args;
    if (!formGroup.valid) {
        args.preventDefault();
    } else {
        this.data[rowIndex] = formGroup.value;
    }
  }

    createFormGroup(dataItem: any): FormGroup {
        const formBuilderData = this.columns.reduce((acc, col) => ({...acc, [col]: dataItem[col]}), {});
        return this.formBuilder.group(formBuilderData);
    }
}

在html文件上:

<kendo-grid #grid
    (cellClick)="onCellClick($event)"
    (cellClose)="onCellClose($event)"
    [data]="data">

    <ng-container *ngFor="let col of columns">
        <kendo-grid-column field={{col}}></kendo-grid-column>
    </ng-container>
</kendo-grid>

0 个答案:

没有答案