Table goes blank when changing field values in v3

I’m submitting a Bug report

Your Environment

Software	Version(s)
Angular	12
Angular-Slickgrid	3.0.5
TypeScript	4.3.5

Describe the Bug

When changing data in the table it sometimes goes blank, or fails to load when scrolling down.

Steps to Reproduce

I’m not sure, I’ve only seen that bug in production and I’ve been unable to reproduce it in dev & uat. But essentially I’m just changing the values in the fields of each row, then calling invalidate() then render(). I’ve also tried this.rows = this.rows.slice(); with the same result.

Expected Behavior

In dev & uat the table re-renders fine and starts showing the new values.

Current Behavior

When the values change and I call invalidate & render or slice, the table snaps back to the top (or at least the scroll bar resets) and either goes completely blank, or starts showing the new values on the visible part but scrolling down reveals only a blank space. See below for an example where I’ve scrolled down :

Sorry for the black bars, not sure what I can and can’t show. But as you can see I scrolled down a bit and below what I could see at the top, it’s just blank now. The table is still the correct size, before changing the values and re-rendering I had lines showing correctly there. I have 5 columns, one independent and two groups of two.

Possible Solution

I haven’t found a solution yet. Filtering seems to bring the “hidden” values back so that’s a workaround if you know what you’re looking for, but not ideal.

Code Sample

    this.rows.forEach(row =>
      {
          row[my][complex][object] = "new value";
      });
    if (this.angularGrid != null) { this.angularGrid.slickGrid.invalidate(); this.angularGrid.slickGrid.render(); }

this.columnDefinitions = [{ id: "MyId", name: "MyId", field: "id", sortable: true, cssClass: "text-center border-right", headerCssClass: "d-flex justify-content-center", filterable: true }];

this.columnDefinitions.push({id: "MyId2", name: "Name", field: "complex.field", sortable: true, cssClass: "text-center border-right", headerCssClass: "d-flex justify-content-center", columnGroup: "group", formatter: Formatters.multiple, params: {formatters: [Formatters.complexObject, aSimpleCssFormatter]}});

I’m not sure how much that will help since the exact same code in dev & uat works flawlessly, for some reason only prod shows the issue. I’m not seeing any differences between my uat and prod configs in angular.json so I don’t know if that could be caused by optimizations. Is there a way to debug this further, or am I doing something obviously wrong ?

Note that I’ve had the exact same code for a while now and it was working well in v2. This started happening when I upgraded to v3.

[Ulrar]

Right, that does work better :

this.rows.forEach(row =>
{
  row = change;
}
this.angularGrid.gridService.updateItems(this.rows);

With that it updates and the filtering stays, as expected. I’ll deploy this to prod tomorrow and see if that resolves the issue, thanks

[ghiscoding]

The new version v3.1.0 is now released and I did couple of small changes in both lib, hopefully this will fix this issue. So I’m closing it for now. Check the new release v3.1.0 to see all new features/fixes

Cheers ⭐