CODEWITHSUNDEEP
javascripttypescriptionic-frameworkionic2ag-grid
peterc
peterc

Reputation: 7883

Ag-grid Error when using CellRenderer in Typescript

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

Answers (1)

peterc
peterc

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

Related Questions