ag-grid自定义工具提示在单元格值更新后不起作用,仅在刷新网格后起作用

时间:2019-04-24 15:08:34

标签: javascript angular ag-grid ag-grid-angular

使用gridNode更新单元格值后,Ag-grid定制工具提示不起作用,但刷新后起作用。

ag网格版本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;
           }

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

我的预期结果是在设置值之后,在单元格上悬停时,我需要将更新后的值作为工具提示,而无需刷新。

1 个答案:

答案 0 :(得分:0)

在表的 defaultColDefs 中,尝试直接使用工具提示键,如下所示:

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