ASP.NET Core Window Overview

Telerik UI for ASP.NET Core Ninja image

The Window is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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.

Initializing the Window

The following example demonstrates how to define the Window.

    @(Html.Kendo().Window()
        .Name("window")
        .Title("Window title")
        .Content(@<text>
                Static content of the Window.
        </text>)
    )
    <kendo-window name="window" title="Window title">
        <content>Static content of the Window.</content>
    </kendo-window>
    public class WindowController  : Controller
    {
        public IActionResult 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.

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

See Also

In this article