Grid data is not refreshed in Kendo for Angular

Question

In this plunk I have a Kendo for Angular grid that uses the kendoGridBinding directive to bind the data in memory.

What I need to do is to manipulate the data model and reflect each insert/update/delete in the grid.

For example, in the plunk there's a button that if you click it it will remove from dataGrid the first row, but that change is not reflected in the grid. I found in the documentation a notifydatachange statement, however it does not work (as you can see in the plunk). How to make the grid refresh the data?

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid #grid
            [kendoGridBinding]="gridData"
            [pageSize]="4"
            [pageable]="true">
            <kendo-grid-column field="CompanyName" [width]="140"></kendo-grid-column>
            <kendo-grid-column field="ContactName" [width]="120"></kendo-grid-column>
            <kendo-grid-column field="City" [width]="100"></kendo-grid-column>
            <kendo-grid-column field="ContactTitle" [width]="130"></kendo-grid-column>
        </kendo-grid>
        <button (click)="delFirst()">delete first row</button>
    `
})
export class AppComponent {

    @ViewChild('grid') grid: GridBinding;

    public gridData: any[] = customers;

    delFirst() {
      this.gridData.splice(0,1);
      this.grid.notifyDataChange();
      alert("First row deleted");
    }

}

Answer 1

If you need to update the binding directive then you should set a new instance:

delFirst() {
    this.gridData.splice(0,1);
    this.gridData = this.gridData.slice(0);
}

or

delFirst() {
    this.gridData = this.gridData.slice(1);
}

Otherwise, angular will not detect a change and will not update the directive.