Refreshing Kendo grid in Angular 2

Question

How do you refresh an Angular 2 Kendo grid when the data has been changed?

private trash() {
  this.gridView.data.splice(index, 1);
  //I wish to refresh here
}

Answer 1

If you reassign the modified data to the data property of the grid this will trigger the automatic change detection and everything will work as expected. e.g.:

data.splice(index, 1);
this.gridView.data = data;

↑This is the preferred way to trigger change detection and update the grid. ↑

Alternatively, if you want to just modify the underlying data you will have to manually notify Angular of the changes. There are a few ways to trigger change detection in Angular 2. For example, you can inject the ChangeDetector in the constructor of your component and invoke detectChange. Example:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';    

constructor(private cd: ChangeDetectorRef) {
    }

    private trash() {
      this.gridView.data.splice(index, 1);
      this.cd.detectChanges()
    }

In general I suggest that you read over the web how Angular 2 performs change detection and how to manually trigger it if needed.