Blazor dialog always open

Hi!

Blazor dialog automatically openes and cannot be closed. See example: https://github.com/kristof12345/ChartsDemo/tree/a8a1e725c23ecd2be02c99ff25599341f06f6ad0

Thanks for the help!

3 Replies 1 reply marked as answer

RK Revanth Krishnan Syncfusion Team March 3, 2021 06:09 AM UTC

Hi Kristóf, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “Blazor dialog automatically opens and cannot be closed.” 
 
The dialog open can be prevented using the ‘Visible’ property. As it is a two-way binding property, it needs to be used as “@bind-Visible” and set to false to prevent the opening of the dialog. 
 
And the dialog can be closed using the close icon by enabling the “ShowCloseIcon” property to true. Also, the dialog can be closed by clicking outside the dialog. For this first enable the “IsModal” property to true and then the “@bind-Visible” property can be set as false in the “OnOverlayClick” event. We have modified the shared sample for your reference, 
 
Code Snippet: 
 
<SfDialog Width="1000px" @bind-Visible="@IsOpen" IsModal="true" ShowCloseIcon="true" > 
    <DialogEvents OnOverlayClick=@OnOverlayclick /> 
    <DialogAnimationSettings Effect=@DialogEffect.Zoom Duration=400 Delay=0 /> 
    <DialogTemplates> 
        <Header> 
            <h3>@Title</h3> 
        </Header> 
        <Content> 
            @ChildContent 
        </Content> 
    </DialogTemplates> 
</SfDialog> 
 
@code 
{ 
 
    [Parameter] 
    public bool IsOpen { get; set; } = false; 
 
    private void OnOverlayclick() 
    { 
        this.IsOpen = false; 
    } 
} 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


Marked as answer

KR Kristof March 3, 2021 08:17 AM UTC

Thank you! It was my mistake, I used "IsVisible" instead of "Visible".


RK Revanth Krishnan Syncfusion Team March 4, 2021 03:35 AM UTC

Hi Kristóf, 
 
Thanks for the update. 
 
We are glad that the provided solution satisfies your requirement, please let us know if you need any further assistance. 
 
Regards, 
Revanth 


Loader.
Up arrow icon