Unplanned
Last Updated: 09 Mar 2021 15:16 by ADMIN
Rémi
Created on: 02 Mar 2021 15:58
Category: Splitter
Type: Bug Report
2
Splitter order changed after hiding and showing pane

I want to display 2 or 3 panes in a splitter but after hiding the middle pane and showing it again its position is not saved, it appears at the end of the splitter as per the example below.

What is the best way to keep pane order ?

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

3 comments
ADMIN
Nadezhda Tacheva
Posted on: 09 Mar 2021 15:16

Hi RĂ©mi,

Thank you for your suggestion!

We will take it into consideration once we start working on this issue.

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/.

Rémi
Posted on: 09 Mar 2021 06:00

When I write component I always add a Tag string parameter

This Tag should be copied in the SplitterPaneState class

With this parameter it's possible to be sure about pane order.

Code logic

  • Read state from GetState or from db
  • order (sort for example) using tag
  • SetState
ADMIN
Nadezhda Tacheva
Posted on: 02 Mar 2021 16:37

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/.