I have been working on creating my own cell renderer by referring to this example https://www.ag-grid.com/javascript-data-grid/cell-rendering/, but I am running into an issue when using TypeScript. When I define a class that implements the ICellRenderer interface and try to implement its methods, I encounter a compile time error: "Property 'eGui' does not exist on type 'MessageCellRenderer'."
Below is a snippet from my TypeScript file where I define the renderer along with the view containing the grid. NOTE: The grid functions properly without the cell renderer, but I need to customize the styling of cells based on their values, hence why I am trying to utilize the cell renderer.
import {ErrorFilterView} from "./error-dialog/error-filter-view";
import {ICellRenderer} from 'ag-grid-community/main';
var agGrid = require('../../../../node_modules/ag-grid-community');
class MessageCellRenderer implements ICellRenderer{
init(params) {
this.eGui = document.createElement('span');
if (params.value !== '' || params.value !== undefined) {
this.eGui.innerHTML = `'<span class="error_read_#: params.value# error-item_#: Id#">#:Message#</span>'`;
}
}
// 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
};
}
export var NotificationsDialogView = (viewModel : ErrorDialogViewModel) => {
if (!viewModel.getIsInitialized()) return;
var messageGrid: any;
var config = (element : any, isInitialized : boolean, context : any) => {
mdlInit(element, isInitialized, context);