Window Overview

This article provides basic information about the Blazor Window component.

The Window component is part of Telerik UI for Blazor, a professional grade UI library with 80 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:

• Create a Window
• Show and Close
• Styling
• Important Notes

Create a Window

To create a Telerik Window:

1. use the TelerikWindow tag
2. set its Visible property to true to see it (in the example below we will use a button to toggle it)
3. add some content to its WindowContent inner tag
4. optionally, add a title text in its WindowTitle tag
5. optionally, add the built-in actions to its titlebar

Basic example of showing content in a Window popup and allowing built-in actions

<TelerikWindow @bind-Visible="@WindowIsVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize"></WindowAction>
        <WindowAction Name="Maximize"></WindowAction>
        <WindowAction Name="Close"></WindowAction>
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( () => WindowIsVisible = !WindowIsVisible )">Toggle window</TelerikButton>

@code {
    bool WindowIsVisible { get; set; }
}

The result from the code snippet above

Component namespace and reference

@using Telerik.Blazor.Components

<TelerikWindow Visible="true" Centered="true" @ref="@myWindowRef">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
</TelerikWindow>

@code {
    Telerik.Blazor.Components.TelerikWindow myWindowRef { get;set; }
}

Show and Close

The Visible property lets you control whether the window component is shown (and rendered).

Bind the visibility of the window

@*Use property binding to control the state of the window programmatically*@

<button @onclick="ShowWindow">Show the Window</button>
<button @onclick="CloseWindow">Close the Window</button>

<TelerikWindow @bind-Visible="@isVisible">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Minimize"></WindowAction>
        <WindowAction Name="Maximize"></WindowAction>
        <WindowAction Name="Close"></WindowAction>
    </WindowActions>
</TelerikWindow>

@code {
    bool isVisible { get; set; }

    public void ShowWindow()
    {
        isVisible = true;
    }

    public void CloseWindow()
    {
        isVisible = false;
    }
}

Styling

The Class property lets you define a CSS class that will be rendered on the popup element so you can cascade through it in order to change the appearane of both the content, and the built-in elements of the Window.

Use a Class to change the appearance and style of the Window

@* Use CSS selectors with high specifity to customize the looks of the window *@

<TelerikWindow Class="MyClass" Visible="true">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
</TelerikWindow>

<style>
    div.k-widget.k-window.MyClass { /* targets the entire popup element */
        border: 5px solid red;
    }

        .MyClass .k-window-content.k-content.k-dialog-content { /* targets the content element */
            background: yellow;
        }

        .MyClass .k-window-title.k-dialog-title { /* targets the title container */
            color: blue;
        }

    .MyClass .k-dialog-titlebar.k-header.k-window-titlebar { /* targets the entire titlebar */
        background: gold;
    }
</style>

The result from the code snippet above

Important Notes

The Telerik Window component renders as a child of the TelerikRootComponent at the root of your app. This is required so it can show up and have correct positions without being affected and broken by parent elements and their CSS rules.

In Blazor, however, the render tree structure may be important in some cases and the fact that the Window renders its contents in a different place may put you in one of the following situations:

• Returning data from a window does not update the parent
• CascadingParameter Value is null in 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