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