Select theme:

Material 3

Dialoglink

This article demonstrates how to use the Dialog component. Check also the component guide and API reference.

  1. Register <RadzenDialog /> in your application main layout. image
  2. Register DialogService in your application Startup or Program. image
  3. Inject DialogService in your page. image
  4. Execute Open<T>() or OpenAsync<T>() method of the dialog service with desired page/component type as generic argument. Optionally you can provide dialog parameters, options, etc. image

Blazor declarationlink

@inject DialogService dialogService
...
<RadzenButton Text=@($"Show OrderID: {orderID} details") Click="@(args => dialogService.Open<DialogCardPage>($"Order {orderID}",
                        new Dictionary<string, object>() { { "OrderID", orderID } },
                        new DialogOptions(){ Width = "700px", Height = "530px", Left = "calc(50% - 350px)", Top = "calc(50% - 265px)" }))" />

In this article —
© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3