Skip to content

Added new kb article dockmanager-reset-state #3102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 16, 2025
Merged

Added new kb article dockmanager-reset-state #3102

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
168a9c4
Added new kb article dockmanager-reset-state
Jul 15, 2025
02cc70e
chore(DockManager): polish article
Tsvetomir-Hr Jul 15, 2025
95d5ef0
chore: apply review recommendations
Tsvetomir-Hr Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 136 additions & 0 deletions knowledge-base/dockmanager-reset-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
---
title: Reset DockManager State on Button Click in Blazor
description: Learn how to reset the DockManager state in Blazor using a button click and save the default state after the initial render.
type: how-to
page_title: How to Reset DockManager State Dynamically in Blazor
meta_title: Reset DockManager State Dynamically in Blazor
slug: dockmanager-kb-reset-state
tags: dockmanager, blazor, state, reset
res_type: kb
ticketid: 1691957
---

## Environment
<table>
<tbody>
<tr>
<td>Product</td>
<td>DockManager for Blazor</td>
</tr>
</tbody>
</table>

## Description

I want to reset the state of the [DockManager](slug:dockmanager-overview) component on a button click. The DockManager currently only resets by reloading the page. I need a solution to reset its state dynamically.

This knowledge base article also answers the following questions:
- How to reset DockManager layout to its default state?
- How to refresh DockManager without reloading the page?
- How to implement a button to reset DockManager panes?

## Solution

To reset the DockManager state dynamically on a button click:

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

2. Reset the State on Button Click&mdash;Restore the previously saved state when the button is clicked.

>caption Reset the DockManager layout to its default state

````RAZOR
<strong>Change something in the DockManager (move, resize, or close panes), then click the button to restore the state</strong>
<br />
<br />
<TelerikButton OnClick="@ResetDockState" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Reset Dock State</TelerikButton>
<TelerikDockManager @ref="@DockManagerRef"
Height="600px">
<DockManagerPanes>
<DockManagerSplitPane>
<Panes>
<DockManagerContentPane Id="TaskListPane" HeaderText="Task List">
<Content>
<ul>
<li>Fix login bug</li>
<li>Implement dark mode</li>
<li>Refactor API requests</li>
</ul>
</Content>
</DockManagerContentPane>
<DockManagerContentPane Id="CalendarPane" HeaderText="Project Calendar">
<Content>
<p>Upcoming Meetings:</p>
<ul>
<li>UI Review - Feb 10</li>
<li>Code Freeze - Feb 15</li>
<li>Final Release - Mar 1</li>
</ul>
</Content>
</DockManagerContentPane>
<DockManagerContentPane Id="ActivityFeedPane" HeaderText="Recent Activity">
<Content>
<p>User A updated Task 1</p>
<p>User B commented on Task 2</p>
<p>New PR merged for Feature X</p>
</Content>
</DockManagerContentPane>
<DockManagerTabGroupPane>
<Panes>
<DockManagerContentPane Id="NotificationsPane" HeaderText="Notifications">
<Content>
<p>New messages from Sarah</p>
<p>Server maintenance scheduled for Sunday</p>
</Content>
</DockManagerContentPane>
<DockManagerContentPane Id="SettingsPane" HeaderText="Settings">
<Content>
<p>Enable email notifications</p>
<p>Change password</p>
</Content>
</DockManagerContentPane>
</Panes>
</DockManagerTabGroupPane>
</Panes>
</DockManagerSplitPane>
</DockManagerPanes>
<DockManagerFloatingPanes>
<DockManagerSplitPane>
<Panes>
<DockManagerContentPane Id="ChatPane" HeaderText="Team Chat">
<Content>
<p>Live chat with team members</p>
</Content>
</DockManagerContentPane>
<DockManagerContentPane Id="DevConsolePane" HeaderText="Dev Console">
<Content>
<p>Logs and debugging tools</p>
</Content>
</DockManagerContentPane>
</Panes>
</DockManagerSplitPane>
</DockManagerFloatingPanes>
</TelerikDockManager>

@code {
private TelerikDockManager? DockManagerRef { get; set; }
private DockManagerState? DefaultState { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
DefaultState = DockManagerRef?.GetState();
}
}
private void ResetDockState()
{
DockManagerRef?.SetState(DefaultState);
}
}
````

## See Also

- [DockManager Overview](slug:dockmanager-overview)
- [Saving and Restoring DockManager State](slug:dockmanager-state)