Edit this page

Window HtmlHelper Overview

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

Getting Started

The Basics

There are two ways to populate the content of the Kendo UI Window for ASP.NET MVC:

  • server—Define the content of the Window on the server.
  • ajax—The Window gets the content through an Ajax request.

Configuration

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

  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 Window.

    Example
    
            <% Html.Kendo().Window()
                   .Name("window") //The name of the Window is mandatory. It specifies the "id" attribute of the widget.
                   .Title("About Alvar Aalto") //Set the title of the Window.
                   .Content(() => //Define the content of the Window.
                   {
                       %>
                           Static content of the Window
                       <%
                   })
                   .Draggable() //Enable the dragging of the Window.
                   .Resizable() //Enable the resizing of the Window.
                   .Width(600)  //Set the width of the Window.
                   .Render(); //Render the Window.
            %>
    
    
            @(Html.Kendo().Window()
                  .Name("window") //The name of the Window is mandatory. It specifies the "id" attribute of the widget.
                  .Title("About Alvar Aalto") //Set the title of the Window.
                  .Content(@<text> //Define the content of the Window.
                          The static content of the Window.
                  </text>)
                  .Draggable() //Enable the dragging of the Window.
                  .Resizable() //Enable the resizing of the Window.
                  .Width(600)  //Set the width of the Window.
            )
    

Load-on-Demand Content

Below are listed the steps for you to follow when configuring the Kendo UI Window with a load-on-demand content.

  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. Create an action method which renders the content.

    Example
        public ActionResult AjaxContent()
        {
            return View();
        }
    
  4. Add a Window.

    Example
    
            <% Html.Kendo().Window()
                   .Name("window") //The name of the Window is mandatory. It specifies the "id" attribute of the widget.
                   .Title("About Alvar Aalto") //Set the title of the Window.
                   .LoadContentFrom("AjaxContent", "Window") //Define the Action and Controller names.
            %>
    
    
            @(Html.Kendo().Window()
                  .Name("window") //The name of the Window is mandatory. It specifies the "id" attribute of the widget.
                  .Title("About Alvar Aalto") //Set the title of the Window.
                  .LoadContentFrom("AjaxContent", "Window") //Define the Action and Controller names.
            )
    

Html.BeginForms inside Windows

When a complete form should be inserted inside a Window, end the Window declaration with .Render(); and wrap it in a non-rendering code block. This requirement does not apply if the form is defined through plain HTML tags (&lt;form&gt;...&lt;/form&gt;).

For more information on this topic, refer to the article on using the Kendo UI Window with a form.

The following example demonstrates how to insert a complete form inside the Window.

Example

        <% Html.Kendo().Window()
            .Content(() =>
            {
                using (Html.BeginForm(...)) { %>
                    .........
                <% }
            })
            .Render();
        %>

        @{Html.Kendo().Window()
            .Content(@<text>
                @using (Html.BeginForm(...))
                {
                   .........
                }
            </text>)
            .Render();
        }

Event Handling

You can subscribe to all Window events.

By Handler Name

The following example demonstrates how to subscribe to events by a 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>

        @(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 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>)
              )
        )

Reference

Existing Instances

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

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

See Also