dialog as child component

Question

Hello,

I am trying to create a dialog component in blazor, but I think there is something I don't understand.

I have a button show dialog, that is suppose to display a message, but it doesn't work.

Can you help me ?

here is my child component

and here is my parent component:

thank you

Indrajith Srinivasan · Accepted Answer

Hi Psyk, Greetings from Syncfusion support, We have validated your reported query. If you, have rendered the SfDialog as an ChildComponent we suggest you to call the Blazor StateHasChanged() to detect the property changes in SfDialog. We have also prepared a sample using the shared code blocks, that tries to meet your requirements. Code blocks: ReusableDialog.razor @using Syncfusion.Blazor.Popups

@Header

@((MarkupString)Content) @code { SfDialog DialogObj; [Parameter] public string Header { get; set; } = ""; [Parameter] public string Content { get; set; } = ""; [Parameter] public bool Visible { get; set; } = false; [Parameter] public bool IsModal { get; set; } = true; public void Show(string title, string message) { this.Header = title; this.Content = message; Visible = true; this.StateHasChanged(); } private void OnOkClick() { Visible = false; } private void OnCancelClick() { Visible = false; } } Index.razor @code { [CascadingParameter] ReusableDialog Dialog { get; set; } public bool Visibility { get; set; } = false; public bool IsModal { get; set; } = true; private void ShowDialog() { this.Dialog.Show("rewr", "test"); } } Sample: https://www.syncfusion.com/downloads/support/forum/163650/ze/SfDialog_child1455865247 Please let us know if the solution helps, Regards, Indrajith

Joshua · Answer

Hi,I am also interested in this concept. From the sample given you expose Content as a string but could you elaborate on how to set the Content to be another Blazor Component please?

Buvana Sathasivam · Answer

Hi Joshua,Thank you for reaching out to us with your question about
cascading parameters in the attached sample. We understand that you're looking
for assistance in passing data across a component hierarchy.To achieve this in the provided sample, you can utilize the
"Show" method within the "ReusableDialog.razor" component.
By calling this method and passing the appropriate arguments for the title and
message, you can set the dialog content and make it visible. Here's an example
of how you can use the "Show" method:ReusableDialog.razor

public void Show(string title, string message)
      {
         
  this.Header = title;
         
  this.Content = message; // Here, set the dialog content
         
  Visible = true;
         
  this.StateHasChanged();
      }

In addition, please make sure to establish a cascading
parameter between the current component and the "ReusableDialog" component
by using the [CascadingParameter] attribute. With the cascading parameter set,
you can call the "Show" method to pass the dialog header and content
as arguments. Here's an example:Index.razor

@code {
      [CascadingParameter]
      ReusableDialog Dialog { get; set; }
   
      private void ShowDialog()
      {
         
  this.Dialog.Show("Header", "Content"); // Here, pass the dialog header and
  content as argument
      }
  }

Please refer the below page for more reference.https://learn.microsoft.com/en-us/aspnet/core/blazor/components/cascading-values-and-parameters?view=aspnetcore-7.0#pass-data-across-a-component-hierarchy
Regards,Buvana SAttachment: SfDialog_child1455865247_(2)_2bcd6b5e.zip

Bogdan · Answer

HiQuestion number 1Can you modify the above sample using the Mvvm pattern, preferably using the CommunityToolkit.Mvvm library.Question number 2Is it possible to obtain a feedback parameter from such an open dialogue (according to the assumptions from question no. 1). Let's say the user has to enter some text. I would like to send the entered text back to the ViewModel.Question number 3Is it possible to open the dialogue from ViewMdel?Is such a solution possible?If so, can I have a code sample please?RegardsBogdan

UdhayaKumar Duraisamy · Answer

You can refer
to the following Syncfusion blogs for more information regarding your
requirements:MVVM
Pattern in Blazor For State Management (syncfusion.com)How
to Create reusable Dialogs in Blazor ? (syncfusion.com)