Edit this page

Dialog HtmlHelper Overview

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

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI Dialog.

  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.

    Example
        public ActionResult Index()
        {
            return View();
        }
    
  3. Add a Dialog.

    Example
    
            <% 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.
                  .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 widget.
                  .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.
                    })
            )
    

Event Handling

You can subscribe to all Dialog events.

By Handler Name

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

Example

        <%: 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>

Reference

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 API to control its behavior.

Example
    //Put this after your Kendo UI Dialog for ASP.NET MVC declaration.
    <script>
    $(function() {
        //Notice that the Name() of the Dialog is used to get its client-side instance.
        var dialog = $("#dialog").data("kendoDialog");
    });
    </script>

See Also