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

score 2 · Answer 1 · answered Sep 10 '21 at 15:29

2

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

answered Sep 10 '21 at 15:29

Konstantin Dinev

34,219
14
75
100

1

Thank you very much! You helped me again :) – ivs Sep 10 '21 at 15:41
Is it possible to mark the changed cells? E.g. through changing of the background color of the row or of the cell? – ivs Sep 10 '21 at 15:44
2

That wouldn't come out of the box. Take a look at these samples: https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/live-data Basically there are different styles in cell templates which change depending on value thresholds, but we don't have anything for when a cell value has changed, except in an editing scenario through the grid, which is not what you're looking for. – Konstantin Dinev Sep 10 '21 at 15:49

score 1 · Answer 2 · answered Nov 15 '21 at 12:30

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().

Reload igx grid when data is changed

2 Answers2