Close SfDialog on click out without using Javascript

[Mario Sanchez Mecho]

Hi All,

In my blazor client-side app I'm using a SfDialog to show a Notification panel, it is opened on a top menu button click and I would like to close it when clicking outside de dialog area, I managed to do it by adding javascript code but it would be great to have an option included in the control so that it is all the functionality in the same place and easier to understand the code when it's read. 

Is there a way to do it?

Thanks

Mario

[Vinitha Jeyakumar]

Hi Mario, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “Close SfDialog on click out without using Javascript” 

 

Your requirement can be achieved by using Modal Dialog which shows an overlay behind the dialog. While the user clicks the overlay, the action can be handled through the OnOverlayClick event and dialog can be closed using it. Please check the below code snippet for your reference, 

 

Code snippet:  

<SfButton @onclick="@OpenDialog">Open Modal Dialog</SfButton> 

 

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogEvents OnOverlayClick="@OnOverlayclick"> 

    </DialogEvents> 

    <DialogTemplates> 

        <Content> This is a modal dialog and it can be closed when clicking the overlay area </Content> 

    </DialogTemplates> 

</SfDialog> 

 

@code { 

    private bool IsVisible { get; set; } = true; 

 

    private void OpenDialog() 

    { 

        this.IsVisible = true; 

    } 

 

    private void OnOverlayclick(MouseEventArgs arg) 

    { 

        this.IsVisible = false; 

    } 

} 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168355/ze/Web_Dlg792245738 

 

Documentation: https://blazor.syncfusion.com/documentation/dialog/getting-started#modal-dialog 

 

Please check the above sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha. 

 

[Mario Sanchez Mecho]

Hi Vinitha, 

Thank you for your response. Sorry, I meant to say SfToolip, as it is the one I'm using for my user account info when logged in.

Also, I have a notification panel made using another SFToolip, so for both of them, I would like to Close them when the other one is opened. Close on click outside will make it. Is there a way to do it?

<SfTooltip @ref="@NotificationTooltip" CssClass="notifications-tooltip" Position="Syncfusion.Blazor.Popups.Position.BottomRight" OpensOn="Click" IsSticky="true" ShowTipPointer="false">

 <SfTooltip @ref="@Tooltip" CssClass="user-info-tooltip" Position="Syncfusion.Blazor.Popups.Position.BottomLeft" OpensOn="Click" ShowTipPointer="false">

Thanks again for the support.

Regards,

Mario

[Sharon Sanchez Selvaraj]

Hi Mario, 

 

Thanks for the details.  

 

We can close the Tooltip in required scenarios using CloseAsync method. In order to achieve the required scenario, we have used similar code snippets and closed the Tooltip alternately using the OnOpen event of each Tooltip. 

 

Refer to the code snippet: 

 

<div style="display:inline-flex"> 

              <SfTooltip OnOpen="open" Target="#btn" Content="Welcome" @ref="@NotificationTooltip" CssClass="notifications-tooltip" Position="Syncfusion.Blazor.Popups.Position.BottomRight" OpensOn="Click" IsSticky="true" ShowTipPointer="false"> 

                             <SfButton Content="Tooltip 1" id="btn"></SfButton> 

              </SfTooltip> 

 

              <SfTooltip OnOpen="open1" @ref="@Tooltip" Target="#btn1" Content="Syncfusion" CssClass="user-info-tooltip" Position="Syncfusion.Blazor.Popups.Position.BottomRight" OpensOn="Click" ShowTipPointer="false"> 

                             <SfButton Content="Tooltip 2" id="btn1"></SfButton> 

              </SfTooltip> 

</div> 

@code { 

              public SfTooltip NotificationTooltip; 

              public SfTooltip Tooltip; 

 

              public void open(TooltipEventArgs args) 

              { 

                             Tooltip.CloseAsync(); 

              } 

              public void open1(TooltipEventArgs args) 

              { 

                             NotificationTooltip.CloseAsync(); 

              } 

} 

 

Refer to the sample: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Tooltip-577185636 

 

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

 

Regards, 

Sharon Sanchez S.