close dialog with back button

[Indra]

how can i close dialog when user use back button? if user open dialog/modal and they push back button, they didnt close the dialog, but they back to before page.

I want to close dialog when user use back button. can i do that with syncfusion dialo? 

[Vinitha Jeyakumar]

Hi Indra,

Greetings from Syncfusion support,

Usually, the dialog will get closed only when we press Esc key. If you want to close the dialog on back button click, we need to achieve it using jsInterop functionality. please check the code below,

Code snippet:

index.razor

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

<SfDialog @ref="dlgObj" Width="250px" @bind-Visible="@IsVisible" ShowCloseIcon="true">

    <DialogEvents>

    </DialogEvents>

    <DialogTemplates>

        <Content> This is a modal dialog </Content>

    </DialogTemplates>

</SfDialog>

@code {

    SfDialog dlgObj;

    protected static bool IsVisible { get; set; } = false;

    private void OpenDialog()

    {

        dlgObj.ShowAsync();

    }

    [JSInvokable]

    public static void CSCallBackMethod()

    {

        IsVisible = false;

    }

}

Host.cshtml

<script>

            window.onbeforeunload = () => {

                DotNet.invokeMethodAsync('Dialog', 'CSCallBackMethod');

        }

    </script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dlg_BackCls-883967345

Regards,

Vinitha.

[Indra]

i tried implemented your code and it still going back, then i tried to open your example, and it still going back, not closing the modal

[Indra]

I tried implementing your code and it still going back, then I tried to open your example, and it still went back, not closing the modal

[Vinitha Jeyakumar]

Hi Indra,

Please ignore the previous update.

We want to let you know that when we try to move back to another page while the dialog is in open state, it will destroy the dialog component before routing to a page. So, we cannot close the dialog before moving to new page since the dialog component has got destroyed already.

Regards,

Vinitha