This is a migrated thread and some comments may be shown as answers.

Splitter order not correct

1 Answer 119 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Rémi
Top achievements
Rank 1
Veteran
Rémi asked on 01 Mar 2021, 01:55 PM

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

1 Answer, 1 is accepted

Sort by
0
Nadezhda Tacheva
Telerik team
answered on 02 Mar 2021, 04:40 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Splitter
Asked by
Rémi
Top achievements
Rank 1
Veteran
Answers by
Nadezhda Tacheva
Telerik team
Share this question
or