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 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 Visible="true">
    <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>

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

<TelerikWindow Class="MyClass" Visible="true">
    <WindowTitle>
        <strong>The Title</strong>
    </WindowTitle>
    <WindowContent>
        This is my window <strong>popup</strong> content.
    </WindowContent>
</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

In this article
Not finding the help you need? Improve this article