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.

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.
    .Visible(false) //The widget will be initialized as invisible
)

Configuration

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.

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

Event Handling

You can subscribe to all Dialog events.

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

Example
    @(Html.Kendo().Dialog()
        .Name("dialog")
        .Events(e => e
            .InitOpen("onInitOpen")
            .Open("dialog_open")
            .Close("dialog_close")
            .Show("onShow")
            .Hide("onHide")
        )
    )
    <script>
        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.
        }
    </script>

See Also

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