Skip to content

Commit 0cdc376

Browse files
Tsvetomir-Hrdimodi
andauthored
docs(Window): add kb for programmatic center of the window (#2821)
* docs(Window): add kb for programmatic center of the window * chore: update kb content * Update knowledge-base/window-center-programmatically.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/window-center-programmatically.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent bb71979 commit 0cdc376

File tree

1 file changed

+71
-0
lines changed

1 file changed

+71
-0
lines changed
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: How To Center Window Programmatically
3+
description: Learn how to center a Telerik Window programmatically by using the Top and Left parameters.
4+
type: how-to
5+
page_title: How To Center Window Programmatically
6+
slug: window-kb-center-programmatically
7+
tags: window, center, position, blazor,
8+
res_type: kb
9+
ticketid:
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Window for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
## Description
23+
24+
This knowledge base article answers the following questions:
25+
26+
* How can I programmatically center a Telerik Window?
27+
* How do I reset a Telerik Window to its default position?
28+
* How can I position a Telerik Window in the center of the viewport?
29+
* How do I dynamically adjust the Telerik Window position?
30+
31+
## Solution
32+
33+
To center a Telerik Window programmatically, follow these steps:
34+
35+
1. Set the [`Top` and `Left` parameters](slug:components/window/position#top-and-left) using `@bind-Top` and `@bind-Left` or the [`TopChanged` and `LeftChanged` events](slug:window-events#leftchanged-and-topchanged).
36+
2. Set both parameters to `string.Empty` to center the Window initially or any time afterwards.
37+
3. [Call the `Refresh()` method of the Window component instance](slug:window-overview#window-reference-and-methods) to re-render the Window at the new position.
38+
39+
>caption Center the Telerik Blazor Window Programmatically
40+
41+
````RAZOR
42+
<TelerikWindow Visible="true"
43+
@bind-Top="@Top"
44+
@bind-Left="@Left"
45+
Width="200px"
46+
Height="200px"
47+
@ref="WindowRef">
48+
<WindowTitle>
49+
Window Title
50+
</WindowTitle>
51+
<WindowContent>
52+
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
53+
</WindowContent>
54+
</TelerikWindow>
55+
56+
@code {
57+
private TelerikWindow? WindowRef { get; set; }
58+
private string Top { get; set; } = "10%";
59+
private string Left { get; set; } = "10%";
60+
61+
private void CenterWindow()
62+
{
63+
Top = Left = string.Empty;
64+
WindowRef?.Refresh();
65+
}
66+
}
67+
````
68+
69+
## See Also
70+
- [Window Position](slug:components/window/position)
71+
- [Telerik Window for Blazor - Overview](slug:window-overview)

0 commit comments

Comments
 (0)