Hello,

I have a question regarding the persistence of content when blazor splitter panes are collapsed and expanded.

Please refer to the attached project to see the issue that I'm having.

Regards,

Gerard

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.

-----

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

}