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

Hello,

I'm currently using the Splitter Pane in a UI where I have two grids (one is a config grid and one is a report). The splitter allows me to resize each section vertically to see more of the report or the grid. It works well, but there is a bug I've noticed where if I click and drag it to the end and scroll past (making it 100%), even though I've released my finger from clicking, when my mouse scrolls back into the pane, it will be stuck scrolling as if my finger was still clicking the mouse button. It results in very weird behavior. If you allow the pane to go to 100% it is very difficult to not have this experience. My only way to mitigating is not allowing it to scroll as far, but it still still happens if you scroll outside of the pane fast enough.

If you go to your example here, you can witness the same issue. 
https://docs.telerik.com/blazor-ui/components/splitter/size

Any idea on a way to mitigate this? I think if the mouse leaves the pane, it should stay where it was scrolled to and assume you are no longer scrolling. It is a great component otherwise!

Thanks!

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

The Splitter separator has role="separator" attribute. When such a role is set and the separator is focusable, it is required that aria-valuenow attribute is also set. Currently, the Splitter separator does not have such an attribute.

From our point of view, the expected result is - NVDA / Narrator should announce separator value with respect to the position value for the separator (or no separator value at all).

If I add a Grid inside pane 1, pane 2 doesn't expand when clicked.

Reproduction: https://blazorrepl.telerik.com/cxkqwAFj38FBkmbP09.

For reference, collapsing and expanding panes works well when adding another component or HTML content: https://blazorrepl.telerik.com/cHEqmAlN35ZSfRKi13.

===

ADMIN EDIT

===

For the time being, a possible workaround is to alter the configuration to allow the user to resize and expand the pane. Here is an example: https://blazorrepl.telerik.com/mdEKcgFZ45D7rJU013.

https://blazorrepl.telerik.com/QwFOPdYV18zmbgUK59

In this REPL demo select the splitter and then slightly move the mouse left and right or up and down and the slitter will move itself all the way to the left without the mouse going there. So this also means that if you slowly move the mouse to the right the splitter goes to the left.

It happens in all the browser I tested which include Firefox, Chrome and Edge.

When trying to drag/resize the splitter to the sides on a touch screen, you are only able to move the splitter a little bit before the whole screen starts moving.

To reproduce, go to the splitter demo (Blazor Splitter Demos - Overview | Telerik UI for Blazor), open the inspector, and change the view to a mobile device. I tested specifically on the iPad option.

I've tested the behavior on an Amazon Fire 10, One Plue 8T, and a Google Pixel 4, and all 3 of them have displayed the behavior. I also tested on a 7th gen Ipad (in safari) and found the control did indeed work as expected there.

Hello,

We render a Splitter with just one pane and then add another pane programmatically. The new pane triggers a JavaScript error if resized. The error disappears if the pane is collapsed and then expanded. Another possible workaround is to render the pane with zero size.

Test page:

<TelerikButton OnClick="@BugHandler">Enable second pane (bug)</TelerikButton>
<br /><br />

<TelerikSplitter Orientation="SplitterOrientation.Vertical" Height="200px">
    <SplitterPanes>
        <SplitterPane>
            <div>First pane</div>
        </SplitterPane>
        @{
            if (EnablePane2)
            {
                <SplitterPane Collapsible="true">
                    <div>
                        Second pane
                    </div>
                </SplitterPane>
            }
        }
    </SplitterPanes>
</TelerikSplitter>

<br />
<TelerikButton OnClick="@WorkaroundHandler">Enable second pane (workaround)</TelerikButton>
<br /><br />

<TelerikSplitter Orientation="SplitterOrientation.Vertical" Height="200px">
    <SplitterPanes>
        <SplitterPane>
            <div>First pane</div>
        </SplitterPane>
        <SplitterPane Collapsible="@Collapsible2" Resizable="@Resizable2" Size="@Size2" Collapsed="@Collapsed2">
            <div>
                Second pane
            </div>
        </SplitterPane>
    </SplitterPanes>
</TelerikSplitter>

@code {
    bool EnablePane2 { get; set; } = false;

    bool Collapsible2 { get; set; }
    bool Resizable2 { get; set; }
    string Size2 { get; set; } = "0px";
    bool Collapsed2 { get; set; } = true;

    void BugHandler()
    {
        EnablePane2 = true;
    }

    void WorkaroundHandler()
    {
        Collapsible2 = true;
        Resizable2 = true;
        Size2 = "";
        Collapsed2 = false;
    }
}

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.

-----

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.

-----

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

}