Posted 4 August 2021, 5:59 pm EST
Hi,
I am attempting to use a custom cell factory with the Wijmo Flexgrid, and have noticed some strange issues regarding row groups. When using a custom cell factory to render cells, I have noticed that normal cells only come through updateCell() on creation/destruction (or via change detection like editing values etc.), and the same cell is not re rendered while scrolling until it is out of the view. This means that cells are only calculated once on creation until they are either updated or destroyed.
This is not the same for row group headers, which seem to come through the updateCell() function every single time the user scrolls, even if the row group header is not being created or destroyed (via leaving the view). This is especially an issue when putting components into the group row, as it causes them to be constantly recreated, which can cause flickering and is computationally expensive.
This does not seem to be an issue if we don’t use a custom cell factory, as the custom component is only loaded when the row header enters the view, and is not re loaded on every scroll.
Here is a stackblitz showcasing an example of this problem in action: https://stackblitz.com/edit/angular-txm51s?devtoolsheight=33&file=src/app/app.component.ts
While the console is open, if you scroll on the first grid you will see that the component is constantly printing, which only happens once on component creation. If you then scroll on the second grid you will notice that the component does not constantly print, and instead only prints when a row group comes into view.
In the stack blitz you will find in my custom cell factory that I have already attempted to mitigate the recreation of components via some code that has been commented out:
if ((this.groupRows[row.index]?.dataItem !== row.dataItem || cell.innerHTML.length === 0)) {
//if we haven't rendered this row before (its html length is 0), or this is a new set of data, re render the group header.
this.buildTemplateCell(this.groupHeader, cell, context);
this.groupRows[row.index] = row;
}
This code stops the component being constantly re created, but causes issues when expanding and collapsing the group rows, as the header seems to use data taken from another cell.
Is there a better way to be handling group rows when using a custom cell factory? How can I achieve having custom components in my group row header using a cell factory without them being re rendered every time the user scrolls?
Note that while I can get this to work without a cell factory, the cell factory significantly boosts performance when rendering cells as opposed to using itemFormatters, so I would prefer to use a custom cell factory if I can.
