Skip to content

Commit 6ee3eb5

Browse files
github-actions[bot]KB BotTsvetomir-Hr
authored
Merge new-kb-dockmanager-reset-state-b16c9f8265cb451197802ab3fae86be7-3102 into production (#3108)
* Added new kb article dockmanager-reset-state * chore(DockManager): polish article * chore: apply review recommendations --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com>
1 parent bfc351c commit 6ee3eb5

File tree

1 file changed

+134
-0
lines changed

1 file changed

+134
-0
lines changed

‎knowledge-base/dockmanager-reset-state.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
---
2+
title: Reset DockManager State on Button Click in Blazor
3+
description: Learn how to reset the DockManager state in Blazor using a button click and save the default state after the initial render.
4+
type: how-to
5+
page_title: How to Reset DockManager State Dynamically in Blazor
6+
meta_title: Reset DockManager State Dynamically in Blazor
7+
slug: dockmanager-kb-reset-state
8+
tags: dockmanager, blazor, state
9+
res_type: kb
10+
ticketid: 1691957
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>DockManager for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
I want to reset the [DockManager state](slug:dockmanager-state) on a button click. The DockManager currently only resets by reloading the page. I need a solution to reset its state dynamically.
26+
27+
This knowledge base article also answers the following questions:
28+
- How to reset DockManager layout to its default state?
29+
- How to refresh DockManager without reloading the page?
30+
- How to implement a button to reset DockManager panes?
31+
32+
## Solution
33+
34+
To reset the DockManager state dynamically on a button click:
35+
36+
1. Capture and save the default DockManager state in the [`OnAfterRenderAsync`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.componentbase.onafterrenderasync?view=aspnetcore-9.0) lifecycle method.
37+
38+
2. Restore the previously saved default state when the button is clicked.
39+
40+
>caption Reset the DockManager layout to its default state
41+
42+
````RAZOR
43+
Change something in the DockManager (move, resize, or close panes). Тhen click
44+
<TelerikButton OnClick="@ResetDockState" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Reset Dock State</TelerikButton>
45+
<TelerikDockManager @ref="@DockManagerRef"
46+
Height="600px">
47+
<DockManagerPanes>
48+
<DockManagerSplitPane>
49+
<Panes>
50+
<DockManagerContentPane Id="TaskListPane" HeaderText="Task List">
51+
<Content>
52+
<ul>
53+
<li>Fix login bug</li>
54+
<li>Implement dark mode</li>
55+
<li>Refactor API requests</li>
56+
</ul>
57+
</Content>
58+
</DockManagerContentPane>
59+
<DockManagerContentPane Id="CalendarPane" HeaderText="Project Calendar">
60+
<Content>
61+
<p>Upcoming Meetings:</p>
62+
<ul>
63+
<li>UI Review - Feb 10</li>
64+
<li>Code Freeze - Feb 15</li>
65+
<li>Final Release - Mar 1</li>
66+
</ul>
67+
</Content>
68+
</DockManagerContentPane>
69+
<DockManagerContentPane Id="ActivityFeedPane" HeaderText="Recent Activity">
70+
<Content>
71+
<p>User A updated Task 1</p>
72+
<p>User B commented on Task 2</p>
73+
<p>New PR merged for Feature X</p>
74+
</Content>
75+
</DockManagerContentPane>
76+
<DockManagerTabGroupPane>
77+
<Panes>
78+
<DockManagerContentPane Id="NotificationsPane" HeaderText="Notifications">
79+
<Content>
80+
<p>New messages from Sarah</p>
81+
<p>Server maintenance scheduled for Sunday</p>
82+
</Content>
83+
</DockManagerContentPane>
84+
<DockManagerContentPane Id="SettingsPane" HeaderText="Settings">
85+
<Content>
86+
<p>Enable email notifications</p>
87+
<p>Change password</p>
88+
</Content>
89+
</DockManagerContentPane>
90+
</Panes>
91+
</DockManagerTabGroupPane>
92+
</Panes>
93+
</DockManagerSplitPane>
94+
</DockManagerPanes>
95+
<DockManagerFloatingPanes>
96+
<DockManagerSplitPane>
97+
<Panes>
98+
<DockManagerContentPane Id="ChatPane" HeaderText="Team Chat">
99+
<Content>
100+
<p>Live chat with team members</p>
101+
</Content>
102+
</DockManagerContentPane>
103+
<DockManagerContentPane Id="DevConsolePane" HeaderText="Dev Console">
104+
<Content>
105+
<p>Logs and debugging tools</p>
106+
</Content>
107+
</DockManagerContentPane>
108+
</Panes>
109+
</DockManagerSplitPane>
110+
</DockManagerFloatingPanes>
111+
</TelerikDockManager>
112+
113+
@code {
114+
private TelerikDockManager? DockManagerRef { get; set; }
115+
private DockManagerState? DefaultState { get; set; }
116+
117+
protected override async Task OnAfterRenderAsync(bool firstRender)
118+
{
119+
if (firstRender)
120+
{
121+
DefaultState = DockManagerRef?.GetState();
122+
}
123+
}
124+
private void ResetDockState()
125+
{
126+
DockManagerRef?.SetState(DefaultState);
127+
}
128+
}
129+
````
130+
131+
## See Also
132+
133+
- [DockManager Overview](slug:dockmanager-overview)
134+
- [DockManager State](slug:dockmanager-state)

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy