Clickable event on ag-grid

Question

How to make a certain in column in my ag-grid to be clickable like this :-

also how i can render a dynamic content in a certain column , for example a picture , button ...etc ?

Answer 1

@NearHuscarl He has a great answer

Here is my simple implementation after more research

columnDefs:
  [
    {
      headerName: "Vehicle Ident number",
      field: "VIN",
      filter: true,
      checkboxSelection: true,
      cellRenderer: function (params) {
        return '<span><a href="/car/view/'+params.value+'">'+params.value+'<a/></span>'
      }
    },
    {
      headerName: "Plate Source",
      field: "REGISTRATION_PLATE",
      filter: true}
  ]
,

Answer 2

You can write your own custom cell renderer to display more complex html. Here is some examples

Create a cell renderer

If you use React. Cell renderer can be just another React component to display any html structure you want. This one is a link to your google image results of the value provided

function LinkCellRenderer(props) {
  return (
    <a
      target="_blank"
      rel="noopener noreferrer"
      href={"https://www.google.com/search?tbm=isch&q=" + props.value}
    >
      {props.value}
    </a>
  );
}

Here is another example. This is a button cell renderer that shows the current row data when clicked

function ButtonCellRenderer(props) {
  const onClick = () => {
    const { data } = props.node;
    let message = "";

    Object.keys(data).forEach((key) => {
      message += key + ":" + data[key] + "\n";
    });
    alert(message);
  };
  return <button onClick={onClick}>Click me</button>;
}

Usage

<AgGridReact
  columnDefs={[{
    headerName: "Country",
    field: "country",
    width: 120,
    cellRenderer: "LinkCellRenderer"
  },
  {
    headerName: "Action",
    field: "action",
    width: 100,
    cellRenderer: "ButtonCellRenderer"
  },...]}
  frameworkComponents={{
    LinkCellRenderer,
    ButtonCellRenderer
  }}
/>

Live Example