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 :)

you might have lucking binding the function to the attribute when declaring the ColDef like so: `{cellRenderer: this.iconRender.bind(this)}` — brooklynDadCore, Dec 14 '20 at 20:46
Thank you!, can you tell me what should I write in the iconRender in order to call myfunc()? — user, Dec 14 '20 at 20:51
when you pass the column definition to the ag-grid instance, it will have your function bound to `cellrenderer` attribute for that column. So when in its build lifecycle it checks the value at `cellRenderer` it will see your function and fire it then. — brooklynDadCore, Dec 14 '20 at 20:54
but i don't anderstand how i call the function, I want to call som function when clicking on the icon — user, Dec 14 '20 at 20:57
ah - then you need to attach a click handler. GridOptions has a 'onCellClicked' attribute and there you will assign a function. — brooklynDadCore, Dec 14 '20 at 21:02
i don't want cell click, i want iconclick..., is it possible? — user, Dec 14 '20 at 21:03
then you can assign a click handler thru the dom - but may effect perfomance — brooklynDadCore, Dec 14 '20 at 21:04
Document Object Model https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction — brooklynDadCore, Dec 14 '20 at 21:06
this could work params.icon.forEach(element => { var iconElement = document.createElement("i"); iconElement.className = "material-icons"...... iconElement.addEventListener('click', () => YOUR FUNCTION) spanElement.appendChild(iconElement); }); — brooklynDadCore, Dec 14 '20 at 21:07

Maulik · Accepted Answer · 2020-12-16T17:26:16.597

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.

How do i call function from Cell Renderer - ag grid

1 Answers1