We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignA modern eSignature application with affordable pricing. Sign up today for unlimited document usage!
I'm surprised this isn't the default behavior -- and that there are no apparent forum posts about it.
I want my code to display a dialog and wait for it to close before continuing the code processing.
Here's a contrived example.
dialogVisible = true
Dialog offers a Yes/No choice
User clicks one of the buttons
Code displays, "You clicked {button}".
I know I could just place the continuation code in the button click events, but I have reasons for not wanting to do that.
To me, "modal" means all processing stops until the modal dialog is closed.
I'm placing custom content in the dialogs -- in some cases, they fill in a small form -- so I don't think I can use the predefined dialogs. No?
I came up with a workaround which feel really clunky, but it works.
I set the dialog's visibility to true and run an await.Delay(25) in a loop while visibility is still true.
Feels like there should be a clean way to have functionality like the predefined dialogs while being able to add any custom content inside it.
Intuitively, setting IsModal to true, feels like it should block code until the modal is closed.
}
How much customization can we do? Height? Width? Could we put a carousel in it? A List?
Awesome!
I've never seen child content set up via code, before.
What if I wanted to have a custom component as child content and that component needed to pass parameters, including, maybe an event callback.
Or what if I had a form as child content? And it had a submit button? How would that work in a dialog?
Is that possible?
If so, any chance you could show an example of that?
Thanks for letting me know. Looking forward to seeing what you come up with!
| <SfDialog Width="250px" @ref="dialogObj" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible"> <DialogTemplates> <Header> Dialog </Header> <Content> This is a Dialog with button and primary button </Content> </DialogTemplates> <DialogButtons> <DialogButton Content="OK" IsPrimary="true" OnClick="@OkClick" /> <DialogButton Content="Cancel" OnClick="@CancelClick" /> </DialogButtons> <DialogEvents OnClose="DialogClose"></DialogEvents> </SfDialog> <span id="message">@ClickStatus</span> @code { SfDialog dialogObj; private bool IsVisible { get; set; } = false; private string ClickStatus { get; set; } private bool IsConfirm { get; set; } = false; internal List<TaskCompletionSource<dynamic>> tasks = new List<TaskCompletionSource<dynamic>>(); public async Task<bool> ConfirmAsync() { return await OpenAsync(); } public Task<dynamic> OpenAsync(){ TaskCompletionSource<dynamic> task = new TaskCompletionSource<dynamic>(); tasks.Add(task); Open().ConfigureAwait(false); return task.Task; } public async Task Open() { this.IsVisible = true; await InvokeAsync(() => { StateHasChanged(); }); } public void DialogClose() { TaskCompletionSource<dynamic> task = tasks.LastOrDefault(); if (task != null && task.Task != null && !task.Task.IsCompleted) { tasks.Remove(task); task.SetResult(true); } } private async Task OpenDialog() { bool isConfirm = await this.ConfirmAsync(); //The below code will not execute and wait till the dialog to close // if(this.IsConfirm) { this.ClickStatus = "User clicked Ok"; } else { this.ClickStatus = "User clicked Cancel"; } } private void CancelClick() { this.IsVisible = false; } private void OkClick() { this.IsConfirm = true; this.IsVisible = false; } } |
Note: Instead of using Predefined Dialog, the above solution will help you to achieve your requirements like using a Form or child component inside the Dialog control.
