Description
A pane that has Closeable="false" set does not render a "close" button and should not be closeable through any user interaction. However, pressing the Esc keyboard key (while the pane is floating and has the focus) closes the pane.
Steps To Reproduce
Run the following REPL example: https://blazorrepl.telerik.com/QTkgmKuM23c0uPv125
- Focus the floating pane.
- Press the Esc keyboard key.
A slightly different scenario: there are no panes declared in a DockManagerFloatingPanes tag. The user drags a DockManagerContentPane making it float, then presses Esc key: https://blazorrepl.telerik.com/QJuUGUlv43toAJhk40
Actual Behavior
The floating pane closes.
Expected Behavior
The floating pane remains open.
Workaround:
Add the following script to the view:
<script suppress-error="BL9992">
document.addEventListener(
"keydown",
function (e) {
if (e.key === "Escape" && e.target.classList.contains("k-dock-manager-window")) {
e.stopImmediatePropagation();
e.preventDefault();
}
},
true
);
</script>Browser
All
Last working version of Telerik UI for Blazor (if regression)
No response
While working with the DockManager component we encountered a few issues and want to request a minor change:
Inconsistent pane header height
- When panes are in different states (headers displayed as a Tab vs. as a PaneHeader), their heights differ.
- Feature request: please consider introducing size enums (e.g. Small / Medium / Large) so that developers can adjust the header size. At the very least, making the heights consistent by default would help.
Thanks.
Bohdan
<TelerikDockManager Height="100vh" OnStateChanged="OnStateChanged" OnStateInit="OnStateInit" @ref="dockManager">
<DockManagerPanes>
<DockManagerSplitPane>
<Panes>
<DockManagerContentPane Closeable="false" Maximizable="true" HeaderText="Content1 header" @bind-Size="Content1PaneSize">
<Content>
<div>
yada yada
</div>
</Content>
</DockManagerContentPane>
<DockManagerSplitPane Orientation="DockManagerPaneOrientation.Vertical">
<Panes>
<DockManagerContentPane Maximizable="false" Closeable="false" @bind-Size="Content2PaneSize">
<HeaderTemplate>
<span>content 2 header gets erased</span>
</HeaderTemplate>
<Content>
<div>
Content 2
</div>
</Content>
</DockManagerContentPane>
<DockManagerContentPane HeaderText="header 3" Closeable="false" @bind-Size="Content3PaneSize">
<Content>
<div>
content 3
</div>
</Content>
</DockManagerContentPane>
</Panes>
</DockManagerSplitPane>
</Panes>
</DockManagerSplitPane>
</DockManagerPanes>
</TelerikDockManager>
The OnPaneResize (and SizeChanged) event does NOT fire when a pane is unpinned. When it flies out from the left, resizing the flyout does not fire events that would letus refresh the chart to fill the new size.
Reproduced in this REPL: https://blazorrepl.telerik.com/mfkqODwk35srscZe46
I am trying to change the orientation of the SplitPane after the DockManager has rendered but nothing changes. It seems like the parameter is not reactive.
===
ADMIN EDIT
===
A possible option for the time being is to dispose and reinitialize the DockManager when you want to change the SplitPane Orientation.
Here is a runnable sample: https://blazorrepl.telerik.com/QfYHboFl280vuIkL03.