1. Home
  2. Forum
  3. Blazor
  4. How to build an awaitable Dialog like the MessageBox in WinForms

How to build an awaitable Dialog like the MessageBox in WinForms

Hi,
I have a Combobox, in this Combobox I have an onchange event which should show a Dialog by condition.
The Dialog has 2 buttons. One for "cancel" and one for "do something". 

How I can built it in this way, that I have for example a "Dialog.Show("")" method like the MessageBox.Show() in WinForms, which waits and returns the DialogResult of after the User interacts.
The current state is, that "ShowDialog" of the Dialog box does not wait for the user and the parent event is still fired.

Thanks

9 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team June 7, 2021 10:02 AM UTC

Hi DS, 
 
 
Greetings from Syncfusion support. 
 
 
We have validated your query “How to build an awaitable Dialog like the MessageBox in WinForms, The current state is, that "ShowDialog" of the Dialog box does not wait for the user and the parent event is still fired.” 
 
We have analyzed the reported issue and this issue occurred because by default, when the dialog is rendered, the dialog will be visible as the Visible property’s default value is true, and this can be resolved by setting the Visible property to false. We have prepared a sample for your reference that tried to meet your requirement, 
 
Code Snippet: 
<SfComboBox @ref="comboboxObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData"> 
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings> 
    <ComboBoxEvents TValue="string" TItem="Games" ValueChange="@comboboxChange"></ComboBoxEvents> 
</SfComboBox> 
 
<SfDialog @ref="dialogObj" Width="250px" ShowCloseIcon="true" Visible="false"> 
    . . . 
</SfDialog> 
 
@code { 
    SfComboBox<string, Games> comboboxObj; 
    SfDialog dialogObj; 
    . . . 
    public void comboboxChange(ChangeEventArgs<string, Games> args) 
    { 
        if (args.Value == "Game1" || args.Value == "Game2" || args.Value == "Game3") 
        { 
            this.dialogObj.Show(); 
        } 
    } 
 
    public void dialogOkFunction() 
    { 
        //Can write required functionalities 
    } 
    public void CloseDialog() 
    { 
        this.dialogObj.Hide(); 
    } 
} 
 
 
Please check the above code snippet and the sample and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


ZD ZMI Dev June 8, 2021 06:01 AM UTC

Thanks for your anwser, but this is not my described problem.
I need it in a way, where the event handler will "wait" for the action of the user.

For example, in the comboboxChange:

1. this.dialogObj.Show();  -> opens the dialog and waits!!! for the action of the user, the user decides "yes" or "no"
2. // do something -> here, 1 line after the "Show()", I can do something, because i need to possibly cancel the event with args.Cancel = true if the users says "yes"

Am i wrong, or how I can achieve this?


RK Revanth Krishnan Syncfusion Team June 9, 2021 10:40 AM UTC

Hi DS, 
 
 
Good day to you. 
 
 
We have further validated your query “Need to open the dialog for the user action after the dialog is shown I can do something because I need to possibly cancel the event with args.Cancel = true if the user says "yes". Am I wrong, or how I can achieve this?” 
 
You requirement to prevent the dialog show using the ‘args.Cancel’, when the user selects ‘yes’ can be done using the ‘OnOpen’ event of the dialog. We have modified the already shared sample for your reference, 
 
Code Snippet: 
<SfComboBox @ref="comboboxObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData"> 
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings> 
    <ComboBoxEvents TValue="string" TItem="Games" ValueChange="@comboboxChange"></ComboBoxEvents> 
</SfComboBox> 
 
<SfDialog @ref="dialogObj" Width="250px" ShowCloseIcon="true" Visible="false"> 
    <DialogTemplates> 
        <Header> Dialog Header </Header> 
        <Content> <p>User action confirmation.</p><p>Don't show this dialog again</p></Content> 
    </DialogTemplates> 
    <DialogButtons> 
        <DialogButton Content="Yes" IsPrimary="true" OnClick="@dialogOkFunction" /> 
        <DialogButton Content="No" OnClick="@CloseDialog" /> 
    </DialogButtons> 
    <DialogEvents OnOpen="@DialogOnOpen"></DialogEvents> 
</SfDialog> 
 
@code { 
    . . . 
    SfDialog dialogObj; 
    public bool userActionResult { get; set; } = false; 
    . . . 
    public void comboboxChange(ChangeEventArgs<string, Games> args) 
    { 
        this.dialogObj.Show(); 
    } 
    public void DialogOnOpen(Syncfusion.Blazor.Popups.BeforeOpenEventArgs args) 
    { 
        args.Cancel = this.userActionResult; 
    } 
    public void dialogOkFunction() 
    { 
        //Can write required functionalities 
        this.userActionResult = true; 
        this.dialogObj.Hide(); 
    } 
    public void CloseDialog() 
    { 
        this.userActionResult = false; 
        this.dialogObj.Hide(); 
    } 
} 
 
Note: Here the dialog will be opened on the combo box change and the dialog open will be prevent using ‘arg.Cancel’ based on the user action. 
 
 
Please check the above code snippet and the sample and let us know if it resolves the issue. 
 
Regards, 
Revanth 


ZD ZMI Dev June 11, 2021 12:43 PM UTC

Sorry, but this is also not what we needed.
We need the following (described by your example):
1. The site loads and the first entry was shown
2. now the user select the second entry in the combo box
3. the event should trigger the dialog which is shown now and asks the user if he is sure with his selection
4. in the same blink of an eye: the event "waits" until the user press the "yes" or "no" button
5. by "no", the combo box event should set "args.Cancel = true" and his selection will be reverted/canceled
6. the event is done and the selection was not done, because the user doesn't want an interaction
Maybe its possible that an event is the correct thing to accomplish that, but how can we achieve this?

RK Revanth Krishnan Syncfusion Team June 14, 2021 09:24 AM UTC

Hi DS, 
 
 
We have further validated your query “To open the dialog when the combo box value is selected and if clicked yes the value should be accepted if clicked no the value should be reverted.” 
 
Your requirement can be achieved by following the below steps, 
  • Bind the ‘Opened’ event of the combo box to find and store the value before the user selects any new value.
  • Then bind the ‘ValueChange’ event of the combo box to open the dialog.
  • In the ‘yes’ dialog button click event, the dialog can just be closed.
  • In the ‘no’ dialog button click event, the previously stored value can be assigned to the combo box value.
 
We have prepared a sample for your reference, 
 
Code Snippet: 
<SfComboBox @ref="comboboxObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData"> 
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings> 
    <ComboBoxEvents TValue="string" TItem="Games" Opened="@PopupOpen" ValueChange="@comboboxChange"></ComboBoxEvents> 
</SfComboBox> 
 
<SfDialog @ref="dialogObj" Width="250px" Visible="false"> 
    . . .  
    <DialogButtons> 
        <DialogButton Content="Yes" IsPrimary="true" OnClick="@dialogOkFunction" /> 
        <DialogButton Content="No" OnClick="@CloseDialog" /> 
    </DialogButtons> 
</SfDialog> 
 
@code { 
    SfComboBox<string, Games> comboboxObj; 
    SfDialog dialogObj; 
    public string CurrentValue { get; set; } 
    public string dialogContent { get; set; } 
    . . . 
    public void PopupOpen(PopupEventArgs args) 
    { 
        //To store the current combo box value before the user selects any value. 
        this.CurrentValue = this.comboboxObj.Value; 
    } 
 
    public void comboboxChange(ChangeEventArgs<string, Games> args) 
    { 
        // To check condition if the value selected is not the same value. 
        if (args.Value != this.CurrentValue) 
        { 
            this.dialogContent = "Are you sure you want to select the value: " + args.ItemData.Text; 
            this.dialogObj.Show();  
        } 
 
    } 
    public void dialogOkFunction() 
    { 
        this.dialogObj.Hide(); 
    } 
    public void CloseDialog() 
    { 
        // The previous value is restored as the no button is clicked. 
        this.comboboxObj.Value = this.CurrentValue; 
        this.dialogObj.Hide(); 
    } 
} 
  
 
Please check the above code snippet and the sample and let us know if it comes close to meet your requirement. 
 
Regards, 
Revanth 


ZD ZMI Dev June 15, 2021 10:41 AM UTC

Sorry, this is also not the solution. The important thing, that "the event is waiting for user interaction", is missing.
But we found a good solution:

here is the exact problem with good examples:
https://stackoverflow.com/questions/67664279/blazor-howto-looking-for-winform-messagebox-alike-function

this code was the key:
https://blazorrepl.com/repl/wbkfwIYf37sCrDts17

you can implement that easy in a custom control for your syncfusion blazor combobox

SN Sevvandhi Nagulan Syncfusion Team June 16, 2021 11:21 AM UTC

Hi DS, 


We checked your query. The events cannot wait until the execution of confirmation dialog functionalities. So, we can achieve the requested requirement using HTML alert box. The alert confirmation will wait for the result of Ok and cancel and blocks the further execution. Please refer the below code and modified sample. 


<SfComboBox @ref="comboboxObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData"> 
    <ComboBoxFieldSettings Value="ID" Text="Text"></ComboBoxFieldSettings> 
    <ComboBoxEvents TValue="string" TItem="Games" OnValueSelect="onSelect" Closed="onClose"></ComboBoxEvents> 
</SfComboBox> 
 
 
public async Task onSelect(SelectEventArgs<Games> args) 
    { 
        confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Are you sure"); // Alert 
        if (!confirmed) 
        { 
            args.Cancel = true; 
        } 
    } 
 
 
Please find the sample below. 


Kindly get back to us for further assistance. 

Regards, 
Sevvandhi N 


Marked as answer
PA Patrick December 28, 2022 02:58 PM UTC

Can I use SfDialog like  JsRuntime.InvokeAsync "confirm" dialog?

   confirmed = await JsRuntime.InvokeAsync<bool>("confirm", "Are you sure"); // Alert 

I would like to use SfDialog Yes or No to wait process


VJ Vinitha Jeyakumar Syncfusion Team December 30, 2022 07:32 AM UTC

Hi Patrick,

You can use the predefined dialog component for your requirement which is used to render the Alert, Confirm, and Prompt dialogs with minimal code. The alert, confirm, and prompt dialogs are shown using DialogServices. Please check the below documentation and demos for your reference,

Demos: https://blazor.syncfusion.com/demos/predefined-dialogs/default-functionalities?theme=fluent

Documentation: https://blazor.syncfusion.com/documentation/predefined-dialogs/getting-started

Regards,
Vinitha


Loader.
Up arrow icon