How to get the tooltip data async from backend in ejs-grid

Question

Hello,i need to show a tooltip when hovering over a grid cell. You helped me already with this in ticket (https://www.syncfusion.com/forums/183835/how-to-get-row-data-of-a-focused-row)In this tooltip i need to show some additional information from backend.This works, but there is one problem.The tooltip is rendered to fast, so it is shown without the data from backend, when i hover over it the first time.The second time the backenddata is stored in the datasource and is shown correctly. I tried to use async/await but the tooltip is rendered anyway.Is there a way to make the tooltip wait till the data from backend is fetched?See example (https://stackblitz.com/edit/angular-ivy-vh57co?file=src%2Fapp%2Fapp.component.ts )Thanks for help, regards Matthias

Vikram Sundararajan · Accepted Answer

Hi Matthias,Greetings from Syncfusion support,It seems like you're facing an issue where the tooltip is
being rendered before the data from the backend is fetched, resulting in an
incorrect tooltip on the first hover. You've already attempted to use
async/await, but the tooltip is still rendering prematurely. This is happening
because the tooltip creation and rendering process is not directly tied to the
asynchronous data fetching process.One approach to address this issue is to ensure that the
tooltip rendering process is triggered only after the backend data is fetched
and available. You can modify your code to achieve this by updating the tooltip
content after the backend data is fetched, and then opening the tooltip. Please
refer the below code snippet and sample for more information,

[app.component.ts]
   
    switch (currentColumn.field) {
          case
  'wirkstoff':
            await
  this.getBackendDataAsync(currentRowData);
           
  content =
             
  ['wirkstoff'] +
             
  ',  ' +
             
  currentRowData['backend_data'];
           
  break;
          case
  'dosierung':
           
  break;
          case 'test':
           
  break;
          default:
           
  break;
        }
   
        let tooltip: Tooltip =
  new Tooltip({
          content:
  content,
        });
   
        (tooltip as
  any).appendTo(targetElement);
        tooltip.open();

targetElement.addEventListener('mouseleave', this.mouseleaveEvent);
      }
    }

async getBackendDataAsync(currentRowData) {
     
  return new Promise<void>((resolve) => {
       
  setTimeout(() => {
         
  this.setDatasource(currentRowData);
         
  resolve();
       
  }, 100);
     
  });
    }

Sample: https://stackblitz.com/edit/angular-ivy-pfdwck?file=src%2Fapp%2Fapp.component.tsIf you
require further assistance, please do not hesitate to contact us. We are always
here to help you.Regards,Vikram S

Matthias Wagner · Answer

Thank you very much, works now.

Suganya Gopinath · Answer

We are glad that the provided solution helped. We are marking this forum as solved.