ASP.NET Core Window Overview
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 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.
@(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
- Getting Started with the Window
Basic Usage of the Window HtmlHelper for ASP.NET Core (Demo)
- Window in Razor Pages