Блог

Пользовательская подсказка Ag-grid не работает после обновления значения ячейки с помощью rowNode, но работает после обновления.

ag grid версии 20.1.0, пользовательская подсказка не показывает результатов после обновления значения ячейки с использованием rowNode.setDataValue(‘product’, 10); , значение обновляется в ячейке, но при наведении значение не просматривается.

 <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;
           }

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

мой ожидаемый результат — после установки значения при наведении курсора на ячейку мне нужно увидеть обновленное значение в виде всплывающей подсказки без обновления.

В вашем defaultColDefs таблицы попробуйте использовать ключ всплывающей подсказки напрямую следующим образом:

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