CODEWITHSUNDEEP
angularkendo-uikendo-gridkendo-ui-angular2
ed-tester
ed-tester

Reputation: 1656

Refreshing Kendo grid in Angular 2

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
}

Upvotes: 4

Views: 6741

Answers (2)

lginlap
lginlap

Reputation: 101

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

Not working with paging option

Upvotes: 1

Genady Sergeev
Genady Sergeev

Reputation: 1650

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.

Upvotes: 5

Related Questions