Window HtmlHelper Overview

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

It enables you to configure the Window from server-side code. The Window displays content in a modal or non-modal HTML window. By default, the user can move, resize, and close a Window. Its content can also be defined either as static HTML or dynamically loaded through AJAX.

For more information on the HtmlHelper, refer to the article on the Window HtmlHelper for ASP.NET MVC.

Basic Usage

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

 @(Html.Kendo().Window()
    .Name("window")
    .Title("Window title")
    .Content(@<text>
            Static content of the Window.
    </text>)
)
    public class WindowController  : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }

Configuration

The Window provides default configuration options that can be set during initialization. Some of the options include:

  • Minimum and maximum height and width during resizing.
  • Available user actions—close, refresh, maximize, minimize, or pin—and the option to define custom ones.
  • Title.
  • Draggable and resizable behaviors.
  • Initial position in pixels with regard to the page top-left corner.
  • Pinned state—whether the Window moves together with the rest of the page content during scrolling.

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

Example
@(Html.Kendo().Window()
    .Name("window")
    .Width(500)
    .Height(300)
    .Title("Window title")
    .Visible(true)
    .Actions(actions => actions.Refresh().Minimize().Maximize().Close())
    .LoadContentFrom("AjaxContent", "Window")
    .Draggable(false)
    .Resizable(false)
)

<script type="text/javascript">
    $(function() {
        //Notice that the Name() of the Window is used to get its client-side instance.
        var dialog = $("#window").data("kendoWindow");
    });
</script>

Functionality and Features

Event Handling

You can subscribe to all Window events.

By Handler Name

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

Example
@(Html.Kendo().Window()
    .Name("window")
    .Events(e => e
        .Open("window_open")
        .Close("window_close")
    )
)
<script>
    function window_open() {
        //Handle the open event.
    }

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

By Template Delegate

The following example demonstrates how to subscribe to events by using a template delegate.

Example
@(Html.Kendo().Window()
    .Name("window")
    .Events(e => e
        .Open(@<text>
            function() {
                //Handle the open event inline.
            }
        </text>)
        .Close(@<text>
            function() {
                //Handle the close event inline.
            }
        </text>)
    )
)

See Also

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