CODEWITHSUNDEEP
angulartooltipag-grid
通りすがりのおっさん
通りすがりのおっさん

Reputation: 699

How can I use Ag-grid property tooltipField?

I am stuck when I using ag-grid with tooltipField property. I want to implement tooltip within ag-grid each row.

code is below. this code doesn't work.

{
  headerName: 'vital',
  field: 'indicator',
  tooltipField: 'indicator',
  cellRenderer: (p: any) => {
    return '<div align="center"><button class="btn btn-sm btn-primary" tooltip="'
      + this.translateService.instant(p.value)
      + '"></button></div>';
  }
}

Upvotes: 8

Views: 42940

Answers (5)

Rutuja Dhokchaule
Rutuja Dhokchaule

Reputation: 106

First of all set enableBrowserTooltips={true} in gridOptions

const gridOptions = {
  defaultColDef: {
    editable: true,
    sortable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
    resizable: true,
  },
  enableBrowserTooltips: true,
  rowData: {data},
  columnDefs: {columns},
};

Then Add tooltipField in your column defination.If you want to show value of each cell in tooltip then you should pass field to tooltipField. That is why I set tooltipField = 'name'.This will render cell value in tooltip.

const columns = [
{
  field: "name",
  headerName: "First Name",
  tooltipField: 'name'
  minWidth: 100,
}]

But in my case I wanted to show tooltip on an icon with custom text, also my column was custom so there were no field value from backend.So I used tooltipValueGetter.

{
  field: "Action", //this is custom column which renders icon on every row
  cellRendererFramework: (param: IActionColumn) => (
    <Link to={SOME_ROUTE}>
      <FaRegChartBar /> //icon
    </Link>
  ),
  tooltipValueGetter: () => "My Custom Text",
  sortable: false,
  minWidth: 100,
}

Hope this helps you! ;)

Upvotes: 1

Arun Kumar
Arun Kumar

Reputation: 209

 this.columnDefs = [
   {
      headerName: 'Amount', field: 'amount',
      cellRenderer: params => {
        return this.currencyFormatter(params);
      },
      tooltipValueGetter: params => {
        return this.currencyFormatter(params);
      },
    }
]

currencyFormatter(params) {
     return "$ " + (params.value);
  }

Upvotes: 1

bensonissac
bensonissac

Reputation: 695

This code worked for me in Angular 6.

 this.columnDefs = [
    {
        headerName: "Amount",
        field: "amount",
        valueFormatter: currencyFormatter,
        tooltip: function (params) {
            return (params.valueFormatted);
        },
    }
];

function currencyFormatter(params) {
  return "$ " + (params.value);
}

Upvotes: 6

gsubiran
gsubiran

Reputation: 2482

I know is too late for answer OP but I deal with this and maybe could be useful for anyone watching up something similar.

In ag-grid we have many functions to different goals and we take in mind that before implement our solution.

In the OP case I can see data manipulation in cellRenderer function. This ain't the propose of this function. For this work you should use valueGetter, here you could do your magic to get the value related to this cell.

Then if this value need some formatting you shouldn't do this on valueGetter for this propose you have the valueFormatter function.

(image from ag-grid doc) enter image description here

When the cellRender function is fired you have already the value and valueFormated so yo should only take care about how do you want to show this in the UI instead of trying to get/format value.

Some general pseudo code:

//Column
{
    headerName: 'Header Name',
    field: 'data.PropValue',
    tooltipField: 'data.PropValue',//This override 'tooltip' function implementation
    valueGetter: function (params) {//Only needed if you need to do some complex to get the value, i.e: data.Name + ' ' + data.Surename
        return params.data.PropValue + ' ' + params.data.PropValue1;
    },
    valueFormatter: function (params) {//Only needed if you need to do some custom parsing before show value in the UI, i.e: '$' + params.value
        return params.value;
    },
    cellRenderer: function (params) {//Only needed if you need some custom html control or something else

        return '<div ><button class="btn btn-sm btn-primary">' + params.valueFormatted +'"</button></div>';
    },
    tooltip: function (params) {//This will show valueFormatted if is present, if no just show the value.
        return (params.valueFormatted ? params.valueFormatted : params.value);
    }
}

Pseudo code regarding OP question:

//Column
{
    headerName: 'vital',
    field: 'indicator',                        
    valueGetter: (p: any) => {
        return this.translateService.instant(p.value);
    },
    cellRenderer: (p: any) => {
        return '<div align="center"><button class="btn btn-sm btn-primary">' + p.value + '</button></div>';
    },
    tooltip: (p: any) => {
        return p.value;
    }
}

Documentation links:

https://www.ag-grid.com/javascript-grid-value-getters/

https://www.ag-grid.com/javascript-grid-column-properties/#columns-only

Upvotes: 14

Jatin Kakkar
Jatin Kakkar

Reputation: 31

  // setting up the cell render function for every Column

   $scope.columnsHeaders[i].cellRenderer = function(params) {
         if(params.value != null) {
                return '<span title="'+params.value+'">'+params.value+'</span>';
         }else {return null;}
   }

// this logic will not work for nested JSON soo you can do it like that
// here you are setting toolTipField property of your columns and initialised its value by column data

$scope.columns[i].tooltipField = $scope.columns[i].field;

Upvotes: -1

Related Questions