Dynamically cell rendering in ag-grid for polymer 3

Question

Dynamically cell rendering in ag-grid for polymer 3

1.8k Views Asked by Tihomir At 18 May 2025 at 20:28

How should the polymer ag-grid example be changed to render instead of "Change me" button, button with dynamic generated text from data model (Toyota, Ford or Porsche)

In my use case I need to add a hyperlink based on the row data and a tooltip on a row.

ag-grid-polymer-example.js:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import 'ag-grid-polymer';

import ClickableCellRenderer from './clickable-renderer'

class AgGridPolymerExample extends PolymerElement {
static get template() {
    return html`
        <link rel="stylesheet" href="../node_modules/ag-grid-community/dist/styles/ag-grid.css">
        <link rel="stylesheet" href="../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css">

        <div style="width: 800px;">
            <h1>Simple ag-Grid Polymer 3 Example</h1>
            <ag-grid-polymer style="width: 100%; height: 350px;"
                             class="ag-theme-balham"
                             rowData="{{rowData}}"
                             columnDefs="{{columnDefs}}"
                             components="{{components}}"
                             on-first-data-rendered="{{firstDataRendered}}"
                             ></ag-grid-polymer>
        </div>
`;
}

constructor() {
    super();

    this.columnDefs = [
        {headerName: "Make", field: "make"},
        {headerName: "Model", field: "model"},
        {headerName: "Price", field: "price"},
        {
            headerName: "Clickable Component",
            field: "make",
            cellRendererFramework: 'clickable-renderer'
        }
    ];

    this.rowData = [
        {make: "Toyota", model: "Celica", price: 35000},
        {make: "Ford", model: "Mondeo", price: 32000},
        {make: "Porsche", model: "Boxter", price: 72000}
    ];

    this.components = {
        clickableCellRenderer: ClickableCellRenderer,
    }
}

firstDataRendered(params) {
    params.api.sizeColumnsToFit()
 }
}

customElements.define('ag-grid-polymer-example', AgGridPolymerExample);

clicable-renderer.js

    import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import 'ag-grid-polymer';

export default class ClickableCellRenderer extends PolymerElement {
    static get template() {
        return html`
            <button style="height: 21px" on-click="click">Click Me</button>
        `;
    }

    agInit(params) {
        this.params = params;

        this.cell = {row: params.value, col: params.colDef.headerName};
    }

    click() {
        console.log("Child Cell Clicked: " + JSON.stringify(this.cell));
    }
}

customElements.define('clickable-renderer', ClickableCellRenderer);

index.html

    <!doctype html>
<html lang="en">
<head>
    <script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script src="../node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>

    <script type="module" src="ag-grid-polymer-example.js"></script>
</head>
<body>
<ag-grid-polymer-example></ag-grid-polymer-example>
</body>
</html>

I guess, I should somehow write template value form agInit(), where I have data i need in "this.params.data" at some path. (?)

Original Q&A

There are 1 best solutions below

**Tihomir** · Accepted Answer

To stay close to the original example, assume we want to render button title dynamically. It was required to add public property and asign a value to it in agInit() as shown in the example:

import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
import 'ag-grid-polymer';

export default class ClickableCellRenderer extends PolymerElement {
    static get template() {
        return html`
            <button style="height: 21px" on-click="click">Click [[btnTitle]]</button>
        `;
    }

    static get properties() {
        return {
            btnTitle: {
                type: String,

            }
        }
    }

    agInit(params) {
        this.cell = {row: params.value, col: params.colDef.headerName};
        this.btnTitle = params.data.make;

    }

    click() {
        console.log("Child Cell Clicked: " + JSON.stringify(this.cell));
    }
}

customElements.define('clickable-renderer', ClickableCellRenderer);

Dynamically cell rendering in ag-grid for polymer 3

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in WEB-COMPONENT

Related Questions in AG-GRID

Related Questions in POLYMER-3.X

Trending Questions

Popular # Hahtags

Popular Questions