Reload igx grid when data is changed

Question

I have an igx grid inside a dialog. I use the array posts as data for the grid. The values of this array may be changed through the program. How can I update the grid data with the last value that I have for the array posts?

<igx-dialog #dialog>
  <igx-grid #grid1
            [emptyGridMessage]="'The grid is empty'"
            width="1200px"
            [data]="posts"
            height="600px"
            style="margin: auto"
            [primaryKey]="'person'">
    <igx-column field="person" dataType="string" header="PersonId"></igx-column>
    <igx-column field="name" dataType="string" header="Name"></igx-column>
  </igx-grid>
</igx-dialog>

P.S. I am using C#.

Answer 1

When the data changes on your component side, you can call markForCheck() on the grid and this will force the grid to run change detection and display the updated data.

Example component.ts:

@ViewChild('grid1')
public grid: IgxGridComponent;

public dataChanged() {
  // logic for posts to be assigned a new value
  this.grid.markForCheck();
}

Answer 2

If you are simply pushing a new item to the underlying data, keep in mind that doesn't change its reference. For an immediate refresh, the row can be added using the grid API method, instead of being pushed directly to the data source. When pushed to the data source, the grid will refresh on the next change detection lifecycle, alternatively the data array can be mutated like so:

this.data = [...this.data, newItem]; // instead of push

This is needed as the grid uses OnPush strategy and won't be notified of the change (as the data array is the same), so it'll update the next time something triggers change detection, or in the case that Konstantin suggested, by calling grid.markForCheck().