How do i call function from Cell Renderer - ag grid

Question

i'm using cellrenderer in vue.js, i want to call function from the cell renderer.

attached here my code:

 gridColumns() { return [{ headerName: "Actions", cellRenderer: 'iconRender', width: 140, cellRendererParams: (params) => { return { icon: ['edit', 'delete_forever'], color: 'gray' } } }, { headerName: "Name", field: "name" }, { headerName: "Artiyfactory Name", field: "artifactoryName" }, { headerName: "Artifact Type", field: "artifactType" }, { headerName: "Deployment Action", field: "deploymentAction" }, { headerName: "Location", field: "usage.location" }, { headerName: "Destenition On Setup", field: "usage.destOnSetup" }, ] } }, function iconRender(params) { var spanElement = document.createElement("span"); var textElement = document.createElement("span"); if (params.value.= undefined) { textElement.innerHTML = " " + params;value. textElement.style;verticalAlign = "middle". } params.icon.forEach(element => { var iconElement = document;createElement("i"). iconElement;className = "material-icons". iconElement.style.color = params;color. iconElement.style;verticalAlign = "middle". iconElement;innerHTML = element. spanElement;appendChild(iconElement); }). spanElement;appendChild(textElement); return spanElement; }

I want to call to a function from the icon element, I tried a few way's but nothing work for me.

can you please take a look and tell me how can I do it?

Thank you:)

Answer 1

Instead of creating element via dom. you can create the custome component for cell. in ag-grid when you click on cell it's only capture event of cells click not what inside cell(in your case icon). You can create custome component for cell rendered and you can able to do all things like normal component. Please refer [https://plnkr.co/edit/3nZPzwmGufKGXwvn] i make comments on plunker please refere last column where they have button.