Where are the RowEnter and RowLeave events of a kendo-grid for Angular 2?

Question

In an ODATA bound Kendo UI Angular 2 table, I have to meet the requirements to save the data the user changes through inline edit per row , not per cell. I could do so, if there were RowEnter and RowLeave events.

Where are these?

Answer 1

There are sadly no such events, there is however a selectionChange-event which triggers, when the grid's selectable property is set to true, and as long as you do not place any ng-template-elements within the kendo-grid-column-elements as such

<ng-template kendoGridCellTemplate let-dataItem>
    <input type="checkbox" [checked]="dataItem.Dropped?true:false" (click)="DroppedClicked($event, dataItem)" />
</ng-template>

Such a template is not integrated within the edit mode, and user interaction will not be respected, until you explicitly write the values back into the model and manually take care of whether that cell was in a different row than before! In other cases, you can rely on the selectionChange event, which will trigger as the user activates a control of a different row.

To identify the row change from the above template's input element, the click event passes both event variable and the dataItem into DroppedClicked-eventhandler, and that handler does this:

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; 
}

where onRowChange(...) is the event handler for the selectionChange-event, registered in the grid's html template:

<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>

and that handler does this:

  public onRowChange({ crtlKey, deselectedRows, index, selected, selectedRows }) : void
  {
    //alert("Row is changing!");
    if ( this.isDirtyRow )
        this.SaveRow();
    this.currentRow = selectedRows[0];
    this.currentRowIndex = index;
  }

with SaveRow() saving this.currentRow and resetting this.IsDirtyRow to false.

What cost me the most effort, was to accept that the edit mode relies on cellwise starting and ending the formGroup in the cellClick and cellClose events: regardless of the column, cellClick must start a new formGroup, because cellClose does not publish the columnIndex in its $event, and it closes the whole formGroup altogether.