Opening dialog on button click

Question

I have a dialog implemented in a razor file (NewProductDialog.razor) like this:

Software Update

Your current software version is up to date.

@code { bool IsOpen { get; set; } public void OpenDialog() { IsOpen = true; }Then in another razor file (Index.razor I have a button with the following method: void ShowNewProductDialog() { var dialog = new NewProductDialog(); dialog.OpenDialog(); }The method returns but the modal dialog is not shown. I tried adding Target="#" but that didn't work either.I don't want to pollute my Index.razor file with a bunch of markup and callback methods.All of the documentation I have seen so far always have the and the button click to open it in the same file.

Indrajith Srinivasan · Accepted Answer

Hi Philipp,

Greetings from Syncfusion support,

We have validated your reported queries.

Query 1: “The method returns but the modal dialog is not shown”

When dynamically update to the Visible property, it doesn’t affect the SfDialog. So, the reported issue occurs. We need to call the StateHasChanged() next to property changes to affect the changes to the SfDialog when called from another page. We have also prepared a sample using the shared SfDialog code blocks, which meets your requirements.

Sample: https://www.syncfusion.com/downloads/support/forum/160761/ze/SfDialog_Reusable266035819

Query 2: “ I tried adding Target="#" but that didn't work either.”

The issue with opening SfDialog is not related to the Target specified. In addition, define only valid elements for the SfDialog Target (the elements must be present in DOM). Check the above-shared sample for reference.

<SfDialog Target="#DialogTarget" />

</div>

Query 3: “All of the documentation I have seen so far always have the <SfDialog> and the button click to open it in the same file.”

Yes, we have also considered to include the documentation for the Reusable Dialog from our end.

Regards,

Indrajith

Query 3: “All of the documentation I have seen so far always have the and the button click to open it in the same file.” Yes, we have also considered to include the documentation for the Reusable Dialog from our end. Regards, Indrajith

Philipp H Schmid · Answer

Thank you for your response. Adding the call to StateHasChanged() did result in the desired behavior.

Note that in order for the dialog to truly be a modal dialog (across the entire application window) the Target should be #app (or whatever your outermost div id is).

Indrajith Srinivasan · Answer

Hi Philipp, 
 
Good day to you, 
 
Query 1: 
 
We are glad that your reported issue is resolved. Please get back to us if you need any further assistance. 
 
Query 2: 
 
Yes, We considered <body> as a target when the Target property is not specified for modal SfDialog, So it occupies the entire application. If you want to raise modal to the particular target element, the Target property can be used, which accepts any elements present in DOM with id(#) or CSS class. 
 
Regards, 
Indrajith

Michael Ofori-Appiah · Answer

How do I return a value from the NewProductDialog.razor component to the Index.razor file after closing the dialog box?

Indrajith Srinivasan · Answer

Hi Michael, 
 
Greetings from syncfusion support, 
 
We have validated your reported query. You can return values from one razor page to another page, by initializing the particular page instance (Index.razor) as an object in the (NewProductDialog.razor) page and passing the necessary details. Check the below shared code blocks and sample for reference. 
 
Index.razor 
 




 
@code { 
   public void ReturnValue(string value) 
    { 
        if (value == "Ok Clicked") 
        { 
            // your code execution 
        } 
        else 
        { 
            // your code execution 
        } 
    } 
} 
 
ReusableDialog.razor 
 




 
@code { 
  public Index IndexPage = new Index(); 
 
  private void OkClick() 
    { 
        IsOpen = false; 
        this.StateHasChanged(); 
        this.IsClosed = "Ok Clicked"; 
        IndexPage.ReturnValue(this.IsClosed); 
    } 
} 
 
In the below sample, have returned the button click action of the SfDialog buttons 
 
Sample: https://www.syncfusion.com/downloads/support/forum/160761/ze/SfDialog_return_value-2024296785 
 
Can you please check the above sample and let us know if it meets your requirements ? 
 
Regards, 
Indrajith