Skip to content

Commit 5c93cae

Browse files
KB BotTsvetomir-Hr
KB Bot
authored and
Tsvetomir-Hr
committed
Added new kb article dockmanager-reset-state
1 parent e98bfa2 commit 5c93cae

File tree

1 file changed

+141
-0
lines changed

1 file changed

+141
-0
lines changed

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

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

0 commit comments

Comments
 (0)