Use DialogService for Multi Document Interface

Radzen.Blazor Components
1

Hello,

In my app I have post render JS to remove the overlay mask, allow pointer events and make the dialog draggable using InteractJS.
So I basiclly have a Multi Documenent Interface with two dialogs open.
The problem is that when I close the first dialog, the most recent (second) dialog closes, I want the close button to close the dialog it's apart of and not close the topmost or most recent dialog.

Here is my app that demonstrates the issue

Two dialogs
Two dialogs1082×894

And I have a mobile version of my app and a related issue

Two dialogs on mobile
Two dialogs on mobile471×836

I think this multi-dialog scenario could be a good feature for you to add to your component library.

2

The Radzen dialog is modal by design. This is why it behaves the way you describe. Maybe in the future we will make this optional.

3

Yes I know I'm using it in a way that wasn't designed, but it's needed for my app so I will continue to find a way.

I also think it might be good idea if you had something like Lifecycle for your Dialogs:

class MyDialig: IDialog
{
    override OnClose(DialogCloseArgs e)
    {
        if (!MyValidateMethodOrSomething())
        {
            e.PreventClose(); // Or e.Cancel = true;
        }
    }
}
4

I managed to come up with a work-arround to do this using JavaScript:
I have two dialogs, the Animation (topmost) and Style, I check if both open and hide the later:

let stylePanel = $("#action-style-panel");
let animationEditor = $("#animation-editor");
if ((stylePanel && stylePanel.length > 0) &&
    (animationEditor && animationEditor.length > 0)) {
  let styleDialog = stylePanel.closest(".ui-dialog");
  let close = styleDialog.find(".pi.pi-times");
  close.on("click", (e) => {
    styleDialog.hide();
    e.stopImmediatePropagation();
  })
}

Then before I use DialogService to open the style dialog, each time I check if it is hidden:

export var isStyleHidden = () => {
    let stylePanel = $("#action-style-panel");
    let dialog = stylePanel.closest(".ui-dialog");
    if (dialog.css("display") == "none") {
        dialog.show();
        return true;
    } else {
        return false;
    }
}

I would recomend you to look into MDI support for your dialogs, it would be a unique feature and make you stand out from your competitors.
Just to also mention that O am using Golden Layout which is kind of a MDI thing and works well with Blazor. :wink: