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: 09 Mar 2026 14:23 by Oliver

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

5 comments

Oliver

Posted on: 09 Mar 2026 14:23

Great! Thank you very much!

ADMIN

Dimo

Posted on: 09 Mar 2026 14:21

Hi Oliver,

Hmm, this was closed in our internal bug tracker, because the error was no longer reproduced with the code that we used as a reference. It matches the first test page in this thread.

Now I see that the second test page here still exhibits the error, so I reopened the bug in our backlog and updated the reproduction code. The fix may still take some time to release, after we address other bugs with higher priority.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Oliver

Posted on: 09 Mar 2026 12:48

This bug has been open for 4 years?! Seriously?

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