在绑定ODATA的Kendo UI Angular 2表中,我必须满足保存用户通过按行而不是按单元格内联编辑更改的数据的要求。如果有RowEnter和RowLeave事件,我可以这么做。
这些在哪里?
遗憾的是,没有这样的事件,但当网格的可选属性设置为true时,会触发一个selectionChange事件,并且只要您不将任何ng模板元素放置在剑道网格列元素中,例如
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Dropped?true:false" (click)="DroppedClicked($event, dataItem)" />
</ng-template>
这样的模板不会集成在编辑模式中,用户交互也不会得到尊重,直到您明确地将值写回模型中,并手动处理该单元格是否与以前不同!在其他情况下,您可以依赖selectionChange事件,该事件将在用户激活不同行的控件时触发。
为了识别上面模板的输入元素中的行更改,click事件将事件变量和dataItem都传递到DroppedClicked事件处理程序中,该处理程序执行以下操作:
public DroppedClicked(event, dataItem): void
{
let rowIndex = event.currentTarget.parentNode.parentNode.rowIndex;
let arg = { crtlKey: null, deselectedRows: [this.currentRow], index: rowIndex, selected: true, selectedRows: [dataItem] };
if (rowIndex != this.currentRowIndex) // row has changed
this.onRowChange(arg);
dataItem.Dropped = event.target.checked ? 1 : 0;
}
其中onRowChange(…)是selectionChange事件的事件处理程序,注册在网格的html模板中:
<kendo-grid projectAssignmentBinding [pageSize]="30"
[pageable]="true" [filterable]="true" [selectable]="true" (selectionChange)="onRowChange($event)"
[sortable]="true" [height]="500" editable="true"
(cellClick)="onEditCell($event)" (cellClose)="onCellClose($event)" >
...
</kendo-grid>
而那个处理程序就是这样做的:
public onRowChange({ crtlKey, deselectedRows, index, selected, selectedRows }) : void
{
//alert("Row is changing!");
if ( this.isDirtyRow )
this.SaveRow();
this.currentRow = selectedRows[0];
this.currentRowIndex = index;
}
SaveRow()保存this.currentRow并重置它。IsDirtyRow为false。
花费我最大精力的是接受编辑模式依赖于cellClick和cellClose事件中的单元格方式启动和结束formGroup:无论列是哪一列,cellClick都必须启动一个新的formGroup,因为cellClose不会在其$事件中发布columnIndex,而是完全关闭整个formGroup。