ag-grid custom tooltip not working after cell value update, working after refresh of the grid only

1
votes

Ag-grid custom tooltip not working after cell value updation using rowNode, but working after refresh.

ag grid version 20.1.0, custom tooltip not showing results after cell value updation using rowNode.setDataValue('product', 10); , value gets updating in the cell but on hover the value is not previewing.

<ag-grid-angular
          class="ag-theme-balham grid"
          [rowData]="rowData"
          [animateRows]="true"
          rowHeight="38"
          [enableRangeSelection]="true"
          [enableFilter]="true"
          [enableSorting]="true"
          [enableColResize]="true"
          [sideBar]="sideBar"
          [columnDefs]="columnDefs"
          [domLayout]="autoHeight"
          (gridReady)="onGridReady($event)"
          (rowClicked)="rowClicked($event)"
          [autoGroupColumnDef]="autoGroupColumnDef"
          [rowGroupPanelShow]="rowGroupPanelShow"
          [suppressNoRowsOverlay]="true"
          [suppressDragLeaveHidesColumns]="true"
          [suppressMakeColumnVisibleAfterUnGroup]="true"
          [frameworkComponents]="frameworkComponents"></ag-grid-angular>


  in TS:
----------

and setting cell value like this in the aggrid programtiaclly. 

        const id = this.selectedRow['id']; (grid - id -- dynamicvalue)
        const rowNode = this.gridApi.getRowNode(id);
        rowNode.setDataValue('status', 1);


        this.frameworkComponents = {
         customTooltipComponent: CustomTooltipComponent
        };


CustomTooltipComponent:-
---------------------------------------------------------------
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ITooltipAngularComp } from 'ag-grid-angular';
@Component({
  selector: 'app-custom-tooltip',
  template: `<div class="custom-tooltip">
  <div *ngIf="imageViewer"><img [src]="params.value" alt="" /></div>
  <div *ngIf="imageViewer === false">{{ params.value }}</div`,
  styleUrls: ['./custom-tooltip.component.scss']
})

class CustomTooltipComponent implements ITooltipAngularComp {
  private params: any;
  private data: any;
  public imageViewer: boolean;

           agInit(params): void {
               this.params = params;
           }

}
-----------------------------------------------------------------------

my expected result is after setting value, on hover of cell, i need to see the updated value as tooltip, with out refresh.

1
javascriptangularag-gridag-grid-angular

1 Answers

0
votes

In your defaultColDefs of table try using tooltip key directly as follows:

this.defaultColDef ={
      tooltip: (params) => {
        return params.name;
      }