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 }, {

Solution 1:

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.

Solution 2:

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

OR

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

Solution 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