` element. Use it to [override theme styles](slug://themes-override). |
+| `Closeable` | `bool`
(`false`) | Determines whether the pane can be closed. |
+| `Dockable` | `bool`
(`false`) | Specifies whether the pane allows other panes to be docked to or over it. This determines if the end user can drop other panes over it or next to it, creating a DockManagerSplitPane (Splitter) or a DockManagerTabGroupPane (TabStrip). |
+| `HeaderText` | `string` | The pane title, displayed in the pane header and as the button text in the DockManager toolbar when the pane is unpinned. |
+| `Id` | `string`
(`Guid`) | The id of the pane. |
+| `Maximizable` | `bool`
(`false`) | Determines whether the pane can be maximized. |
+| `Size` | `string` | Determines the size of the splitter pane. |
+| `Unpinnable` | `bool`
(`false`) | Determines whether the pane can be unpinned. |
+| `Unpinned` | `bool`
(`true`) | Determines whether the pane is unpinned. |
+| `Visible` | `bool`
(`true`) | Determines whether the tab/pane is rendered. |
+
+### DockManagerSplitPane Parameters
+
+| Parameter | Type and Default Value | Description |
+| --- | --- | --- |
+| `AllowEmpty` | `bool`
(`false`) | Determines whether a splitter pane is shown as empty when a child pane is removed (dragged out, closed, etc.). If set to false, the splitter is re-rendered without the removed child pane. |
+| `Class` | `string` | The custom CSS class of the `
` element. Use it to [override theme styles](slug://themes-override). |
+| `Id` | `string`
(`Guid`) | The id of the pane. |
+| `Orientation` | `DockManagerPaneOrientation` enum
(`Vertical`) | Determines the orientation of the rendered splitter. |
+| `Size` | `string` | Determines the size of the splitter pane. |
+| `Visible` | `bool`
(`true`) | Determines whether the tab/pane is rendered. |
+
+#### DockManagerSplitPane Parameters (only when defined as a floating pane)
+
+| Parameter | Type and Default Value | Description |
+| --- | --- | --- |
+| `FloatingHeight` | `string` | The height of the rendered window. |
+| `FloatingLeft` | `string` | The CSS `left` value of the rendered window, relative to the dock manager element (`k-dockmanager`) |
+| `FloatingResizable` | `bool`
(`true`) | Determines whether the rendered window is resizable. |
+| `FloatingTop` | `string` | The CSS `top` value of the rendered window, relative to the dock manager element (`k-dockmanager`) |
+| `FloatingWidth` | `string` | The width of the rendered window. |
+
+### DockManagerTabGroupPane Parameters
+
+| Parameter | Type and Default Value | Description |
+| --- | --- | --- |
+| `AllowEmpty` | `bool`
(`false`) | Determines whether an empty space is left when all tabs are removed (unpinned, closed, etc.), allowing you to drop content panes and create a new tab. |
+| `Id` | `string`
(`Guid`) | The id of the pane. |
+| `SelectedPaneId` | `int` | The `id` of the initially selected tab pane. |
+| `Size` | `string` | Determines the size of the splitter pane. |
+| `Visible` | `bool`
(`true`) | Determines whether the tab/pane is rendered. |
+
+## DockManager Reference
+
+Use the component reference to execute methods and [get or set the DockManager state](slug://dockmanager-state).
+
+| Method | Description |
+| --- | --- |
+| `GetState` | Returns the current state of the Dock Manager as a [`DockManagerState` object](slug://Telerik.Blazor.Components.DockManagerState). |
+| `Refresh` | Use the method to programmatically re-render the component. |
+| `SetState` | Applies the provided `DockManagerState` argument as a new state of the Dock Manager. |
+
+
+
+````RAZOR
+
+
+
Get DockManager State
+
+@code{
+ private TelerikDockManager? DockManagerRef { get; set; }
+
+ private void GetDockManagerState()
+ {
+ var dockState = DockManagerRef?.GetState();
+ }
+}
+````
+
+## Next Steps
+
+* [Explore the DockManager Docking Types](slug://dockmanager-dock-types)
+* [Explore the DockManager Pane Types](slug://dockmanager-pane-types)
+* [Configure the DockManager State](slug://dockmanager-state)
+* [Handle the DockManager Events](slug://dockmanager-events)
+
+
+## See Also
+
+* [DockManager API](slug://Telerik.Blazor.Components.TelerikDockManager-1)
+* [Live Demo: DockManager](https://demos.telerik.com/blazor-ui/dockmanager/overview)
diff --git a/components/dockmanager/pane-types.md b/components/dockmanager/pane-types.md
new file mode 100644
index 0000000000..3db5ffca5b
--- /dev/null
+++ b/components/dockmanager/pane-types.md
@@ -0,0 +1,37 @@
+---
+title: Pane Types
+page_title: DockManager - Pane Types
+description: Pane Types in the DockManager for Blazor.
+slug: dockmanager-pane-types
+tags: telerik, blazor, dockmanager, panes
+published: true
+position: 5
+---
+
+# Pane Types
+
+The Blazor DockManager component exposes the ability to configure different pane types.
+
+When defining pane types, the naming convention follows the structure `
`, where **Type** specifies the behavior of the pane. The available types are:
+
+#### Content Pane
+
+Provides full control over explicitly defining custom content to be rendered for a given pane based on specific requirements.
+
+* It can be a direct child of all other panes and the `` tag.
+* The `DockManagerContentPane` cannot have child panes.
+
+#### TabGroup Pane
+
+Groups panes in a tab strip, similar to the [TabStrip component](slug://components/tabstrip/overview). Users can navigate through panes using tabs in the header.
+
+* It can be a direct child of ``.
+* It can only contain `` children.
+
+#### Split Pane
+
+Organizes panes in a [Splitter-like](slug://splitter-overview) manner, allowing the container pane to be split either horizontally or vertically.
+
+* It can be a direct child of another ``.
+* It can contain ``, ``, and other `` tags as children.
+* Only this pane type can be declared as a direct child of the `` tag.
\ No newline at end of file
diff --git a/components/dockmanager/state.md b/components/dockmanager/state.md
new file mode 100644
index 0000000000..e7d676c175
--- /dev/null
+++ b/components/dockmanager/state.md
@@ -0,0 +1,222 @@
+---
+title: State
+page_title: DockManager - State
+description: Save, load, change the DockManager for Blazor state - docking, undocking, resizing and so on.
+slug: dockmanager-state
+tags: telerik,blazor,dockmanager,state,save,load,layout,set,change,management
+published: True
+position: 15
+---
+
+# DockManager State
+
+The DockManager lets you read, save, load, and change its state through code. The state includes the DockManager features that are controlled by the user, such as the pane resizing, orientation, pinning, docking, and many others.
+
+This article describes:
+
+* [The properties of the `DockManagerState` object](#information-in-the-dockmanager-state).
+* [How to set initial DockManager configuration programmatically in `OnStateInit`](#onstateinit).
+* [How to detect user changes in the DockManager state with `OnStateChanged`](#onstatechanged).
+* [How to use DockManager methods to get and set the DockManager state](#methods).
+
+## Information in the DockManager State
+
+The `DockManagerState` object exposes a collection of all the floating panes including their [settings](slug://dockmanager-overview#dockmanager-parameters).
+
+## Events
+
+The DockManager features two events, which are related to its state.
+
+* [OnStateInit](#onstateinit)
+* [OnStateChanged](#onstatechanged)
+
+### OnStateInit
+
+The `OnStateInit` event fires when the DockManager is initializing. Use this event to:
+
+* Define initial state, for example default initial panes position;
+* Load and apply state that was previously saved in a database or in `localStorage`.
+
+The event argument is of type `DockManagerStateEventArgs` and has a `DockManagerState` property. See [Information in the DockManager State](#information-in-the-dockmanager-state) for details.
+
+### OnStateChanged
+
+`OnStateChanged` fires when the user performs an action that changes the value of a [property in the DockManager state](#information-in-the-dockmanager-state). The event argument is of type `DockManagerStateEventArgs` and exposes the component current `DockManagerState`.
+
+## Methods
+
+The `GetState` and `SetState` methods of the [DockManager instance](slug://dockmanager-overview#dockmanager-reference) let you get and set the current DockManager state on demand at any time *after* [`OnStateInit`](#onstateinit).
+
+* `GetState` returns the current DockManager state, so you can save it or [retrieve specific information](#information-in-the-dockmanager-state). For example, you can use `GetState` to get the current panes position. Or, you can get the current panes size.
+
+* `SetStateAsync` receives an instance of a `DockManagerState` object and applies it to the DockManager. For example, you can have a button that puts the DockManager in a certain configuration programmatically, for example pane positioning, docking, etc.
+
+If you want to make changes to the current DockManager state:
+
+1. First, get the current state with the `GetState` method.
+2. Apply the desired modifications to the obtained `DockManagerState` object.
+3. Set the modified state object via the `SetState` method.
+
+> Do not use `GetState()` in the [`OnStateInit`](#onstateinit) or [`OnStateChanged`](#onstatechanged) events. Do not use `SetState()` in `OnStateInit`. Instead, get or set the `DockManagerState` property of the event argument.
+
+>tip To reset the DockManager state to its initial markup configuration, call `SetState(null)`.
+>
+> To reset the DockManager state to a completely new configuration, create a `new DockManagerState()` and apply the settings there. Then pass the state object to `SetState()`.
+
+## Example
+
+The example below shows how to restore the previous state of the DockManager on page refresh.
+
+>caption Using DockManager State Events and Methods
+
+`````RAZOR
+@using System.Text.Json.Serialization
+@using System.Text.Json
+
+Change something in the DockManager (move, resize, or close panes), then refresh the page. The layout should be restored to its previous state.
+Get State
+Set State
+
+
+
+
+
+
+
+
+ - Fix login bug
+ - Implement dark mode
+ - Refactor API requests
+
+
+
+
+
+ Upcoming Meetings:
+
+ - UI Review - Feb 10
+ - Code Freeze - Feb 15
+ - Final Release - Mar 1
+
+
+
+
+
+ User A updated Task 1
+ User B commented on Task 2
+ New PR merged for Feature X
+
+
+
+
+
+
+ New messages from Sarah
+ Server maintenance scheduled for Sunday
+
+
+
+
+ Enable email notifications
+ Change password
+
+
+
+
+
+
+
+
+
+
+
+ View project progress reports
+
+
+
+
+ Performance metrics and KPIs
+
+
+
+
+ List of project team members
+
+
+
+
+
+
+
+
+
+
+
+ Live chat with team members
+
+
+
+
+ Logs and debugging tools
+
+
+
+
+
+
+
+@code {
+ [Inject]
+ private IJSRuntime _jsRuntime { get; set; }
+ private TelerikDockManager DockManager { get; set; }
+ private DockManagerState CurrentState { get; set; }
+
+ private void GetDockManagerState()
+ {
+ CurrentState = DockManager.GetState();
+ }
+
+ private void SetDockManagerState()
+ {
+ DockManager.SetState(CurrentState);
+ }
+
+ public async Task AddItem(string key, string value)
+ {
+ await _jsRuntime.InvokeVoidAsync("localStorage.setItem", key, value);
+ }
+
+ public async Task GetItem(string key)
+ {
+ return await _jsRuntime.InvokeAsync("localStorage.getItem", key);
+ }
+
+ public async Task OnStateInit(DockManagerStateEventArgs args)
+ {
+ try
+ {
+ var state = await GetItem("DockManagerState");
+ if (!string.IsNullOrEmpty(state))
+ {
+ args.DockManagerState = JsonSerializer.Deserialize(state);
+ }
+ }
+ catch (Exception) { }
+ }
+
+ public async Task OnStateChanged(DockManagerStateEventArgs args)
+ {
+ var state = JsonSerializer.Serialize(args.DockManagerState);
+ await AddItem("DockManagerState", state);
+ }
+}
+`````
+
+## See Also
+
+* [Live Demo: DockManager State](https://demos.telerik.com/blazor-ui/dockmanager/persist-state)
+* [DockManagerState API reference](slug://Telerik.Blazor.Components.DockManagerState-1)
+* [Blazor DockManager](slug://dockmanager-overview)
\ No newline at end of file
diff --git a/docs-builder.yml b/docs-builder.yml
index ad0b3148a0..5e6a947af5 100644
--- a/docs-builder.yml
+++ b/docs-builder.yml
@@ -166,6 +166,8 @@ meta:
title: FileManager
"*editor":
title: Editor
+ "*dockmanager":
+ title: Dock Manager
"*dropdowntree":
title: DropDownTree
"*dropzone":
diff --git a/introduction.md b/introduction.md
index bd8eec326d..8a7f8e882e 100644
--- a/introduction.md
+++ b/introduction.md
@@ -172,6 +172,7 @@ You can watch a YouTube playlist of getting started tutorials for Blazor (videos
+
diff --git a/src-a11y/configs/dockmanager.aria.yml b/src-a11y/configs/dockmanager.aria.yml
new file mode 100644
index 0000000000..1b0d210629
--- /dev/null
+++ b/src-a11y/configs/dockmanager.aria.yml
@@ -0,0 +1,15 @@
+title: Wai-Aria Support
+component: DockManager
+from: /aria/dockmanager_aria.md
+dest: ../components/dockmanager/accessibility/wai-aria-support.md
+slug: dockmanager-wai-aria-support
+position: 50
+after: |
+ ## Keyboard Navigation
+
+ For details on how the keyboard navigation works in Telerik UI for Blazor, refer to the [Accessibility Overview](slug://accessibility-overview#keyboard-navigation) article.
+
+ ## See Also
+
+ * [Blazor Dock Manager Demos](https://demos.telerik.com/blazor-ui/dockmanager/overview)
+ * [Accessibility in Telerik UI for Blazor](slug://accessibility-overview)
\ No newline at end of file