Dialog HtmlHelper Overview

The Dialog HtmlHelper extension is a server-side wrapper for the Kendo UI Dialog widget.

The Dialog is a modal popup that brings information to the user. It also 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 focus of the user. The Dialog is a subset of the Kendo UI Window widget where the most prominent difference is the added functionality for actions and predefined dialogs.

Basic Usage

Usually, a Dialog is opened as a result of a user action rather than of the load event of the page. The Dialog JavaScript API provides methods for handling such scenarios. Basically, the widget can be initialized as non-visible and can be opened when needed.

The following example demonstrates how to define the Dialog by using the Dialog HtmlHelper.

    .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


The Dialog provides default configuration options that can be set during initialization.

Some of the properties that can be overridden and controlled are:

The following example demonstrates a basic configuration of the Dialog HtmlHelper and how to get the Dialog instance.

    .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() {
        //Notice that the Name() of the Dialog is used to get its client-side instance.
        var dialog = $("#dialog").data("kendoDialog");

Event Handling

You can subscribe to all Dialog events.

The following example demonstrates how to subscribe to events by a handler name.

        .Events(e => e
        function onInitOpen(e) {
            //Handle the InitOpen event.

        function onOpen(e) {
            //Handle the open event.

        function onClose(e) {
            //Handle the close event.

        function onShow(e) {
            //Handle the show event.

        function onHide(e) {
            //Handle the hide event.

See Also

In this article
Not finding the help you need? Improve this article