From a08053d445980209d6f02588ef0d149bf4dcca03 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Wed, 12 Mar 2025 12:54:50 +0200 Subject: [PATCH 1/4] docs(Window): add kb for programmatic center of the window --- .../window-center-programmatically.md | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 knowledge-base/window-center-programmatically.md diff --git a/knowledge-base/window-center-programmatically.md b/knowledge-base/window-center-programmatically.md new file mode 100644 index 000000000..0b464a897 --- /dev/null +++ b/knowledge-base/window-center-programmatically.md @@ -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 + + + + + + + +
ProductWindow for Blazor
+ +## 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. +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. + +>caption Telerik Blazor Window Centered Programmatically + +````RAZOR +@if (!IsWindowVisible) +{ + Open Window +} +Center Window + + + + Window Title + + + + + + +@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) \ No newline at end of file From ae5b283a4b57ba08fc959f517bb13a987c0a8185 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 13 Mar 2025 12:57:16 +0200 Subject: [PATCH 2/4] chore: update kb content --- .../window-center-programmatically.md | 23 +++++++------------ 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/knowledge-base/window-center-programmatically.md b/knowledge-base/window-center-programmatically.md index 0b464a897..5f9d84c15 100644 --- a/knowledge-base/window-center-programmatically.md +++ b/knowledge-base/window-center-programmatically.md @@ -32,20 +32,14 @@ This knowledge base article answers the following questions: 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. -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. +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. +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. +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. ->caption Telerik Blazor Window Centered Programmatically +>caption Center the Telerik Blazor Window Programmatically ````RAZOR -@if (!IsWindowVisible) -{ - Open Window -} -Center Window - - Window Title - - - + + Center Window + @code { private TelerikWindow? WindowRef { get; set; } - private bool IsWindowVisible { get; set; } = true; private string Top { get; set; } = "30%"; private string Left { get; set; } = "60%"; From 699e424bdb7b66bfd7016cdbf2df107a7df11a5d Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 18 Mar 2025 16:58:46 +0200 Subject: [PATCH 3/4] Update knowledge-base/window-center-programmatically.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/window-center-programmatically.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/knowledge-base/window-center-programmatically.md b/knowledge-base/window-center-programmatically.md index 5f9d84c15..9a39265fd 100644 --- a/knowledge-base/window-center-programmatically.md +++ b/knowledge-base/window-center-programmatically.md @@ -32,9 +32,9 @@ This knowledge base article answers the following questions: To center a Telerik Window programmatically, follow these steps: -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. -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. -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. +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). +2. Set both parameters to `string.Empty` to center the Window initially or any time afterwards. +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. >caption Center the Telerik Blazor Window Programmatically From 8e71fe6b40723d087e8314ee1fff98b1e110902a Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Tue, 18 Mar 2025 16:58:55 +0200 Subject: [PATCH 4/4] Update knowledge-base/window-center-programmatically.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- knowledge-base/window-center-programmatically.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/knowledge-base/window-center-programmatically.md b/knowledge-base/window-center-programmatically.md index 9a39265fd..aecdea0d5 100644 --- a/knowledge-base/window-center-programmatically.md +++ b/knowledge-base/window-center-programmatically.md @@ -55,8 +55,8 @@ To center a Telerik Window programmatically, follow these steps: @code { private TelerikWindow? WindowRef { get; set; } - private string Top { get; set; } = "30%"; - private string Left { get; set; } = "60%"; + private string Top { get; set; } = "10%"; + private string Left { get; set; } = "10%"; private void CenterWindow() {