Set selected tabgroup pane at runtime through the DockManager state

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 19 Feb 2025 14:05 by Tom

Tom

Created on: 19 Feb 2025 11:37

Category: DockManager

Type: Feature Request

Set selected tabgroup pane at runtime through the DockManager state

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

1 comment

Tom

Posted on: 19 Feb 2025 14:05

Thank you, I have updated your code so that I can select a specific tab

<TelerikDockManager OnDock="@OnPaneDock" OnStateChanged="@OnStateChanged"
                    @ref="@DockManagerRef">
    <DockManagerPanes>


        <DockManagerTabGroupPane SelectedPaneId="@SelectedPaneId">
            <Panes>
                @foreach (var tab in tabs)
                {
                    <DockManagerContentPane HeaderText="@tab.Title" Id="@tab.Id"  Class="dynamic-tab-pane"
                                            VisibleChanged="()=>OnVisibleChanged(tab)">


                        <Content>
                            <CascadingValue TValue="MainLayout" Value="this"
                                            IsFixed="true">
                                <DynamicComponent Type="tab.ComponentType"
                                                  Parameters="tab.Parameters"/>
                            </CascadingValue>
                        </Content>

                    </DockManagerContentPane>
                }


            </Panes>
        </DockManagerTabGroupPane>
    </DockManagerPanes>
</TelerikDockManager>

private void OnVisibleChanged(Tab tab)
{

CloseTab(tab);

}

public void CloseTab(Tab? tab)
{
    tabs.Remove(tab);

if (tabs.Count == 0)
    {
        activeTabIndex = -1;
return;
    }

if (tabs.Count == 1)
    {
        activeTabIndex = 0;
        ShouldSelectTabPane = true;
return;
    }

var mostRecent = tabs.MaxBy(a => a.OpenedTime);
    activeTabIndex = tabs.IndexOf(mostRecent);
    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 js.InvokeVoidAsync("selectTabPaneByIndex", activeTabIndex);
    }

    await base.OnAfterRenderAsync(firstRender);
}

function selectTabPaneByIndex(index) {
    let tabPanes = document.querySelectorAll(".k-tabstrip-item .dynamic-tab-pane");
    if (tabPanes.length > index && index >= 0) {
        let targetTabPane = tabPanes[index];
        targetTabPane.click();
    }
}