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.
I am using the DockManager with DockManagerTabGroupPane. One of the tabs contains a TelerikSplitter. When I now try to dock a FloatingPane next to, it always tries to dock onto the TelerikSplitter instead of the DockManagerTabGroupPane.
This only happens, when the area of the SplitterPane overlaps with the docking symbols (Dock Navigator).
Test page with a JavaScript-based workaround: https://blazorrepl.telerik.com/GfORlGkt41NBT7kL48
With the new dock manager, I have a tab group that i am programmatically adding a new tab. When I add a new tab i would like it to be visible. I can see there is SelectedPaneId but I see in the documentation this is on init only. Please allow selecting a tab pane programmatically.
===
TELERIK EDIT:
A possible workaround is to simulate user behavior and click the desired tab pane with JavaScript:
<TelerikButton OnClick="@OnButtonClick">Add Tab Pane</TelerikButton>
<TelerikDockManager
Width="50vw"
Height="50vh">
<DockManagerPanes>
<DockManagerTabGroupPane>
<Panes>
@for (int i = 1; i <= TabPaneCount; i++)
{
int paneIndex = i;
<DockManagerContentPane @key="@paneIndex" HeaderText="@( $"Tab {paneIndex}" )" Class="dynamic-tab-pane">
<Content>
Tab Content @paneIndex
</Content>
</DockManagerContentPane>
}
</Panes>
</DockManagerTabGroupPane>
</DockManagerPanes>
</TelerikDockManager>
<script suppress-error="BL9992">
function selectLastTabPane () {
let tabPanes = document.querySelectorAll(".k-tabstrip-item .dynamic-tab-pane");
if (tabPanes.length > 0) {
let lastTabPane = tabPanes[tabPanes.length - 1];
lastTabPane.click();
}
}
</script>
@code {
private int TabPaneCount { get; set; } = 2;
private bool ShouldSelectTabPane { get; set; }
private void OnButtonClick()
{
++TabPaneCount;
ShouldSelectTabPane = true;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (ShouldSelectTabPane)
{
ShouldSelectTabPane = false;
await Task.Delay(1); // wait for HTML to render
await js.InvokeVoidAsync("selectLastTabPane");
}
await base.OnAfterRenderAsync(firstRender);
}
}