How do I retrieve User iinputs and synchronise a modal Dialog from another page

[Artilizansa]

Dear Support Team,

I got a modal Dialog Component that I call (show) from another Component. Something similar to your ReusableDialog.razor sample. How do I block the calling method until the modal Dialog is closed (Cancel or OK). And how do I retrieve the User inputs from the Dialog. Here below a pseudo_code.

Thank you in advance.

ReusableDialog.razor

<SfDialog @ref="DialogObj" @bind-Visible="@IsVisible" ShowCloseIcon="true" Header="@Header" Content="@Content" IsModal="true" Width="250px">

<DialogButtons>

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

<DialogButton Content="Cancel" OnClick="@OnCancel" />

</DialogButtons>

</SfDialog>

@code {

SfDialog DialogObj;

public string Header { get; set; } = "Dialog Header";

public string Content { get; set; } = "Dialog Content";

public bool IsVisible { get; set; } = false;

public string userResponse = "No";

public async Task OpenDialog()

{

this.IsVisible = true;

await InvokeAsync(() => StateHasChanged()).ConfigureAwait(false);

}

public void OnOK()

{

userResponse = "Yes";

CloseDialog();

}

public void OnCancel()

{

userResponse = "Yes";

CloseDialog();

}

public void CloseDialog()

{

this.IsVisible = false;

this.StateHasChanged();

}

Index.razor

<SfButton @onclick="@clicked" Content="Open Dialog"></SfButton>

<ReusableDialog @ref="Modal" />

@code {

ReusableDialog Modal;

private async Task clicked()

{

await Modal.OpenDialog();

// I want this instruction blocked until Dialog is closed (OK or Cancel)

if(Modal.userResponse == "Yes")

{

// Process this User Response

}

}

}

[Indrajith Srinivasan]

Hi Artilizansa,

Greetings from Syncfusion support,

We have checked the shared code blocks. You can’t wait in a function call until the dialog is being closed. You can achieve your requirement, using the SfDialog Closed event to call a function after it is closed by passing the necessary user actions. Check the below shared sample for reference.

Index.razor

 

<button @onclick="@clicked" >Open Dialog</button>

 

<ReusableDialog @ref="Modal" />

 

@code {

 

    ReusableDialog Modal;

 

    private async Task clicked()

 

    {

 

        await Modal.OpenDialog();

 

        // I want this instruction blocked until Dialog is closed (OK or Cancel)

 

 

 

    }

 

    public async Task dialogClosed(string userResponse)

    {

        if (userResponse == "Yes")

 

        {

 

            // Process this User Response

 

        }

    }

 

}

ReusableDialog.razor

 

@using Syncfusion.Blazor.Popups

 

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

    <DialogEvents Closed="@Closed"></DialogEvents>

 

    <DialogButtons>

 

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

 

        <DialogButton Content="Cancel" OnClick="@OnCancel" />

 

    </DialogButtons>

 

</SfDialog>

 

@code {

 

    public string Header { get; set; } = "Dialog Header";

 

    public string Content { get; set; } = "Dialog Content";

 

    public bool IsVisible { get; set; } = false;

 

    public string userResponse = "No";

    Index mainPageObj = new Index();

 

 

 

    public async Task OpenDialog()

 

    {

 

        this.IsVisible = true;

 

        await InvokeAsync(() => StateHasChanged()).ConfigureAwait(false);

 

    }

 

    public async Task Closed()

    {

       await mainPageObj.dialogClosed(userResponse);

    }

 

 

 

    public void OnOK()

 

    {

 

        userResponse = "OnOkYes";

 

        CloseDialog();

 

    }

 

 

 

    public void OnCancel()

 

    {

 

        userResponse = "OnCancelYes";

 

        CloseDialog();

 

    }

 

 

 

    public void CloseDialog()

 

    {

 

        this.IsVisible = false;

 

        this.StateHasChanged();

 

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDialog_sample_modified-106638025

Please let us know if the solution helps,

Regards,

Indrajith

[Artilizansa]

Hello Support Team,

Thank you for proposed solution. I will make a try.

Artilizansa.

[Prince Oliver]

Most welcome, please get back to us, if you need any further assistance. 

[Szoke]

What could be a good solution if I want to call this dialog component modally from several different components?

Awaiting your reply!

[Buvana Sathasivam]

Hi Szoke,

Your requirement can be achieved by creating a reusable dialog as a service. Please follow the below steps to configure the reusable dialog,

1. Create folder Components in the root folder
2. Add DialogOptions.cs class file and add below codes (If require more SfDialog properties, add and configure in DialogComponent)

using Microsoft.AspNetCore.Components; 

 

namespace Blazor_Dialog_Service.Components 

{ 

    public class DialogOptions 

    { 

        public string Header { get; set; } 

        public RenderFragment Content { get; set; } 

        public RenderFragment FooterTemplate { get; set; } 

        public bool IsModal { get; set; } 

        public bool ShowCloseIcon { get; set; } 

    } 

} 

3. Add DialogService.cs class file and add below codes

using System; 

using Microsoft.AspNetCore.Components; 

 

namespace Blazor_Dialog_Service.Components 

{ 

    public class DialogService 

    { 

        public event Action<DialogOptions> DialogInstance; 

 

        public void Open(DialogOptions options) 

        { 

            // Invoke DialogComponent to update and show the dialog with options 

            this.DialogInstance.Invoke(options); 

        } 

    } 

} 

4. Add DialogComponent.razor file and add below codes

@using Syncfusion.Blazor.Popups;

 

@if (RenderDialog)

{

    <SfDialog @ref="dialogObj" IsModal="@Options.IsModal" Width="200px" ShowCloseIcon="@Options.ShowCloseIcon" @bind-Visible="@Visibility">

        <DialogTemplates>

            <Content> @Options.Content </Content>

            <FooterTemplate><button class="e-btn" @onclick="alertDialog"> OK </button></FooterTemplate>

        </DialogTemplates>

        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>

    </SfDialog>

}

 

@code {

    [Inject]

    public DialogService DialogService { get; set; }

    SfDialog dialogObj;

    private bool RenderDialog { get; set; } = false;

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

    private string Xvalue = "center";

    private string Yvalue = "top";

 

    // Parameter

    private DialogOptions Options = new DialogOptions();

 

    protected override void OnInitialized()

    {

        // Update the parameter in local variable and render the dialog

        DialogService.DialogInstance += (DialogOptions options) =>

        {

            InvokeAsync(() =>

            {

                this.Options.Header = options.Header;

                this.Options.Content = options.Content;

                this.Options.IsModal = options.IsModal;

                this.Options.ShowCloseIcon = options.ShowCloseIcon;

                this.Options.FooterTemplate = options.FooterTemplate;

                this.RenderDialog = true;

                this.Visibility = true;

                this.StateHasChanged();

            });

        };

    }

    public async Task alertDialog()

    {

        await this.dialogObj.HideAsync();

    }

}

5. Register the DialogService in the StartUp.cs file as below

using Blazor_Dialog_Service.Components; 

 

namespace Blazor_Dialog_Service 

{ 

    public class Startup 

    { 

        . . . 

        public void ConfigureServices(IServiceCollection services) 

        { 

            services.AddRazorPages(); 

            services.AddServerSideBlazor(); 

            services.AddSingleton<WeatherForecastService>(); 

            services.AddSingleton<DialogService>(); 

            services.AddSyncfusionBlazor(); 

        } 

        . . . 

     } 

} 

6. Initialize the DialogComponent, end of the MainLayout.razor file for update the instance in DialogService

@using Blazor_Dialog_Service.Components 

 

. . . 

. . . 

<DialogComponent /> 

7. The inject DialogService and using the dialog component by calling the ‘DialogService.Open’ with the parameters anywhere in the code.

@using Blazor_Dialog_Service.Components

 

@inject DialogService DialogServices

 

<button class="e-btn" @onclick="@showDialog"> Show Dialog </button>

 

@code {

    private void showDialog()

    {

        this.DialogServices.Open(new DialogOptions()

        {

            Content =@<b>Alert</b>, // Fragment loaded from external component

        });

    }

   

}

We have also prepared a sample for your reference, 

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Dialog_Service-1352529464

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

Regards,

Buvana S

[Szoke]

Dear Buvana!

Thanks for your response !

I would dig even deeper into the problem:

We have a page where the tabs have different Sql view (server side filter)  data  source grids:

Clicking on the link will open the same editing window (dialog/modal)  from each grid, and the data for that grid should be updated after editing / saving.

We should implement this operation on a Blazor basis.

We have a lot of objects with this structure.

What could be the best solution?

Thank you for taking the time!

[Buvana Sathasivam]

Hi Szoke,

Currently, we are validating your reported query. We will update you with further details in two business days.

Until then we appreciate your patience.

Regards,

Buvana S

[Buvana Sathasivam]

Hi Szoke,

You should be able to achieve your requirement by using the SfGrid component. By default, the SfGrid component supports dialog editing and can be rendered into grid rows based on datasource. When you double-click the grid rows, it opens up the dialog with the corresponding data, and it will save the modified dialog content data to the grid rows when you click the save button. Please find the below demo link for your reference.

Demo: https://blazor.syncfusion.com/demos/datagrid/dialog-editing?theme=fluent

Documentation: https://blazor.syncfusion.com/documentation/datagrid/dialog-editing

Please let us know if the above demo meets your requirements or not. If not, can you please share more information about your requirements?

Regards,

Buvana S