Posted 23 January 2018, 6:53 am EST
We’re having issues with grid performance in IE 11. Some issues are annoying but we can live with and blame on IE, e.g. white flashes when scrolling quickly and frozen columns lagging a few pixels off the regular columns when scrolling. These can both be seen in IE at http://demos.wijmo.com/5/Angular2/Explorer/Explorer/#/grid/frozen .
However, we’re also having an issue where cells are not aligning properly after a quick scroll. In other words, a row might actually be showing data from other rows. I have included a gif that shows this. Notice how the data changes after the first column. It’s a big problem, as we can no longer trust our data.
We suspected this was because we were using a template in order to customize the display of our number data (although the grid should still settle correctly at the end of a scroll) and this was slowing performance. So we tried using cell factories instead of templates or itemFormatter in order to speed things up. This in fact did eliminate the problem. However, now we can no longer include any Angular code into our cells, as angular components don’t seem to compile. Nor can we use cell templates, which seem to be ignored if there is a cell factory. For example, this doesn’t work:
if (cell.textContent != content) {
cell.innerHTML = '<mat-icon>' + content + '</mat-icon>';
}
So our question is that is there some way to use templates and Angular components with cellFactories? Or, even better, is there some reason our grid is so slow in IE that there’s a bug? Even when we’re not using templates or itemFormatter and have only 40 rows of data and twelve columns, it seems laggy. However, this page: http://demos.wijmo.com/5/Angular2/Explorer/Explorer/#/grid/dynacols seems good enough, even with more rows and a template. So where is this slowness coming from? The number of cells visible (with a full screen our grid shows approximately 21 rows x 12 cols = 252 total cells)?
<wj-flex-grid #grid class="data-grid" fxFlex="grow"
(dblclick)="onGridDblclicked($event)"
[itemsSource]="dataCollection"
[frozenColumns]="frozenColumns"
[headersVisibility]="'Column'"
[autoGenerateColumns]="false"
[isReadOnly]="true"
[selectionMode]="'Row'"
[allowResizing]="'None'"
[allowDragging]="'None'"
[allowSorting]="true"
[showAlternatingRows]="true"
[stickyHeaders]="true">
</wj-flex-grid>
the code for column creation when our component first loads:
this.columns.forEach(col => {
this.grid.columns.push(new Column({
binding: `${col.key}`,
header: `${col.name}`,
}));
});
and here’s the format of a column type:
{
key: 'ExColumnBinding',
name: 'ExColumnHeadingTitle',
dataType: FieldDataType.Number,
format: '(0.0 %)',
},
Thanks.
