Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 18 Oct 2023 13:59 by ADMIN
Release 4.6.0 (11 Oct 2023) (R3 2023)
Rémi
Created on: 02 Mar 2021 15:58
Category: Splitter
Type: Bug Report
6
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();
            }
        }
    }
}

5 comments
ADMIN
Nadezhda Tacheva
Posted on: 18 Oct 2023 13:59

Hi Mikael,

This scenario was handled by exposing a Visible parameter of the Splitter pane in UI for Blazor 4.6.

When adding or removing panes with an if-block, it is not possible to know at which index the pane has been inserted out of the box. Therefore, we recommend controlling the pane visibility through the dedicated parameter.

Here is an example implementation: https://blazorrepl.telerik.com/QRbEbivR56ZQCQGz40.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Mikael
Posted on: 18 Oct 2023 11:21
Bump...

It is still an issue, and the workaround sucks!
Bug was acknowledged (9 Mar 2021)
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/.

Create an account Log In
View
Type
Status
Category