How to display different column data as tool tip in ag grid pivot mode?

问题

var ColDef = [{
    headerName: "colA",
    field: 'colA',
    rowGroup: true
  },
  {
    headerName: "colB",
    field: 'colB',
    pivot: true,
    enablePivot: true
  },
  {
    headerName: "colC",
    field: 'colC',
    rowGroup: true
  },
  {
    field: 'colD',
    aggFunc: 'first',
    valueFormatter: currencyFormatter,
    tooltip: function(params) {
      return (params.valueFormatted);
    },
  },
  {
    field: 'comment'
  },
  {
    field: 'colF'
  }
];
function currencyFormatter(params) {
  return params.value;
}

above code is from different question. it works but i want to use different 'comment' field as tool tip to current 'colD' . also this is a group and pivot agGrid,if it is normal grid this is not a problem. I would appreciate any ideas for group and pivot agGrid?

回答1:

just use tooltipValueGetter

{
   field: 'message',
   headerName: 'Message',
   headerTooltip: 'Message',
   width: 110,
   filter: 'agSetColumnFilter',
   tooltipValueGetter: (params) =>  `${params.value} some text`
}

or just use the same method for tooltipValueGetter

UPDATE:

Okay, I understood

but it also easy

Ag-grid has property tooltipField - where you can choose any field from grid

For example here - in the column of 'sport' I am showing tooltip of the previous column

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

You can easily manipulate with data for each field by tooltipValueGetter with next construction:

tooltipValueGetter: function(params) {  
  return `Country: ${params.data.country}, Athlete: ${params.data.athlete}, Sport: ${params.data.sport}`;
},

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

Result:

UPDATE 2

Hey Man! I do not understand was is wrong

I just used your code snippet and my solution

And it works as you want

Example: https://plnkr.co/edit/zNbMPT5HOB9yqI08

UPDATE 3

A little bit of manipulation and I can get the data

{ field: 'gold', aggFunc: 'sum',
    tooltipValueGetter: function(params) {  
    var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
    return model.allLeafChildren[0].data.silver;
  },
},

The Last: https://plnkr.co/edit/9qtYjkngKJg6Ihwb?preview

回答2:

Not sure if there is good way for the grid to get the data in your scenario then, as your rows and columns are different than original model after pivot.

Maybe you can consider retrieve this information outside of grid. Assume you also want some aggregated information displays in the tooltip, the tooltip function may eventually look like this:

tooltip: params => {
  const country = params.node.key;
  const year = params.colDef.pivotKeys[0];
  const athletesWithNumbers = this.state.rowData
    .filter(d => d.year == year)
    .filter(d => d.country === country)
    .filter(d => d.gold > 0)
    .map(d => d.athlete + ': ' + d.gold);
  return athletesWithNumbers.join(', ');
}

See this plunker for what I am talking about - again, not sure if this is what you want but just an FYI.

回答3:

    var ColDef = [{
        headerName: "colA",
        field: 'colA',
        rowGroup: true
      },
      {
        headerName: "colB",
        field: 'colB',
        pivot: true,
        enablePivot: true
      },
      {
        headerName: "colC",
        field: 'colC',
        rowGroup: true
      },
      {
        field: 'colD',
        aggFunc: 'last',
    tooltipValueGetter: commentTooltipValueGetter
      },
      {
        field: 'comment'
      },
      {
        field: 'colF'
      }
    ];


    function commentTooltipValueGetter(params) {
    const colB = params.colDef.pivotKeys[0];
    var model = params.api.getDisplayedRowAtIndex(params.rowIndex);
    for (var i = 0; i < model.allLeafChildren.length ; i++) {
        if (model.allLeafChildren[i].data.colB=== colB) {
          return model.allLeafChildren[i].data.comments;
                                                       }
                                             }
  }

This is what i had to do for my question. It is combination of answers from @wctiger and @shuts below. So please also refer them for more context

来源：https://stackoverflow.com/questions/62077503/how-to-display-different-column-data-as-tool-tip-in-ag-grid-pivot-mode

标签

javascript

angularjs

ag-grid