[Solved] Splitter order not correct

[Rémi]

Hi,

Version 2.14.1

I want to display 2 or 3 panes in a splitter.

With the code below middle pane is on the right.

What is the best way to keep pane order ?

 

Remi

@page "/"

<div style="width: 500px; height: 300px; border: 1px solid red;">

    <TelerikSplitter @ref="ts" Width="100%" Height="100%" Orientation="@SplitterOrientation.Horizontal">
        <SplitterPanes>

            <SplitterPane Size="20%" Collapsible="true">
                <div>left</div>
            </SplitterPane>

            @if (bunique)
            {
            <SplitterPane Size="10%" Collapsible="true">
                <div>middle</div>
            </SplitterPane>
            }

            <SplitterPane>
                <div>right</div>
            </SplitterPane>

        </SplitterPanes>
    </TelerikSplitter>

</div>

@code{
    bool bunique = false;
    Telerik.Blazor.Components.TelerikSplitter ts;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            if (!bunique)
            {
                bunique = true;
                StateHasChanged();
            }
        }
    }
}

[Nadezhda Tacheva]

Hi Remi,

Indeed, when hiding a pane and then showing it again, the Splitter ignores the initial position of the Pane and displays it in the end. 

The reason behind this behavior is that the component (the Splitter) is initialized first and then its child components (the panes) are rendered. When you are hiding a pane it is removed from the collection of child elements (panes) that the Splitter has to display. Then when you show it again it is added to that collection and as per standard it is added in the end.

I have created a bug report in our public feedback portal to work on such a scenario and provide a solution to obey the pane's initial position after hiding and showing it again. I've also added a vote to increase its priority for fixing. Since I've created the bug report on your behalf, you are subscribed to receive email notification on status changes. It is here: https://feedback.telerik.com/blazor/1509284-splitter-order-changed-after-hiding-and-showing-pane

In the meantime, a possible workaround could be to hide the whole component and re-initialize it from scratch with the new parameter values as per the example below.

 

<TelerikButton OnClick="@TogglePane">Toggle middle pane</TelerikButton>
@if (isVisible)
{
    <TelerikSplitter Width="300px" Height="300px" Orientation="@SplitterOrientation.Horizontal">
        <SplitterPanes>

            <SplitterPane Size="20%" Collapsible="true">
                <div>left</div>
            </SplitterPane>

            @if (middleVisible)
            {
                <SplitterPane Size="20%" Collapsible="true">
                    <div>middle</div>
                </SplitterPane>
            }

            <SplitterPane>
                <div>right</div>
            </SplitterPane>

        </SplitterPanes>
    </TelerikSplitter>
}
@code{
    bool isVisible { get; set; } = true;
    bool middleVisible { get; set; } = true;

    async Task TogglePane()
    {
        isVisible = false;
        await Task.Delay(30);
        middleVisible = !middleVisible;
        isVisible = true;
    }
}

 

Regards,
Nadezhda Tacheva
Progress Telerik