Planned
Last Updated: 09 Sep 2021 08:33 by ADMIN
Scheduled for 2.28.0
Created by: Jaroslaw
Comments: 0
Category: Splitter
Type: Bug Report
13

I want to control if the SplitterPane is collapsed or not from code. When I bind the Collapsed parameter of a SplitterPane to a variable, on initial load the SplitterPane is Collaped/Expanded based on the provided value. But when I change the value during run time, the splitter doesn't react.

The same behavior is observed if I try to programmatically change the Size of the SplitterPane.

Declined
Last Updated: 04 May 2021 05:11 by ADMIN
Created by: Tamas
Comments: 1
Category: Splitter
Type: Feature Request
1
Currently only pixel and percentage values are available in SplitterPane Size, Min, Max attributes. Please enable other CSS length values, such as em, rem etc.
Completed
Last Updated: 20 Apr 2021 06:09 by ADMIN
Release 2.24.0

-----

ADMIN EDIT

At the moment, the splitter does not re-render when these events occur in order to improve performance. Thus, changing parameters of child components in those events does not have effect - it happens with "one event delay" because they do not re-render immediately.

For the majority of cases, responsive design (such as width and height set to 100%) will let the browser redraw the content as necessary.

-----

our usage of splitter requires a child conponent adjust its height based on the resized pane from splitter, using Parameter to pass height works with UI element binding (see the TelerikTextbox), no need to trigger StateHasChanged. 

but events on Resize/Expand/Collapse are handled to set the Height, it only update on UI of the parent page, but does not update to child. even with calling child's StateHasChanges after it is set. 

<TelerikTextBox @bind-Value="@height"></TelerikTextBox>

<div style="margin: 0; padding: 0; border-width: 0; height: 90vh;" >

    <TelerikSplitter Orientation="@SplitterOrientation.Vertical" Height="100%" Width="100%" OnResize="OnSplitterResized" OnCollapse="OnSplitterCollapsed" OnExpand="OnSplitterExpanded">
        <SplitterPanes>
            <SplitterPane Class="k-pane-flex" Min="0px" Max="600px" Collapsible="true">
                <ChildDiv Height="300px"></ChildDiv>
            </SplitterPane>
            <SplitterPane Class="k-pane-flex" Size="300px" Min="0px" Max="600px" Collapsible="true">
               <ChildDiv @ref="childDiv" Height="@height"></ChildDiv>
            </SplitterPane>
        </SplitterPanes>
    </TelerikSplitter>
</div>

@code {
    private string height = "300px";
    private ChildDiv childDiv;

    public async Task OnSplitterResized(SplitterResizeEventArgs args)
    {
        height = args.Size;

        await childDiv.Repaint();
    }

    public async Task OnSplitterCollapsed(SplitterCollapseEventArgs args)
    {
        if(args.Index == 0)
        {
            height = "600px";
        }

        await childDiv.Repaint();
    }

    public async Task OnSplitterExpanded(SplitterExpandEventArgs args)
    {
        if (args.Index == 1)
        {
            height = "300px";
        }

        await childDiv.Repaint();
    }
}



childDiv.razor:

<div style="border:solid; height: @Height">
    Child div, Height: <span>@Height</span>
</div>

@code {
    [Parameter]
    public string Height { get; set; }

    public async Task Repaint()
    {
       await InvokeAsync(StateHasChanged);
    }

}

 
Unplanned
Last Updated: 09 Mar 2021 15:16 by ADMIN
Created by: Rémi
Comments: 3
Category: Splitter
Type: Bug Report
3

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