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 main difference from the Window modal is the functionality for actions and predefined dialogs.

Telerik UI for Blazor Ninja image

The Dialog component is part of Telerik UI for Blazor, a professional grade UI library with 95+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day 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.

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
(Stretched)
Defines the layout of the actions button in the footer. See more in the Action Buttons article).
Class string Renders 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 Defines the CSS selector of the initially focused item on open. By default, it is the first focusable item in the dialog.
Height string Sets 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.
Title string Sets the Dialog title.
Visible bool Defines the Dialog visibility.
Width string Sets 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 Redraws the component.

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

See Also

In this article