我正在编辑剑道网格中的单元格。
当我单击单元格并开始编辑时,我只能键入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>