Blazor Dialog Overview

The Blazor Dialog component is a modal popup that brings information to the user. It provides actions through its action buttons to prompt the user for input or to ask for a decision. The component can also contain more complex UI elements that require the attention of the user.

The Dialog component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The Dialog component and its predefined options aim to deliver user experience similar to default browser dialogs. For more functionalities such as drag and resize, use the Window component.

Creating Blazor Dialog

Add the TelerikDialog tag to a Razor file.
Set the Visible parameter to a bool object. It supports one-way and two-way binding.
Set the Title property to a string object.
Set the Dialog content through the DialogContent RenderFragment parameter
(optional) Configure the DialogButtons inside the TelerikDialog tag.

A basic configuration of the Telerik Dialog.

@* An example of the Dialog basic implementation. *@

<TelerikDialog @bind-Visible="@Visible"
               Title="@Title">
    <DialogContent>
        A new version of <strong>Telerik UI for Blazor</strong> is available. Would you like to download and install it now?
    </DialogContent>
    <DialogButtons>
        <TelerikButton OnClick="@(() => { Visible = false; })">Skip this version</TelerikButton>
        <TelerikButton OnClick="@(() => { Visible = false; })">Remind me later</TelerikButton>
        <TelerikButton OnClick="@(() => { Visible = false; })" ThemeColor="primary">Install update</TelerikButton>
    </DialogButtons>
</TelerikDialog>

@code {
    private bool Visible { get; set; } = true;
    private string Title { get; set; } = "Software Update";
}

Parameter	Type and Default Value	Description
`ButtonsLayout`	`DialogButtonsLayout` enum (`Stretch`)	The layout of the actions button in the footer. See more in the Action Buttons article).
`Class`	`string`	A custom CSS class to the `<div class="k-window k-dialog">` element.
`CloseOnOverlayClick`	`bool`	Defines if clicking on the modal overlay should close the Dialog.
`FocusedElementSelector`	`string`	The CSS selector of the initially focused item on open. By default, it is the first focusable item in the Dialog.
`Height`	`string`	The height of the Dialog in any supported CSS unit.
`ShowCloseButton`	`bool` (`true`)	Defines if the component will render a Close button in the titlebar. See more in the Header article.
`ThemeColor`	`string`	A predefined color scheme for the Dialog, especially the titlebar. Use the available members of the static class `ThemeConstants.Dialog.ThemeColor`.
`Title`	`string`	The Dialog title.
`Visible`	`bool`	Defines the Dialog visibility.
`Width`	`string`	The width of the Dialog in any supported CSS unit.

Dialog Reference and Methods

The Dialog methods are accessible through its reference.

Method	Description
`Refresh`	Re-renders the Dialog. The Dialog is rendered as a child of the `TelerikRootComponent`, instead of where it is declared. As a result, it doesn't automatically refresh when its content is updated. In such cases, the `Refresh` method comes in handy to ensure that the Dialog content is up-to-date.

Get a reference to the Dialog and use its methods.

@* This code snippet showcases an example usage of the Refresh() method. *@

<TelerikButton  OnClick="OpenDialog">Open Dialog</TelerikButton>

<TelerikDialog @ref="DialogRef" @bind-Visible="_dialogVisible">
    <DialogContent>
        <p role="status">Current count: @_currentCount</p>
    </DialogContent>
    <DialogButtons>
        <TelerikButton OnClick="IncrementCount">Increment Count</TelerikButton>
        <TelerikButton OnClick="@(() => { _dialogVisible = false; })">Close</TelerikButton>
    </DialogButtons>
</TelerikDialog>

@code {
    TelerikDialog DialogRef;

    private bool _dialogVisible;

    private int _currentCount = 0;

    private void IncrementCount()
    {
        _currentCount++;

        DialogRef.Refresh(); //Need refresh to reflect the change here.
    }

    private void OpenDialog()
    {
        _dialogVisible = true;
    }
}

Blazor Dialog Overview

Creating Blazor Dialog

Predefined Dialogs

Header

Action Buttons

Events

Dialog Parameters

Dialog Reference and Methods

Next Steps

See Also