CODEWITHSUNDEEP
ag-gridag-grid-angular
iPhoneJavaDev
iPhoneJavaDev

Reputation: 825

How to prevent the custom tooltip from showing if the cell is currently being edited

Below is a sample of a field configuration under columnDefs. I'm using customEditor for the cell editor. I'm also using customRenderer for the cell renderer. Also, i'm using customTooltip for the tooltip.

{headerName: 'Amount', field: 'amount', lockPosition: true, width: 85,
 cellEditor: 'customEditor', cellRenderer: 'customRenderer',
 tooltipComponent: 'customTooltip',
 tooltipValueGetter: params => params.data.amount ? params.data : undefined
...}

I understand that the tooltip will only show when there's value on the cell. So using tooltipValueGetter, I check if params.data.amount is present. If so, I will set the value as params.data; if not, i set it to undefined. This is working.

However, when I am editing the cell, the tooltip still shows. How can I prevent the tooltip from showing when I am editing the cell? Furthermore, when I delete the value, the tooltip still shows and doesn't disappear. It's there forever.

Note: I'm using Angular 10 and latest version of ag-grid.

Upvotes: 0

Views: 929

Answers (1)

sandeep joshi
sandeep joshi

Reputation: 2151

In you custom tooltip implementation check if the column (params.colDef.field) for which tooltip is going to render is same as one being edited at the moment (check using columnCellInEdit variable which we will set) if so then don't render anything else render normally.

 var columnCellInEdit ={};


    onCellEditingStarted: function(event) {
    
    columnCellInEdit.columnId  = event.column.colId;
    columnCellInEdit.rowNodeId = event.node.id;
    console.log('cellEditingStarted');
    },

   // If you dont like the above approach then use below piece 
   // of code in your tooltip renderer

    var cellDefs = gridOptions.api.getEditingCells();
    cellDefs.forEach(function(cellDef) {
    // use colid and rowIndex to confirm that the cell is being edited and not to show tooltip
    console.log(cellDef.rowIndex);
    console.log(cellDef.column.getId());

Upvotes: 0

Related Questions