Radzen dialog window without the close [x] box

Radzen Studio Blazor Server
1

instead of allowing my users to close a modal dialog by selecting the close [x] box in the windows title bar (just beside the min max buttons), i would like them to click on my form specific Cancel button.

in my online search, i found something like this:

the accepted answer to that issue in the above link was this:

I found this to be a good solution

$("#myDialogID").dialog({
closeOnEscape: false,
beforeClose: function (event, ui) { return false; },
dialogClass: "noclose"
});
Not altering the existing styles, instead adding a new bit:

.noclose .ui-dialog-titlebar-close
{
display:none;
}
Adding the class ended up being quite an elegant method, as i'm "classing" the dialog as one that cannot be closed.

for radzen blazor, what might be the recommended approach?
i'm ok if i can just disable that [x]

thanks for helping

2

You can use the same approach for our dialog:

.ui-dialog-titlebar-close
{
    display: none;
}
3

it works!

i downloaded the radzen demo code:

in visual studio, i went to
LatestBlazor solution folder> wwwroot > css > site.css

and modified the first few lines to include the suggested css

a.ui-button:hover {
color: #fff;
text-decoration: none;
}

.ui-dialog-titlebar-close {
display: none;
}

is .ui-dialog-titlebar-close some sort of standard/well-known css class name with an agreed upon meaning? if so, could you recommend a reference link where i could find other such "well-known" css class names? i notice many such .ui-xxx... class names used in radzen and i've been wondering what convention(s) you use.

thank you again for helping!! :slight_smile:

4

Is there any way to do this with just the confirm dialogs (called by dialogService.Confirm)?

Thanks in advance for any help you can provide!

1 Like
5

After the CSS class renames in Radzen 3.0 this should now be:

.rz-dialog-titlebar-close
{
    display: none;
}
6

Hello Korchev
I am fairly new to this web programming.
It will be great if you can share a code snippet for dialogService.OpenAsync call.
Where to write this css class and how to pass it to the OpenAsync function call?

my code is:
dialogService.OpenAsync("Edit User",
new Dictionary<string, object?>() { { "isEditable", true }, { "newUser", null }, { "currentUser", user! } },
new DialogOptions() { Width = "80%", Height = "95%", Resizable = false, Draggable = false, CloseDialogOnEsc = false, ShowTitle = true });

Thanks

7

The CSS goes to your application css file - app.css, site.css or something similar.

8

Great

Worked like a charm. Much appreciated.

Thanks Korchev.