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.

Download Free Trial

In this article:

• How to create a Window
• Responsive example
• Parameters
• Important notes

Creating Blazor Window

1. Use the TelerikWindow tag.
2. Bind the Visible parameter to a bool property. It supports one-way and two-way binding.
3. Add content to the WindowContent child tag.
4. (optional) Add some title inside a WindowTitle tag. HTML markup and child components are supported, too.
5. (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	Renders a custom CSS class to the <div class="k-window"> element. Use it to override theme styles. Here is a custom Window styling example.
Size	string	Sets 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.
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

See Also

• Live Demos: Window
• Window Size, Maximize, Minimize
• Window Actions
• Window Events
• Window Position
• Modal Window