ASP.NET Core Window Overview

The Telerik UI Window TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Window widget.

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 with AJAX.

• Demo page for the Window HtmlHelper

• Demo page for the Window TagHelper

Initializing the Window

The following example demonstrates how to define the Window.

Razor

    @(Html.Kendo().Window()
        .Name("window")
        .Title("Window title")
        .Content(@<text>
                Static content of the Window.
        </text>)
    )

Razor

    <kendo-window name="window" title="Window title">
        <content>Static content of the Window.</content>
    </kendo-window>

C#

    public class WindowController  : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }

Basic Configuration

The Window provides default configuration options that can be set during initialization such as height and width, user actions, draggable behavior, initial position, and so on.

The following example demonstrates the basic configuration of the Window.

Razor

    @(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(resizable => resizable.Enabled(false))
    )

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

Razor

    @{
        string[] actions = new string[] { "Refresh", "Minimize", "Maximize", "Close" };
    }

    <kendo-window name="window" 
                  title="Window title" 
                  width="500"
                  height="300"
                  visible="true"
                  actions="actions"
                  content-url="@Url.Action("AjaxContent","Window")"
                  draggable="false"
                  resizable="false">
    </kendo-window>

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

Functionality and Features

Feature	Description
Dimensions	The Window supports setting different dimensions.
Positioning	It is possible to predefine the position of the Window.
Constraining the position	The draggable area can be restricted.
Loading content	The MultiSelect offers dynamic content loading.
Using iframe	You can configure the Window to display its content in an iframe.
Integration with forms	The Window has a built-in integration with the Form component.
Custom actions	One of the powerful capabilities of the Window is customizing its actions.
Animations	The Window provides rich animation configuration.
Accessibility	The Window is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

Next Steps

• Getting Started with the Window

• Basic Usage of the Window HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the Window TagHelper for ASP.NET Core (Demo)

• Window in Razor Pages

See Also

• Using the API of the Window for ASP.NET Core (Demo)
• Knowledge Base Section