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 <[email protected]> Co-authored-by: Tsvetomir Hristov <[email protected]>
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)