Close Dialog box from a button in a component

[Luigi]

Hello,

Hai have this dialo with a camponent:

        <SfDialog Width="600px" IsModal="true" @bind-Visible="Visibility">

            <DialogTemplates>

                <Header> Questionario @TipoQuest </Header>

                <Content>

                    <Questionario lstdomandes="@Lstdomandes" lstRispostes="@Lstrispostes" OnFinishQuestionary="@PrelevoPunteggioQuestionario"></Questionario>

                </Content>

            </DialogTemplates>

            <DialogButtons>

                <DialogButton Content="OK" IsPrimary="true" OnClick="@DlgButtonClick" />

            </DialogButtons>

            <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>

            <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>

        </SfDialog>

When I click the button in component, I want to close the dialog, I dont want use a button standard dialog.

Thank

[Buvana Sathasivam]

Hi Luigi,

Greetings from Syncfusion support.

You should be able to achieve your requirement using the SfDialog Visible property set as false when inside the SfDialog button Click action. In the below sample, we have closed the dialog using the Visible property when we click the Dialog OK button. Please find the below code and sample for your reference.

<SfDialog Width="600px" IsModal="true" @bind-Visible="Visibility">

……………

 

            <DialogButtons>

 

                <DialogButton Content="OK" IsPrimary="true" OnClick="@DlgButtonClick" />

 

            </DialogButtons>

 

        </SfDialog>

 

        @code {

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

    private void DlgButtonClick(Object args)

    {

        this.Visibility = false; // To close the dialog

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDialog1534929589

Demo: https://blazor.syncfusion.com/demos/dialog/custom-dialogs?theme=fluent

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfDialog.html#Syncfusion_Blazor_Popups_SfDialog_Visible

Regards,

Buvana S

[Luigi]

Hi  Buvana Sathasivam,

Maybe I haven't explained myself well, I would like that with a button inside the Content of the dialog I can close the Dialog.

I don't want to close the dialog with the <DialogButtons> but with a custom button in my component.

My component is called <Questionario> and inside I have a button, from this button I would like to close the custom dialog.

<SfDialog Width="600px" IsModal="true" @bind-Visible="Visibility">

            <DialogTemplates>

                <Header> Questionario @TipoQuest </Header>

                <Content>

                    <Questionario lstdomandes="@Lstdomandes" lstRispostes="@Lstrispostes" OnFinishQuestionary="@PrelevoPunteggioQuestionario"></Questionario>

                </Content>

            </DialogTemplates>

            <DialogButtons>

                <DialogButton Content="OK" IsPrimary="true" OnClick="@DlgButtonClick" />

            </DialogButtons>

            <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>

            <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings>

        </SfDialog>

Thanks

[Buvana Sathasivam]

Hi Luigi,

Currently, we are validating your reported query. We will update you with further details on or before May 11, 2022.

Regards,

Buvana S

[Luigi]

ok Thank

[Revanth Krishnan]

Hi Lun,

Sorry for the inconvenience.

Still, we are validating your reported query. We will update you with further details on or before 13^th May 2022.

Regards,

Revanth

[Buvana Sathasivam]

Hi Luigi,

We have prepared a sample based on your requirements. In the below sample, we have created an SfDialogContent.razor page and rendered a button inside it. We have referred to this component page inside the SfDialog component on the Index.razor page.

We have invoked the parent component (Index.razor) callback method when we click the button in the SfDialogContent.razor page and close the dialog using the @bind-Visible property. Please find the below code and sample for your reference.

Index.razor

<SfDialog @bind-Visible="Visibility">

        <DialogTemplates>

            <Content>

                    <SfDialogContent OnDialogClose="OnDialogCloseHandler" />

            </Content>

        </DialogTemplates>

    </SfDialog>

 

 

@code{

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

    public void OnDialogCloseHandler(MouseEventArgs e) // Triggered method through child component button click action

    {

        this.Visibility = false; // Close the SfDialog

    }

}

SfDialogContent.razor

<button type="button" class="btn btn-success" @onclick="CloseDialog">Close SfDialog</button>

@code {

 

[Parameter]

public EventCallback<MouseEventArgs> OnDialogClose { get; set; }

public async Task CloseDialog(MouseEventArgs e)

{

    await OnDialogClose.InvokeAsync(e); // Invoke parent component page

}

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDialog488329441

Regards,

Buvana S

[Luigi]

Thamk working!!!

[Buvana Sathasivam]

Thanks for your update. Please let us know if you need any further assistance.

[Raheel Ahmed Khan Lodhi]

I am trying to Use Syncfusion Blazor Component. It works well when i using to close it by clicking cross button which is built-in. While i am trying to close the Dialog with my own Button from inside the content. I am using Project "Dialog-sample-1312696114.zip". Urgent Support would be appreciated.

[Buvana Sathasivam]

Hi Raheel,

Thanks for your update. You can achieve your requirement by adding the below code changes to your application. In the below sample, we have closed the dialog when dynamically changing the dialog visibile property when clicking the button.

Index.razor

@code {

    private void SignUpDialog()

    {

        this.DialogServices.DynamicDialog(new DialogOptions()

        {

            Header = "Sign Up",

            Content = @<SignUp OnDialogClose="OnDialogCloseHandler"/>,

            IsModal = true,

            ShowCloseIcon = true,

            IsVisible = true,

            FooterTemplate = @<button> Ok </button> // Fragments

        });

    }

    public void OnDialogCloseHandler(MouseEventArgs e)

    {

        this.DialogServices.DynamicDialog(new DialogOptions()

        {

            IsVisible = false,

        });

    }

}

SignUp.razor

<button class="e-btn" @onclick="@CloseDialog">Close Dialog</button>

 

@code {

   

[Parameter]

 

public EventCallback<MouseEventArgs> OnDialogClose { get; set; }

 

public async Task CloseDialog(MouseEventArgs e)

 

{

 

    await OnDialogClose.InvokeAsync(e); // Invoke parent component page

 

}

}

DialogComponent.razor

@if (RenderDialog)

{

    <SfDialog @bind-Visible="@Options.IsVisible">…..

    </SfDialog>

}

 

@code {

 

    protected override void OnInitialized()

    {

      

        DialogService.DialogInstance += (DialogOptions options) =>

        {

            InvokeAsync(() =>

            {

                  this.Options.IsVisible = options.IsVisible;

                   ………….

          });

        };

       

    }

}

Regards,

Buvana S

Attachment: Dialogsample1312696114_30167fdf.zip