Skip to content

Commit ae5b283

Browse files
committed
chore: update kb content
1 parent a08053d commit ae5b283

File tree

1 file changed

+8
-15
lines changed

1 file changed

+8
-15
lines changed

knowledge-base/window-center-programmatically.md

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,14 @@ This knowledge base article answers the following questions:
3232

3333
To center a Telerik Window programmatically, follow these steps:
3434

35-
1. Use [`Top` and `Left` parameters](slug:components/window/position#top-and-left) – These parameters define the Window position on the screen.
36-
2. Reset `Top` and `Left` parameters to center the Window – Setting them to `string.Empty` allows automatic centering.
37-
3. Refresh the Window using component reference – Calling `WindowRef?.Refresh();` re-renders the Window with the new position.
35+
1. Bind the [`Top` and `Left` parameters](slug:components/window/position#top-and-left) using `@bind-Top` and `@bind-Left` to control the Window position dynamically. Set their default values to specific ones (e.g., `Top="30%"`, `Left="60%"`) to position the Window where you want it to appear initially.
36+
2. Set both parameters to `string.Empty` to reset the Window position. This will ensure that, the component automatically repositions itself to the center of the current viewport.
37+
3. Refresh the Window using component reference – Calling [`WindowRef?.Refresh();`](slug:window-overview#window-reference-and-methods) re-renders the Window with the new position.
3838

39-
>caption Telerik Blazor Window Centered Programmatically
39+
>caption Center the Telerik Blazor Window Programmatically
4040
4141
````RAZOR
42-
@if (!IsWindowVisible)
43-
{
44-
<TelerikButton OnClick="@(() => IsWindowVisible = !IsWindowVisible)">Open Window</TelerikButton>
45-
}
46-
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
47-
48-
<TelerikWindow @bind-Visible="@IsWindowVisible"
42+
<TelerikWindow Visible="true"
4943
@bind-Top="@Top"
5044
@bind-Left="@Left"
5145
Width="200px"
@@ -54,14 +48,13 @@ To center a Telerik Window programmatically, follow these steps:
5448
<WindowTitle>
5549
Window Title
5650
</WindowTitle>
57-
<WindowActions>
58-
<WindowAction Name="Close" />
59-
</WindowActions>
51+
<WindowContent>
52+
<TelerikButton OnClick="@CenterWindow">Center Window</TelerikButton>
53+
</WindowContent>
6054
</TelerikWindow>
6155
6256
@code {
6357
private TelerikWindow? WindowRef { get; set; }
64-
private bool IsWindowVisible { get; set; } = true;
6558
private string Top { get; set; } = "30%";
6659
private string Left { get; set; } = "60%";
6760

0 commit comments

Comments
 (0)