Blazor Window Overview
This article provides basic information about the Blazor Window component and its core features.
The Window component displays a popup window, which shows users custom content. The component provides predefined titlebar actions such as close, minimize and maximize. Custom actions are also supported. Other Window features include modality, resizing, and position control.
The Window component is part of Telerik UI for Blazor, a
professional grade UI library with 100+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In this article:
Creating Blazor Window
- Use the
TelerikWindow
tag. - Bind the
Visible
parameter to abool
property. It supports one-way and two-way binding. - Add content to the
WindowContent
child tag. - (optional) Add some title inside a
WindowTitle
tag. HTML markup and child components are supported, too. - (optional) Add a
Close
action inside a<WindowActions>
tag.
Basic Blazor Window
<TelerikWindow @bind-Visible="@WindowIsVisible">
<WindowTitle>
Window Title
</WindowTitle>
<WindowContent>
Window Content ...
</WindowContent>
<WindowActions>
<WindowAction Name="Close" />
</WindowActions>
</TelerikWindow>
<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Toggle window</TelerikButton>
@code {
bool WindowIsVisible { get; set; }
}
Size
The Window can occupy a predefined size on the screen, or expand automatically, based on the content. By default, users can resize the Window. Learn more about the Window features, related to size and resizing.
Dragging
By default, users can move the Window on the page by dragging its titlebar. Learn more about how to use the Window's Draggable
feature.
Responsiveness
The Window component can be responsive when the browser window size changes. Here is an example how to achieve responsive Window behavior. One way is to use the Width
and Height
parameters of the Window. Another option is to apply CSS styles.
Window Parameters
The following table lists the Window parameters, which are not discussed elsewhere in the component documentation. Also check the Window API for a full list of parameters and events.
Parameter | Type and Default Value | Description |
---|---|---|
Class |
string |
The custom CSS class of the <div class="k-window"> element. Use it to override theme styles. Here is a custom Window styling example. |
Size |
string |
A predefined Window width. Use the string members of the static class ThemeConstants.Window.Size - Small , Medium , and Large . They translate to widths of 300px , 800px and 1200px , respectively. If set, the Width parameter will take precedence over Size . |
ThemeColor |
string |
A predefined color scheme for the Window, especially the titlebar. Use the available members of the static class ThemeConstants.Window.ThemeColor . |
Visible |
bool |
Defines if the Window is rendered and visible on the page. |
Important Notes
The Telerik Window component renders as a child of the TelerikRootComponent
at the root of the Blazor app. This is required, so it can show over the other page content, and have correct position.
In Blazor, however, the render tree structure may be important. In some cases, the special Window placement may put you in one of the following situations:
- Returning data from a Window does not update the parent
- CascadingParameter Value is null in the Window
- Using an EditContext for a form holding a Window requires updating the EditContext
- Block all content with a Window