Window Overview

This article provides basic information about the Window component.

To create a Telerik Window:

1. use the TelerikWindow tag
2. set its Visible property to true to see it immediately
3. add some content to its TelerikWindowContent inner tag
4. optionally, add a title text in its TelerikWindowTitle tag

Basic example of showing content in a Window popup

@using Telerik.Blazor.Components.Window

<TelerikWindow Visible="true">
    <TelerikWindowTitle>
        <strong>The Title</strong>
    </TelerikWindowTitle>
    <TelerikWindowContent>
        This is my window <strong>popup</strong> content.
    </TelerikWindowContent>
</TelerikWindow>

The result from the code snippet above

Reference, Show, Close

The Window component is of type Telerik.Blazor.Components.Window.TelerikWindow and exposes several properties and methods that let you control its state. The most important ones are the Visible property that lets you control whether it is shown on the initial view render, and the Show and Close methods that control its visibility programmatically.

Store a reference to a Telerik Window, open and close it programmatically through methods

@using Telerik.Blazor.Components.Window

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

<TelerikWindow @ref="myFirstWindow">
    <TelerikWindowTitle>
        <strong>The Title</strong>
    </TelerikWindowTitle>
    <TelerikWindowContent>
        This is my window <strong>popup</strong> content.
    </TelerikWindowContent>
</TelerikWindow>

@code {
    Telerik.Blazor.Components.Window.TelerikWindow myFirstWindow;

    public void ShowWindow()
    {
        myFirstWindow.Open();
    }

    public void CloseWindow()
    {
        myFirstWindow.Close();
    }

}

Show and close a Window by toggling a single variable

@using Telerik.Blazor.Components.Window

<button @onclick="ToggleWindow">Toggle the Window</button>

<TelerikWindow Visible="@isWindowShown">
    <TelerikWindowTitle>
        <strong>The Title</strong>
    </TelerikWindowTitle>
    <TelerikWindowContent>
        This is my window <strong>popup</strong> content.
    </TelerikWindowContent>
</TelerikWindow>

@code {
    bool isWindowShown { get; set; }

    public void ToggleWindow()
    {
        isWindowShown = !isWindowShown;
    }
}

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

@using Telerik.Blazor.Components.Window

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

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

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

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

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

The result from the code snippet above

See Also

• Live Demos: Window