Show dialog when hover row

[Toan Bui]

Hi, have a nice day! I want to show dialog when I hovering over any row. Can you help me?

[Sujith Kumar Rajkumar]

Hi Toan, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to show dialog on each Grid row hover. You can achieve it by following the below steps, 

 

Initially, render the EJ2 Dialog with the required properties and set its ‘visible’ property as ‘false’ in order to hide it on initialization. 

 

<ejs-dialog #dialog id='dialog' [visible]='false' isModal='true' header="Header area" content="Content area" showCloseIcon="true" target='#dialog-target' width='300px'> 

</ejs-dialog> 

 

Then bind ‘mouseover’ event to the Grid and here show the initialized EJ2 Dialog by calling its ‘show’ method. 

 

@ViewChild('dialog') dialogInstance: DialogComponent; 

 

// Grid’s ‘mouseover’ event handler 

mouseOver(args) { 

     // The EJ2 Dialog is shown 

    this.dialogInstance.show(); 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-h3wnrj?file=app.component.ts 

 

More details on the EJ2 Dialog can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/dialog/getting-started/ 

 

API: https://ej2.syncfusion.com/angular/documentation/api/dialog/#show 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Toan Bui]

I did it. Thank you so much!

[Sujith Kumar Rajkumar]

Hi Toan, 

 

You’re welcome. We are glad to hear that your query has been resolved. 

 

Regards, 

Sujith R