By default, tabs in the jQuery and Blazor DockManager work differently when the pane is too small to accommodate them. JQuery tabs gain left and right arrows and can be scrolled back and forth, while Blazor tabs stack on top of each other.

Is there a way to make the Blazor tabs inside DockManager behave the way the jQuery ones do? If not, are there plans to make the behavior configurable?

Please expose events for size and position changes of the DockManager floating panes, which are created by the user at runtime. The events should have the same purpose as the existing ones for declarative floating panes (i.e. the <DockManagerSplitPanes> inside <DockManagerFloatingPanes>):

• FloatingWidthChanged
• FloatingHeightChanged
• FloatingTopChanged
• FloatingLeftChanged

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);
    }
}