Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(Window): add kb for programmatic center of the window #2821

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs(Window): add kb for programmatic center of the window #2821

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions knowledge-base/window-center-programmatically.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
title: How To Center Window Programmatically
description: Learn how to center a Telerik Window programmatically by using the Top and Left parameters.
type: how-to
page_title: How To Center Window Programmatically
slug: window-kb-center-programmatically
tags: window, center, position, blazor,
res_type: kb
ticketid:
---

## Environment
<table>
<tbody>
<tr>
<td>Product</td>
<td>Window for Blazor</td>
</tr>
</tbody>
</table>

## Description

This knowledge base article answers the following questions:

* How can I programmatically center a Telerik Window?
* How do I reset a Telerik Window to its default position?
* How can I position a Telerik Window in the center of the viewport?
* How do I dynamically adjust the Telerik Window position?

## Solution

To center a Telerik Window programmatically, follow these steps:

1. Use [`Top` and `Left` parameters](slug:components/window/position#top-and-left) – These parameters define the Window position on the screen.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This step is not actionable, especially if the customer wants the Window to be initially centered. For example, explain:

  • That the parameters must use two-way binding.
  • What should be their default values.

This may also help you to make the next step simpler, because the reader will already be familiar with the string.Empty value.

2. Reset `Top` and `Left` parameters to center the Window – Setting them to `string.Empty` allows automatic centering.
3. Refresh the Window using component reference – Calling `WindowRef?.Refresh();` re-renders the Window with the new position.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Link to https://www.telerik.com/blazor-ui/documentation/components/window/overview#window-reference-and-methods


>caption Telerik Blazor Window Centered Programmatically
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make the caption an action "verb", rather than a "noun". For example:

Suggested change
>caption Telerik Blazor Window Centered Programmatically
>caption Center the Telerik Blazor Window Programmatically


````RAZOR
@if (!IsWindowVisible)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The example can be simplified:

  • Remove the toggle button
  • Make the Window always visible
  • Move the Center button inside the Window

{
<TelerikButton OnClick="@(() => IsWindowVisible = !IsWindowVisible)">Open Window</TelerikButton>
}
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>

<TelerikWindow @bind-Visible="@IsWindowVisible"
@bind-Top="@Top"
@bind-Left="@Left"
Width="200px"
Height="200px"
@ref="WindowRef">
<WindowTitle>
Window Title
</WindowTitle>
<WindowActions>
<WindowAction Name="Close" />
</WindowActions>
</TelerikWindow>

@code {
private TelerikWindow? WindowRef { get; set; }
private bool IsWindowVisible { get; set; } = true;
private string Top { get; set; } = "30%";
private string Left { get; set; } = "60%";

private void CenterWindow()
{
Top = Left = string.Empty;
WindowRef?.Refresh();
}
}
````

## See Also
- [Window Position](slug:components/window/position)
- [Telerik Window for Blazor - Overview](slug:window-overview)
Loading