JavaScript error when resizing dynamic splitter pane

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 08 Jul 2022 12:11 by ADMIN

Markus

Created on: 09 Feb 2022 16:10

Category: Splitter

Type: Bug Report

JavaScript error when resizing dynamic splitter pane

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

2 comments

ADMIN

Dimo

Posted on: 08 Jul 2022 12:11

Hi all,

Another easy workaround is to recreate the Splitter after adding a new pane.

<TelerikButton OnClick="@AddSplitterPane">Add SplitterPane</TelerikButton>

<TelerikLoaderContainer Visible="@(!ShowSplitter)" />

@if (ShowSplitter && panes.Count > 0)
{
    <TelerikSplitter Width="100%" Height="500px">
        <SplitterPanes>
            @foreach (var p in panes)
            {
                <SplitterPane>
                    <div>@p.Content</div>
                </SplitterPane>
            }
        </SplitterPanes>
    </TelerikSplitter>
}
@code {
    private List<SplitterPane> panes { get; set; } = new();
    private int index { get; set; } = 0;
    bool ShowSplitter { get; set; } = true;

    async Task AddSplitterPane()
    {
        Random random = new Random();
        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        panes.Add(new SplitterPane
        {
            Index = index++,
            Content = new string(Enumerable.Repeat(chars, 5).Select(s => s[random.Next(s.Length)]).ToArray())
        });

        ShowSplitter = false;
        await Task.Delay(1000);
        ShowSplitter = true;
    }
    class SplitterPane
    {
        public String Content { get; set; }
        public int Index { get; set; } = 0;
    }
}

Regards,
Dimo
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/.

Josh777

Posted on: 02 Jul 2022 20:52

Getting the same JavaScript error: Cannot read properties of undefined (reading 'min')

<TelerikButton OnClick="@AddSplitterPane">Add SplitterPane</TelerikButton>
@if(panes.Count > 0)
{
    <TelerikSplitter  Width="100%" Height="500px">
        <SplitterPanes>
            @foreach (var p in panes)
            {
                <SplitterPane>
                    <div>@p.Content</div>
                </SplitterPane>
            }      
        </SplitterPanes>
    </TelerikSplitter>
}
@code {
    private List<SplitterPane> panes {get;set;} = new();
    private int index {get;set;} = 0;
    async Task AddSplitterPane()
    {
        Random random = new Random();
        const string chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        panes.Add(new SplitterPane {
            Index = index++,
            Content = new string(Enumerable.Repeat(chars, 5).Select(s => s[random.Next(s.Length)]).ToArray())
        });
    }
    class SplitterPane 
    {
        public String Content { get; set; }
        public int Index { get; set; } = 0;
    }
}