Click on cell display/append order of selected row in a ag grid Angular

Question

I am implementing ag-grid with multiple selection checkbox in angular

Grid-component.html

<ag-grid-angular
    [defaultColDef]="defaultColDef"
    style="height: 600px; width: 100%"
    class="ag-theme-density zebra"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    [suppressRowClickSelection]="true"
    [groupSelectsChildren]="true"
    [pagination]="true"
    (rowSelected)="onRowSelected($event)"
    [rowSelection]="rowSelection"
    [paginationPageSize]="paginationPageSize"
    (gridReady)="onGridReady($event)"
    [paginationNumberFormatter]="paginationNumberFormatter"
    (firstDataRendered)="onFirstDataRendered($event)"
    [enableBrowserTooltips]="true"
    [context]="context"
    [animateRows]="true"
  >
  </ag-grid-angular>

Grid-component.ts

  /**
   * on checkbox row select event
   */
  onRowSelected(event: RowSelectedEvent): void {
    this.rowCount = KrGridUtils.getSelectedLength(event);
    this.selectedData = KrGridUtils.getSelectedData(event);
  }

Icon-render-framework.ts

export class KrViewerGridIconComponent implements ICellRendererAngularComp {
  public cellValue!: string;
  isShowBadge: boolean = false;
  typeIcon: string = '';
  params!: ICellRendererParams;
  testName!: string;
  order!: number;
  color!: string;

  // gets called once before the renderer is used
  agInit(params: ICellRendererParams): void {
    this.params = params;
    if (params.colDef?.headerName === KR_TEMPLATE_HEADER.TYPE) {
      this.typeIcon = params.data.type;
      this.isShowBadge = !this.isShowBadge;
      this.cellValue = this.getValueToDisplay(params);
    }
    if (params.colDef?.headerName === KR_TEMPLATE_HEADER.NAME) {
      this.testName = params.data.name;
    }
  }

  // gets called whenever the user gets the cell to refresh
  refresh(params: ICellRendererParams): boolean {
    // set value into cell again
    this.cellValue = this.getValueToDisplay(params);
    return true;
  }


  getValueToDisplay(params: ICellRendererParams): string {
    return params.valueFormatted ? params.valueFormatted : params.value;
  }
}

Icon-render-framework.html

<button
  *ngIf="!isShowBadge && !testName"
  class="grid-settings"
  ds-button
  [ngStyle]="{ 'background-color': params.data.color }"
  (click)="openGridSettings($event)"
>
  <svg-icon data-testId="settings-icon" class="grid-settings" [key]="'settings'" [size]="'sm'"></svg-icon>
</button>
<div *ngIf="isShowBadge" class="type-header-value">
  <div><svg-icon data-testId="settings-icon" class="grid-settings" [key]="typeIcon" [size]="'md'"></svg-icon></div>
  <div>
    <span class="type-badge start-100 translate-middle badge rounded-pill bg-secondary">{{ 0 }}</span>
  </div>
</div>
// here to show Name row data and hard coded order badge
**<div *ngIf="testName" class="type-header-value">
  <div>
    {{ testName }} // Name colummn
    <span class="type-badge start-100 translate-middle badge rounded-pill bg-secondary">{{ params.data.order }}</span> // showing oder
  </div>
</div>**

and i implemented cellRendererFramework to render icons and badge(setting, type, name badge) row data, Currently, agint in cellRendererFramework shows the order number(hardCoded) as a badge in Name row data, but i want to show ordering of selected row, when i select row/clicked on row checkbox append a order number to a particular row to a Name, like marked in the picture, or how to get row selected event in the cellRendererFramework,

grid image

Please help me on this

Answer 1

You can use rowIndex property that is present on row node.

{{ params.node.rowIndex + 1 }}

To only show this when row is selected, you can use params.node.selected , perhaps like so:

{{ params.node.selected ? params.node.rowIndex + 1 : '' }}