ASP.NET Core Dialog Overview
The Dialog is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Dialog TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Dialog widget.
The Dialog is a modal popup that brings information to the user. It also enables the user to perform specific actions by using action buttons, for example, to enter data or choose between options. If needed, the Dialog can accommodate complex UI elements that require the focus of the user. The Dialog is a subtype of the Kendo UI for jQuery Window with the most prominent differences being the added actions and predefined dialogs.
Initializing the Dialog
In the most common use case, the Dialog opens as a result of a user action rather than of the load event of the page. To achieve this, you must initialize the widget as non-visible and open it when needed.
The following example demonstrates how to define the Dialog.
@(Html.Kendo().Dialog()
.Name("dialog") // The name of the Dialog is mandatory. It specifies the "id" attribute of the widget.
.Title("Software Update")// Set the title of the Dialog.
.Content("Do you agree terms and conditions?") // Define the content of the Dialog.
.Visible(false) // The widget will be initialized as invisible.
)
<kendo-dialog name="dialog1">
<content>Dialog contents</content>
</kendo-dialog>
Basic Configuration
The Dialog provides default configuration options that you can set during its initialization—height and width, custom action buttons, title, close buttons, animation effects, and so on.
The following example demonstrates a basic Dialog configuration.
@(Html.Kendo().Dialog()
.Name("dialog")
.Title("Software Update")
.Content("Do you agree terms and conditions?")
.Width(400) // Set the width of the Dialog.
.Modal(false) // Disable the modality of the Dialog.
.ButtonLayout("stretched") // Set a "stretched" layout for the action buttons.
.Actions(actions =>
{
actions.Add().Text("NO"); // Set text of the first button.
actions.Add().Text("YES").Primary(true); // Set text of the second button and define it as primary.
})
)
<script type="text/javascript">
$(function() {
// The Name() of the Dialog is used to get its client-side instance.
var dialog = $("#dialog").data("kendoDialog");
});
</script>
<kendo-dialog name="dialog" title="Software Update" modal="false" on-close="dialog_close">
<content>
<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>
</content>
<actions>
<action text="Skip this version">
</action>
<action text="Remind me later">
</action>
<action primary="true" text="Install update">
</action>
</actions>
</kendo-dialog>
Functionality and Features
- Custom action buttons—Adding action buttons to the Dialog allows you to interact with the user.
- Height and width—You can control the dimensions of the Dialog by setting its height and width. The default size of the Dialog depends on its content.
-
HTML structure and DOM placement—Regardless of where you initialize the UI component, the HTML code of the Dialog will be appended as a child of the document's
<body>element. - Accessibility—The Dialog is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
- Events—The Dialog emits a variety of events that allow you to implement custom functionality.
Next Steps
- Getting Started with the Dialog
Basic Usage of the Dialog HtmlHelper for ASP.NET Core (Demo)
- Dialog in Razor Pages