Demos About Pricing Try now
Edit this page

Dialog HtmlHelper Overview

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

Configuration

  1. 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.
            })
    )

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(e) {
            //Handle the open event.
        }

        function dialog_close(e) {
            //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 Core 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