CODEWITHSUNDEEP
angulartypescriptag-grid
Mitchell
Mitchell

Reputation: 35

How to make Ag-Grid cell text (not entire cell) have a click event

I'm trying to open a component whenever the user clicks on the text within a specific cell (in this case in the Name column). The problem I'm running into is that there isn't any method (as far as I can tell) in the Ag-Grid that allows for this. I believe there is a method for adding a click event for the specific cell, but I'm trying to only have it capture the events for when the cell text is clicked. Does anyone know how I can accomplish this?

I've tried many Ag-Grid methods, but none have cell text click event.

this.gridOptions.api.setColumnDefs([{
    headerName: "Name",
    field: "Name"
  },
  {
    headerName: "Description",
    field: "Description"
  },
  {
    headerName: "Actions",
    cellRendererFramework: ActionsRoleComponent,
    autoHeight: false,
    cellClass: 'actions-button-cell d-flex align-items-center justify-content-center',
    width: 80,
    pinned: 'right',
    suppressResize: true,
    suppressFilter: true,
    suppressSorting: true,
    suppressMovable: true,
    cellEditorFramework: ActionsRoleComponent
  }
]);
this.gridOptions.api.setRowData(receivedJson);
this.gridOptions.api.sizeColumnsToFit();

Upvotes: 1

Views: 5273

Answers (1)

wentjun
wentjun

Reputation: 42526

When it comes to customising the cell renderers for ag-Grid, you will need to make use of the Cell Renderer Componenta.

First, on your component.html, include the input binding for frameworkComponents

<ag-grid-angular
    #agGrid
    style="width: 100%; height: 100%;"
    id="myGrid"
    class="ag-theme-balham"
    [columnDefs]="columnDefs"
    [frameworkComponents]="frameworkComponents"
    (gridReady)="onGridReady($event)"
    .
    .
  ></ag-grid-angular>

On your main component that is using and generating the ag-grid, you will need to import your custom cell component, define the property for frameworkComponents, followed by providing the value for cellRenderer for the particular column in your column definitions:

import { NameRenderer } from "./name-renderer.component";

this.columnDefs = [
  {
    headerName: "Name",
    field: "name",
    cellRenderer: "nameRenderer",
  },
  // other columns
]

this.frameworkComponents = {
  nameRenderer: NameRenderer,
};

And on your custom cell renderer component, NameRenderer, you bind the click event. I am not sure which part of the cell you would require it to be clickable, but I assume you want the entire name to handle the click event

import {Component} from "@angular/core";
import {ICellRendererAngularComp} from "ag-grid-angular";

@Component({
  selector: 'name-cell',
  template: `<span (click)="onClick($event)">{{ params.value }}</span>`
})

export class NameRenderer implements ICellRendererAngularComp {

  // other parts of the component

  onClick(event) {
    console.log(event);
    // handle the rest
  }

}

Do not forget to include the custom cell renderer components in your module.ts,

import { NameRenderer } from "./name-renderer.component";

@NgModule({
  imports: [
    AgGridModule.withComponents([NameRenderer])
    // other imported stuff
  ],
  declarations: [
    NameRenderer,
    // other components
  ],
  bootstrap: [AppComponent]
})

I have forked and created a demo from the official ag-grid demo. You may refer to cube-renderer.component.ts for the handling of the click event.

Upvotes: 2

Related Questions