Posted 19 July 2018, 1:16 am EST
Hello,
In our project we’re using Wijmo from NPM packages. This blocks us from using native AngularJS 1 integration since it’s not yet supported.
So we are trying to achieve similar behavior by creating our own CellFactory:
import { CellFactory, GridPanel, CellRange, CellType, Column, Row } from "wijmo/wijmo.grid";
export class NgCellFactory extends CellFactory
{
private _cellsTemplates: _.Dictionary<string> = {};
private _linkFns: _.Dictionary<ng.ITemplateLinkingFunction> = {};
private _scopes: _.Dictionary<ng.IScope> = {};
constructor(private $scope: ng.IScope, private $compile: ng.ICompileService)
{
super();
}
public addCellTemplate(name: string, template: string)
{
this._cellsTemplates[name] = template;
}
public updateCell(panel: GridPanel, row: number, col: number, cell: HTMLElement, rng?: CellRange, updateContent?: boolean)
{
if (panel.cellType !== CellType.Cell)
{
super.updateCell(panel, row, col, cell, rng, updateContent);
return;
}
const colId = (<Column>panel.columns[col]).binding;
const cellId = row + "_" + colId;
if (!this._linkFns[colId])
{
this._linkFns[colId] = this.$compile(`<div>${this._cellsTemplates[colId]}</div>`);
}
if (!this._scopes[cellId])
{
this._scopes[cellId] = this.$scope.$new();
this._scopes[cellId]["$row"] = panel.rows[row];
this._scopes[cellId]["$col"] = panel.columns[col];
this._scopes[cellId]["$item"] = (<Row>panel.rows[row]).dataItem;
}
const clone = this._linkFns[colId](this._scopes[cellId], clone => { });
if (cell.firstChild && clone[0] !== cell.firstChild)
{
cell.replaceChild(clone[0], cell.firstChild);
}
else if (!cell.firstChild)
{
cell.appendChild(clone[0]);
}
super.updateCell(panel, row, col, cell, rng, false);
}
}
I have written the “my-grid…” directives myself trying to follow how it looks in your native integration.
This CellFactory seems to do the right thing - enabling to provide custom Angular templates into grid cells.
The problem with it is cells don’t get immediately transformed. For example, if I have the following template:
<my-grid items-source="data">
<my-grid-column header="Country" binding="country">
<my-grid-cell-template>
{{$item.country}}
</my-grid-cell-template>
</my-grid-column>
</my-grid>
after running the code I still see for some time “{{$item.country}}” instead of “US”. When I scroll the grid the same happens - templates are flickering.
Have you got any idea of how to get rid of that flickering? When looking at your native integration everything works without flickering…
