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 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.

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.

Download Free Trial

Creating Blazor Dialog

1. Add the TelerikDialog tag to a Razor file.

2. Set the Visible parameter to a bool object. It supports one-way and two-way binding.

3. Set the Title property to a string object.

4. Set the Dialog content through the DialogContent RenderFragment parameter

5. (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";
}

Predefined Dialogs

Predefined Dialogs are styled substitutes to the standard browser dialogs - confirm, alert and prompt. Read more about the Blazor Predefined Dialogs.

Header

The Dialog allows header customization and gives the option to toggle the close button. Read more about the Dialog Header.

Action Buttons

The Dialog provides options for rendering action buttons and customizing their text and layout. Read more about the Dialog Action Buttons.

Events

The Blazor Dialog fires a VisibleChanged event to customize the application behavior and respond to user actions. Read more about the Blazor Dialog events.

Dialog Parameters

The Blazor Dialog provides various parameters to configure the component. Also check the Dialog public API.

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;
    }
}

Next Steps

• Customize the Dialog Header

• Customize the Dialog Action Buttons

• Explore the Predefined Dialogs

• Handle the Dialog Events

See Also

• Live Dialog Demos
• Dialog API Reference