Skip to content

docs(DockManager): Add missing UnpinnedChanged event #3184

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 2 commits into from
Aug 14, 2025
Merged

docs(DockManager): Add missing UnpinnedChanged event #3184

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
433188f
docs(DockManager): Add missing UnpinnedChanged event
dimodi Aug 14, 2025
d045dc0
Update components/dockmanager/events.md
dimodi Aug 14, 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
41 changes: 29 additions & 12 deletions components/dockmanager/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ This article explains the events available in the Telerik DockManager for Blazor
* [OnUndock](#ondock)
* [VisibleChanged](#visiblechanged)
* [SizeChanged](#sizechanged)
* [UnpinnedChanged](#unpinnedchanged)
* [UnpinnedSizeChanged](#unpinnedsizechanged)
* [OnPaneResize](#onpaneresize)
* [State Events](#state-events)
Expand All @@ -24,7 +25,7 @@ This article explains the events available in the Telerik DockManager for Blazor

## OnDock

The `OnDock` event is fired when any pane is docked.
The `OnDock` event fires when any pane is docked.

The event handler receives as an argument an `DockManagerDockEventArgs` object that contains:

Expand All @@ -37,7 +38,7 @@ The event handler receives as an argument an `DockManagerDockEventArgs` object t

## OnUndock

The `OnUndock` event is fired when any pane is undocked.
The `OnUndock` event fires when any pane is undocked.

The event handler receives as an argument an `DockManagerUndockEventArgs` object that contains:

Expand All @@ -48,19 +49,23 @@ The event handler receives as an argument an `DockManagerUndockEventArgs` object

## VisibleChanged

The `VisibleChanged` event is fired when the user tries to hide a given pane. You can effectively cancel the event by not propagating the new visibility state to the variable the `Visible` property is bound to. This is the way to cancel the event and keep the pane visible.
The `VisibleChanged` event fires when the user tries to hide a given pane. You can effectively cancel the event by not propagating the new visibility state to the variable the `Visible` property is bound to. This is the way to cancel the event and keep the pane visible.

## SizeChanged

The `SizeChanged` event is triggered when the `Size` parameter of the corresponding pane is changed.
The `SizeChanged` event fireswhen the `Size` parameter of the corresponding pane changes.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The `SizeChanged` event fireswhen the `Size` parameter of the corresponding pane changes.
The `SizeChanged` event fires when the `Size` parameter of the corresponding pane changes.


## UnpinnedChanged

The `UnpinnedChanged` event fireswhen the `Unpinned` parameter of the corresponding pane changes.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The `UnpinnedChanged` event fireswhen the `Unpinned` parameter of the corresponding pane changes.
The `UnpinnedChanged` event fires when the `Unpinned` parameter of the corresponding pane changes.


## UnpinnedSizeChanged

The `UnpinnedSizeChanged` event is triggered when the `UnpinnedSize` parameter of the corresponding pane is changed.
The `UnpinnedSizeChanged` event fires when the `UnpinnedSize` parameter of the corresponding pane changes.

## OnPaneResize

The `OnPaneResize` event is fired when a pane is resized, except unpinned panes. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:dockmanager-state) for your users.
The `OnPaneResize` event fires when a pane is resized, except unpinned panes. It lets you respond to that change if needed - for example, call the `.Refresh()` method of a chart or otherwise repaint a child component in the content. You can also use it to, for example, update the saved [state](slug:dockmanager-state) for your users.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first sentence sounds very unclear. I recommend revising it for clarity and better readability.


The event handler receives as an argument an `DockManagerPaneResizeEventArgs` object that contains:

Expand All @@ -81,7 +86,7 @@ Review the [DockManager state](slug:dockmanager-state) article for more details

## OnPin

The `OnPin` event is fired when any pane is pinned.
The `OnPin` event fires when any pane is pinned.

The event handler receives as an argument an `DockManagerPinEventArgs` object that contains:

Expand All @@ -92,7 +97,7 @@ The event handler receives as an argument an `DockManagerPinEventArgs` object th

## OnUnpin

The `OnUnpin` event is fired when any pane is unpinned.
The `OnUnpin` event fires when any pane is unpinned.

The event handler receives as an argument an `DockManagerUnpinEventArgs` object that contains:

Expand Down Expand Up @@ -124,13 +129,17 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
<DockManagerContentPane HeaderText="Pane 1"
Id="Pane1"
Size="50%"
Unpinned="@Pane1Unpinned"
UnpinnedChanged="@Pane1UnpinnedChanged"
UnpinnedSize="@Pane1UnpinnedSize"
UnpinnedSizeChanged="@Pane1UnpinnedSizeChanged"
Closeable="false">
<Content>
Pane 1. Undocking is allowed. Docking over it is cancelled.
<code>UnpinnedSizeChanged</code> is handled.
Current <code>UnpinnedSize</code>: <strong>@Pane1UnpinnedSize</strong>
<code>UnpinnedChanged</code> and <code>UnpinnedSizeChanged</code> are handled.
Current
<code>UnpinnedSize</code>:
<strong>@Pane1UnpinnedSize</strong>
</Content>
</DockManagerContentPane>

Expand Down Expand Up @@ -206,6 +215,7 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
@code {
private TelerikDockManager? DockManagerRef { get; set; }

private bool Pane1Unpinned { get; set; }
private string Pane1UnpinnedSize { get; set; } = "360px";
private bool Pane4Visible { get; set; } = true;
private bool FloatingPaneVisible { get; set; } = true;
Expand Down Expand Up @@ -247,7 +257,7 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
}
else
{
DockManagetEventLog.Insert(0, $"Pane <strong>{args.PaneId}</strong> was pinned.");
DockManagetEventLog.Insert(0, $"[DockManager OnPanePin] Pane <strong>{args.PaneId}</strong> was pinned.");
}
}

Expand All @@ -256,6 +266,13 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
DockManagetEventLog.Insert(0, $"Pane <strong>{args.PaneId}</strong> was resized to {args.Size}.");
}

private void Pane1UnpinnedChanged(bool newUnpinned)
{
Pane1Unpinned = newUnpinned;

DockManagetEventLog.Insert(0, $"[Pane UnpinnedChanged] Pane <strong>Pane 1</strong> was {(newUnpinned ? "unpinned" : "pinned")}.");
}

private void Pane1UnpinnedSizeChanged(string newUnpinnedSize)
{
Pane1UnpinnedSize = newUnpinnedSize;
Expand All @@ -272,7 +289,7 @@ The event handler receives as an argument an `DockManagerUnpinEventArgs` object
}
else
{
DockManagetEventLog.Insert(0, $"Pane <strong>{args.PaneId}</strong> was unpinned.");
DockManagetEventLog.Insert(0, $"[DockManager OnUnpin] Pane <strong>{args.PaneId}</strong> was unpinned.");
}
}

Expand Down
38 changes: 19 additions & 19 deletions components/dockmanager/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,49 +119,49 @@ The following table lists the Dock Manager parameters. Also check the [DockManag

| Parameter | Type and Default&nbsp;Value | Description |
| --- | --- | --- |
| `AllowFloat` | `bool` <br /> (`false`) | Determines whether the pane can be dragged from the dock manager layout to create a new floating pane. |
| `AllowFloat` | `bool` | Determines whether the pane can be dragged from the dock manager layout to create a new floating pane. |
| `Class` | `string` | The custom CSS class of the `<div class="k-pane-scrollable">` element. Use it to [override theme styles](slug:themes-override). |
| `Closeable` | `bool` <br /> (`false`) | Determines whether the pane can be closed. |
| `Dockable` | `bool` <br /> (`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). |
| `Closeable` | `bool` | Determines whether the pane can be closed. |
| `Dockable` | `bool` | 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` <br /> (`Guid`) | The id of the pane. |
| `Maximizable` | `bool` <br /> (`false`) | Determines whether the pane can be maximized. |
| `Size` | `string` | Determines the size of the splitter pane. |
| `Unpinnable` | `bool` <br /> (`false`) | Determines whether the pane can be unpinned. |
| `Unpinned` | `bool` <br /> (`true`) | Determines whether the pane is unpinned. |
| `UnpinnedSize` | `string` | Determines the size of the splitter pane when it is unpinned. |
| `Visible` | `bool` <br /> (`true`) | Determines whether the tab/pane is rendered. |
| `Maximizable` | `bool` | Determines whether the pane can be maximized. |
| `Size` | `string` | Determines the size of the splitter pane. Supports two-way binding. |
| `Unpinnable` | `bool` | Determines whether the pane can be unpinned. |
| `Unpinned` | `bool` | Determines whether the pane is unpinned. Supports two-way binding. |
| `UnpinnedSize` | `string` | Determines the size of the splitter pane when it is unpinned. Supports two-way binding. |
| `Visible` | `bool` <br /> (`true`) | Determines whether the tab/pane is rendered. Supports two-way binding. |

### DockManagerSplitPane Parameters

| Parameter | Type and Default&nbsp;Value | Description |
| --- | --- | --- |
| `AllowEmpty` | `bool` <br /> (`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. |
| `AllowEmpty` | `bool` | 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 `<div class="k-dock-manager-splitter">` element. Use it to [override theme styles](slug:themes-override). |
| `Id` | `string` <br /> (`Guid`) | The id of the pane. |
| `Orientation` | `DockManagerPaneOrientation` enum <br /> (`Vertical`) | Determines the orientation of the rendered splitter. |
| `Size` | `string` | Determines the size of the splitter pane. |
| `Visible` | `bool` <br /> (`true`) | Determines whether the tab/pane is rendered. |
| `Size` | `string` | Determines the size of the splitter pane. Supports two-way binding. |
| `Visible` | `bool` <br /> (`true`) | Determines whether the tab/pane is rendered. Supports two-way binding. |

#### DockManagerSplitPane Parameters (only when defined as a floating pane)

| Parameter | Type and Default&nbsp;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`) |
| `FloatingHeight` | `string` | The height of the rendered window. Supports two-way binding. |
| `FloatingLeft` | `string` | The CSS `left` value of the rendered window, relative to the dock manager element (`k-dockmanager`). Supports two-way binding. |
| `FloatingResizable` | `bool` <br /> (`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. |
| `FloatingTop` | `string` | The CSS `top` value of the rendered window, relative to the dock manager element (`k-dockmanager`). Supports two-way binding. |
| `FloatingWidth` | `string` | The width of the rendered window. Supports two-way binding. |

### DockManagerTabGroupPane Parameters

| Parameter | Type and Default&nbsp;Value | Description |
| --- | --- | --- |
| `AllowEmpty` | `bool` <br /> (`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. |
| `AllowEmpty` | `bool` | 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` <br /> (`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` <br /> (`true`) | Determines whether the tab/pane is rendered. |
| `Size` | `string` | Determines the size of the splitter pane. Supports two-way binding. |
| `Visible` | `bool` <br /> (`true`) | Determines whether the tab/pane is rendered. Supports two-way binding. |

## DockManager Reference

Expand Down
Loading