[英]Where are the RowEnter and RowLeave events of a kendo-grid for Angular 2?
在ODATA綁定的Kendo UI Angular 2表中,我必須滿足保存用戶通過按行而不是按單元格進行內聯編輯更改的數據的要求。 如果有RowEnter和RowLeave事件,我可以這樣做。
這些在哪
遺憾的是,沒有這樣的事件,但是,當網格的selectable屬性設置為true時, 只要沒有在kendo-grid-column-elements內放置任何ng-template-elements,就會觸發selectionChange-event因此
<ng-template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.Dropped?true:false" (click)="DroppedClicked($event, dataItem)" />
</ng-template>
此類模板未集成在編輯模式下,並且不會尊重用戶交互,除非您將值明確寫回到模型中,並手動檢查該單元格是否與以前不在同一行中! 在其他情況下,您可以依賴selectionChange事件,該事件將在用戶激活另一行的控件時觸發。
為了從上述模板的input元素中識別行更改,click事件將事件變量和dataItem都傳遞給DroppedClicked-eventhandler,該處理程序將執行以下操作:
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-event的事件處理程序,已在網格的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並將this.IsDirtyRow重置為false。
使我最費力的是,接受編輯模式依賴於cellClick和cellClose事件中的cellwise開始和結束formGroup:無論列如何,cellClick必須開始一個新的formGroup,因為cellClose不會在其發布中發布columnIndex $ event,它將完全關閉整個formGroup。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.