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