3

It would seem that whenever you want to customize the output of the cell by something more than just text transformation, you need a cellRenderer. But it requires a whole new component to fulfill that goal. That approach is, in general, fine, but I've found that in my project I'm using grids a lot, and I need custom cell renderers for them. Most of the time they are also not re-usable and specific to particular grid. The overhead for creating (and storing somewhere in the filesystem) another component, just for the sake of providing an HTML template structure, seems a bit overkill to me.

Is there a way to render a cell in Ag-Grid, without specifying a full-blown component, inheriting from AgGrid renderers? For instance, can I just use ng-template with #id reference, that I could pass somehow to Ag-Grid?

rattkin
  • 637
  • 8
  • 25
  • Yes, you can use ng-template in a component and pass it to ag-grid as cell-renderer, and in that component, you can check a parameter/variable and enable or disable the required HTML format using ngif. This way you can have only one component which handles cell rendering for all grids? – koolhuman Mar 01 '18 at 22:26
  • If you have something relevant to add, please answer the actual question, rather than inventing bizarre and inefficient solutions I didn't ask for. – rattkin Mar 02 '18 at 22:40
  • @rattkin, did you end up finding out a simple way to customize the cell? – Judy007 May 31 '18 at 16:14
  • Unfortunately, no. I'm using external classes for cellrenderers, which is quite cumbersome. – rattkin Jun 27 '18 at 12:40

1 Answers1

0

Below is an example of using ng-template in cell renderer custom component, you can create multiple spans and you can use ngif to show and hide or control which element to display based on a property. In below code, I am using only one span and you can modify based on your needs. Also after writing this cell renderer component, I assign the name to the cell renderer of ag-grid in coldefs.

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 = {
    cellRenderer: "tooltipRenderer",
    ...
}
koolhuman
  • 1,581
  • 15
  • 25
  • 1
    I appreciate the good will, but you've misunderstood the question. Plus, that solution is pretty awful. Big clunky component aggregating dependencies across all your code and programming by strings is a no-no in my book. – rattkin Mar 07 '18 at 00:57
  • What do you mean by, programming by strings? In order to render a bootstrap tooltip in ag-grid cell there is no other way than to create a custom component, because the tooltip is not rendered in a cell if you write a html call back cell renderer. May be I just wasted my time answering your question. I apologize. – koolhuman Mar 07 '18 at 04:49