How to render the HTML inside a row in ag-grid?

Question

Is there any api or something using which I can render HTML inside a row. I'am able to bind simple html but my HTML is dynamic and contains some angular directives so, how can I render that HTML in ag-grid.

Solution 1

Add to the columnDefs of specific column which cells contain HTML:

cellRenderer: function(params) {
                            return params.value ? params.value : '';
                        }

This fools ag-grid to think you are rendering column by your own function (which you technically are).

Solution 2

You may have to use "cellRenderer" property in ag-grid as follows

Lets assume you have a ag-grid html markup defined as follows

<ag-grid-angular style="width: 900px; height: 115px;" class="ag-theme-fresh" [rowData]="rowData" [columnDefs]="columnDefs"></ag-grid-angular>

Lets assume that you are trying to render images in one of the columns basesd on the input text data. Say that your rowData and columnDef definition in the component.ts file are as follows

public columnDefs = [
    { headerName: 'File Type', field: 'fileType', width: 283 },
    { headerName: 'File Icon', field: 'fileIcon', width: 283, cellRenderer: this.customCellRendererFunc }
];

public rowData = [
    { 'fileType': 'ADOBE', 'fileIcon': 'pdf' },
    { 'fileType': 'WORD', 'fileIcon': 'doc' },
    { 'fileType': 'EXCEL', 'fileIcon': 'xls' }
]

Lets try to display a file icon based on the file type. So my customCellRendererFunc shall be as follows

public customCellRendererFunc(params): string {
    let cellContent: string = '';
    try {
        for (let attItr: number = 0; attItr < params.value.length; attItr++) {
            let fileName: string = params.value[attItr].fileIcon;

            fileType = fileIcon;
            if (fileType === 'pdf') {
                imagePath = 'assets/pdf-icon.png';
            } else if (fileType === 'doc' || fileType === 'docx') {
                imagePath = 'assets/doc-icon.png';
            } else if (fileType === 'xls' || fileType === 'xlsx') {
                imagePath = 'assets/xls-icon.png';
            } else {
                imagePath = '';
            }


            cellContent += '<image src="' +
                imagePath + '" title="' + filetype, '"></a> &nbsp;');
        }
    } catch (exception) {

        console.error(exception);
    }

    return cellContent
}

Make sure to add your image icons in the assets folder.

Solution 3

use cellRenderer for your custom angular html

import { Component } from "@angular/core";
import { ICellRendererAngularComp } from "ag-grid-angular";

@Component({
    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                    </div>
                </ng-template>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })

export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}

var colDef1 = {
    headerName: "Model Level",
    field: "ModelLevelTimeSeries.Id.Value",
    editable: false,
    cellRenderer: "tooltipRenderer",
    ...
    ....
}

Solution 4

The following outdated solution works for ag-grid < 4.

Set the property angularCompileRows to true on grid options.

This will enable angular compilation on the rows.

Grid Options properties : https://www.ag-grid.com/javascript-grid-properties/index.php

Sample of using angularCompileRows can be found here : https://www.ag-grid.com/angular-grid-cell-template/index.php

However be warry that enabling angularCompileRows slow down the grid. If you have a huge amount of data and use the inifite scroll youi may want to use a cellRenderer in order to return a native dom element with native event binding and use $scope.$apply() to resync with angular.

*For the others version : *

It is possible to build cell renderers, cell editors and filters using Angular. Doing each of these is explained in the section on each.

Although it is possible to use Angular for your customisations of ag-Grid, it is not necessary. The grid will happily work with both Angular and non-Angular portions (eg cellRenderers in Angular or normal JavaScript). From https://www.ag-grid.com/angular-more-details/

Solution 5

We can use a CellRenderer function to Create a custom HTML template for each cell as given below. I had a link under my tooltip and I did not want to show the href of the anchor tag for which I have used innerHTML.

{
      //field: 'TOOL_TIP',
      headerName: 'Tooltip',
      filter: 'agTextColumnFilter',
      cellRenderer: params => {
        var a = document.createElement('div');
        a.innerHTML = params.data.TOOL_TIP;
        return a;
      },
      tooltip: (params) => '' + params.value
    }

View more solutions

Comments

[Chris]

This option seems to no longer exist.

[Walfrat]

It is possible to build cell renderers, cell editors and filters using Angular. Doing each of these is explained in the section on each. Although it is possible to use Angular for your customisations of ag-Grid, it is not necessary. The grid will happily work with both Angular and non-Angular portions (eg cellRenderers in Angular or normal JavaScript). From ag-grid.com/angular-more-details

[Chris]

Seems to work, but is it safe ? Doc states "If using a framework such as React or Angular for your cell renderers then you must provide a cell renderer component. There is no function equivalent for the frameworks such as React and Angular." ag-grid.com/javascript-grid-cell-rendering-components/…