Dialog HtmlHelper Overview

The Telerik UI Dialog HtmlHelper for ASP.NET MVC 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 for jQuery Window where the most prominent difference is the added functionality for actions and predefined dialogs.

Basic Configuration

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.
  2. Create a new action method which renders the view.

    public ActionResult Index() { return View(); }

  3. Add a Dialog.

        <% Html.Kendo().Dialog()
            .Name("dialog") // The name of the Dialog is mandatory. It specifies the "id" attribute of the Dialog.
            .Title("Software Update")// Set the title of the Dialog.
            .Content("Do you agree terms and conditions?") // Define the content of the Dialog.
            .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.
            })
            .Render(); //Render the Dialog.
        %>
    
        @(Html.Kendo().Dialog()
            .Name("dialog") // The name of the Dialog is mandatory. It specifies the "id" attribute of the Dialog.
            .Title("Software Update")// Set the title of the Dialog.
            .Content("Do you agree terms and conditions?") // Define the content of the Dialog.
            .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.
            })
        )
    

Events

You can subscribe to all Dialog events. For a complete example on basic Dialog events, refer to the demo on using the events of the Dialog.

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

    <%: Html.Kendo().Dialog()
            .Name("dialog")
            .Events(e => e
                .Open("dialog_open")
                .Close("dialog_close")
        )
    %>
    <script>
        function dialog_open() {
            // Handle the open event.
        }

        function dialog_close() {
            // Handle the close event.
        }
    </script>
    @(Html.Kendo().Dialog()
        .Name("dialog")
        .Events(e => e
            .Open("dialog_open")
            .Close("dialog_close")
        )
    )
    <script>
        function dialog_open() {
            // Handle the open event.
        }

        function dialog_close() {
            // Handle the close event.
        }
    </script>

Referencing Existing Instances

To refer to an existing Kendo UI Dialog instance, use the jQuery.data() configuration option. Once a reference is established, use the Dialog client-side API to control its behavior.

// Place the following after the Dialog for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the Dialog is used to get its client-side instance.
        var dialog = $("#dialog").data("kendoDialog");
    });
</script>

See Also

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