Reputation: 7883
I am exploring using Ag-grid in Iconic using typescript, and am looking at using a custom CellRenderer.
I have defined the following basic implementation of the ICellRenderer interface as in the documentation but using Typescript rather than Javascript as in the example...
import {AgGridNg2} from 'ag-grid-ng2/main'
import {GridOptions} from 'ag-grid/main'
import {ICellRenderer} from 'ag-grid/main'
export class HighlightCellRenderer implements ICellRenderer {
public eGui: any;
public eValue: any;
// gets called once before the renderer is used
public init(params) {
// create the cell
this.eGui = document.createElement('div');
this.eGui.innerHTML = 'Oh hello';
// set value into cell
this.eValue.innerHTML = params.value;
};
// gets called once when grid ready to insert the element
public getGui() {
return this.eGui;
};
// gets called whenever the user gets the cell to refresh
public refresh(params) {
// set value into cell again
this.eValue.innerHTML = params.value;
};
// gets called when the cell is removed from the grid
public destroy() {
// do cleanup, remove event listener from button
};
}
and assignd it in the Column definitions...
this.columnDefs = [
{
headerName: "ID", field: "equipment.description", sortingOrder: ["asc", "desc"],
editable: true, width: 100,
cellRenderer: new HighlightCellRenderer(),
...
When I run it I get an exception that is caused by the following lines in cellRenderingService.js..
var cellRendererFunc = cellRenderer;
resultFromRenderer = cellRendererFunc(params); <----
// Exception is...
ORIGINAL EXCEPTION: TypeError: cellRendererFunc is not a function
ORIGINAL STACKTRACE:
TypeError: cellRendererFunc is not a function
at CellRendererService.useCellRenderer (http://localhost:8100/build/js/app.bundle.js:54880:34)
at RenderedCell.useCellRenderer ...
The cause seems to the the following call is failing..
CellRendererService.prototype.doesImplementICellRenderer = function (cellRenderer) {
// see if the class has a prototype that defines a getGui method. this is very rough,
// but javascript doesn't have types, so is the only way!
return cellRenderer.prototype && 'getGui' in cellRenderer.prototype;
};
callRenderer
does not have .prototype
defined.
Looking at the generated js (in bundle.js), my CellRenderer class is wrapped in an iffy..
var HighlightCellRenderer = (function () {
function HighlightCellRenderer() {
}
// gets called once before the renderer is used
HighlightCellRenderer.prototype.init = function (params) {
// create the cell
this.eGui = document.createElement('div');
this.eGui.innerHTML = 'Oh hello';
// set value into cell
this.eValue.innerHTML = params.value;
};
;
// gets called once when grid ready to insert the element
HighlightCellRenderer.prototype.getGui = function () {
return this.eGui;
};
;
// gets called whenever the user gets the cell to refresh
HighlightCellRenderer.prototype.refresh = function (params) {
// set value into cell again
this.eValue.innerHTML = params.value;
};
;
// gets called when the cell is removed from the grid
HighlightCellRenderer.prototype.destroy = function () {
// do cleanup, remove event listener from button
};
;
return HighlightCellRenderer;
}());
exports.HighlightCellRenderer = HighlightCellRenderer;
Is there a problem with the ag-grid doesImplementICellRenderer
of have I done something wrong here (and is there a work around)?
Thanks in advance for any help!
Upvotes: 2
Views: 9809
Reputation: 7883
The problem here was I need to pass the component, not an a new instance of it to the column definition, ie instead of cellRenderer: new HighlightCellRenderer(),
, use cellRenderer: HighlightCellRenderer,
.
Upvotes: 3