or
1 answer
79 views
I have one page in my existing .NET Framework app that uses RadSplitter, RadPane and RadScheduler where the RadScheduler is using a web handler to construct and feed the Scheduler with the data to populate it. Is it just a matter of reworking the UI and adjusting the web handler to a an endpoint or service, or do I have to totally rework data binding? This could was written over 15 years ago and I really don't want to have to rewrite it.
Thanks in advance.
Matt.
1 answer
39 views
Hi,
I'm using the CSS zoom property to scale my website and noticed that the Telerik Splitter does not behave correctly when a zoom level is applied.
I've adjusted the Blazor Splitter demo to reproduce the issue. I simply added a css Class with the zoom property set and applied it to the TelerikSplitter Element. After that resizing of the the splitter panes by dragging the splitter handle is not possible anymore:
https://blazorrepl.telerik.com/cgYBGVEC17NDglUz26
Given that CSS zoom is supported by all major browsers according to Can I Use (https://caniuse.com/css-zoom), is the Splitter component expected to work correctly in a zoomed container, or is this currently a known limitation?
Thanks!
Edit:
This issue seems to affect not only the Splitter but also other draggable elements. For example, resizing Grid columns is affected as well.
1 answer
186 views
How do I align the left pane to the top instead of it being centered vertically? The CSS provided by AI does not seem to override it.
<TelerikSplitter Orientation="SplitterOrientation.Horizontal">
<SplitterPanes>
<SplitterPane Size="40%" Min="30%" Max="70%"
Collapsible="false"
Scrollable="true"
Class="gsi-align-top-pane">
<TelerikSkeleton Height="600px" Width="100%" />
</SplitterPane>
<SplitterPane Collapsible="false" Min="30%" Max="70%" Scrollable="true">
<TelerikGridLayout Class="grid-layout">
<GridLayoutRows>
<GridLayoutRow />
<GridLayoutRow />
<GridLayoutRow />
</GridLayoutRows>
<GridLayoutItems>
<GridLayoutItem Row="1">
<TelerikSkeleton Height="75px"
Class="k-display-inline-block" />
</GridLayoutItem>
<GridLayoutItem Row="2">
<table class="k-grid">
@for (int i = 0; i < 10; i++)
{
<tr class=skeleton-table-row>
<td class="skeleton-table-col">
<TelerikSkeleton Width="100%"></TelerikSkeleton>
</td>
<td class="skeleton-table-col">
<TelerikSkeleton Width="100%"></TelerikSkeleton>
</td>
<td class="skeleton-table-col">
<TelerikSkeleton Width="100%"></TelerikSkeleton>
</td>
<td class="skeleton-table-col">
<TelerikSkeleton Width="100%"></TelerikSkeleton>
</td>
</tr>
}
</table>
</GridLayoutItem>
<GridLayoutItem Row="3">
<TelerikSkeleton Height="75px"
Class="k-display-inline-block" />
</GridLayoutItem>
</GridLayoutItems>
</TelerikGridLayout>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
.gsi-align-top-pane {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
padding-top: 0 !important;
margin-top: 0 !important;
height: 100% !important;
min-height: 0 !important;
}
.gsi-align-top-pane > * {
margin-top: 0 !important;
margin-bottom: 0 !important;
align-self: flex-start !important;
}
.gsi-align-top-pane .k-skeleton {
margin-top: 0 !important;
margin-bottom: 0 !important;
align-self: flex-start !important;
/* Remove any auto margin that may be set by Telerik */
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-block: 0 !important;
margin: 0 !important;
}
Dimo
Telerik team
answered
on
03 Apr 2026
1 answer
159 views
Can you tell me how I can define the Grid to fill the entire splitter area without trying to guess?
<TelerikGrid Data=@Sessions
SelectedItems="SelectedSessions"
Pageable=true
PageSize="20"
Height="80%"
SelectionMode=GridSelectionMode.Single
SelectedItemsChanged="@((IEnumerable<Gsi.Customer.Models.Session> m) => OnSessionSelected(m))">
<GridColumns>
<GridColumn Field=@nameof(Session.TimestampDisplayName) Title="Timestamp" />
<GridColumn Field=@nameof(Session.TimeZoneOffset) Title="Time Zone Offset" />
</GridColumns>
</TelerikGrid> <TelerikSplitter Orientation="SplitterOrientation.Horizontal" Height="75vh">
<SplitterPanes>
<SplitterPane Size="50%" Min="30%" Max="70%" Collapsible="false" Class="k-scrollable">
</SplitterPane>
<SplitterPane Min="30%" Max="70%" Collapsible="false" Class="k-sc </SplitterPane>
</SplitterPanes>
</TelerikSplitter>
1 answer
91 views
I'm using a splitter. But, my contents can go longer than the exposed area defined by the splitter (height). Do you have a scroll viewer for blazor or a similar layout control?
<TelerikSplitter Orientation="SplitterOrientation.Horizontal" Height="70vh">
<SplitterPanes>
<SplitterPane Size="40%" Min="30%" Max="70%" Collapsible="false">
Dimo
Telerik team
answered
on
20 May 2025
1 answer
291 views
I am having a really strange issue with an animation container. For reference, this animation container appears in one half of a Splitter, and the container includes a Grid which loads data.
When I prompt the animation container, with the container animation set to "SlideLeft", the container immediately appears in middle of the splitter, but then animates to the left before jumping back.
The confusing part is that I have other virtually identical implementations of the animation container that do not exhibit this issue. The animation container content is provided generically through a render fragment. Showing and hiding of the container is handled through a custom "container stack" component we have written, but this is common between the working and stuttering containers.
Any thoughts as to what would cause this? We are using the same parent container for multiple animation containers, although only one is shown on top at a time.
Tsvetomir
Telerik team
answered
on
27 Jun 2024
2 answers
757 views
I have this structure:
Problem: How to get an infromation if the EditForm IsModified() and someone uses the navigation to fire an other page.
User request: Please show a dialog to ask user for abort or save.
So I was looking for an OnBlur() Event. But there is no such an event I can Intercept the Action.
I've no idea how I can solve this request. Ok, no simple way... :-)
This is such a typical situation that I can't imagine it can't be solved with Blazor's built-in tools. But I currently have tomatoes on my eyes. Probably, I can't see the forest for the trees right now.
Any hint would be gratefully received. :-)
+ Menu - Navigation Page Load to div "Desktop"
+ div desktop
+ Toolbar
+ Splitter Vertical
+Splitterpane
-Overview Grid
+Splitterpane
- Detail
+TelerikEditForm
-lot of stuff-
User request: Please show a dialog to ask user for abort or save.
So I was looking for an OnBlur() Event. But there is no such an event I can Intercept the Action.
I've no idea how I can solve this request. Ok, no simple way... :-)
This is such a typical situation that I can't imagine it can't be solved with Blazor's built-in tools. But I currently have tomatoes on my eyes. Probably, I can't see the forest for the trees right now.
Any hint would be gratefully received. :-)
Peter
Top achievements
Rank 1
Iron
Iron
Rank 1
Iron
Iron
answered
on
09 Nov 2023
2 answers
284 views
Hello,
I have a splitter with 2 pane's and in each pane a grid with sizable columns.
When one resizes a column in a grid inside a pane of the splitter one of the panes collapses instead of resizing the column.
Please note: Only the first time when the page is opened it is going not good!
Kind regards,
demo code to reproduce:
@using TelerikBlazorDemos.DataAccess.Services
@using TelerikBlazorDemos.DataAccess.Dto
@page "/grid/column-resizing"
@inject HttpClient http
<DemoConfigurator>
<DemoConfiguratorColumn Description="Auto Fit Columns">
<TelerikButton OnClick="@AutoFitAllColumns">AutoFit All Columns</TelerikButton>
<TelerikButton OnClick="@AutoFitColumn">AutoFit Name Column</TelerikButton>
</DemoConfiguratorColumn>
</DemoConfigurator>
<TelerikSplitter Orientation="@SplitterOrientation.Horizontal">
<SplitterPanes>
<SplitterPane Collapsible="false" >
<TelerikGrid @ref="Grid"
Data="@GridData"
Width="100%"
Height="350px"
Sortable="true"
Resizable="true"
Pageable="true">
<GridColumns>
<GridColumn Field=@nameof(ProductDto.ProductId) Width="120px" MaxResizableWidth="250" Title="ID" />
<GridColumn Field=@nameof(ProductDto.ProductName) Id="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
<GridColumn Field=@nameof(ProductDto.UnitPrice) Width="140px" Title="Price" />
<GridColumn Field=@nameof(ProductDto.UnitsInStock) Width="160px" Title="In stock" />
<GridColumn Field=@nameof(ProductDto.QuantityPerUnit) Width="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
<GridColumn Field=@nameof(ProductDto.Discontinued) Width="160px" Title="Discontinued" />
</GridColumns>
</TelerikGrid>
</SplitterPane>
<SplitterPane Collapsible="false" >
<TelerikGrid @ref="Grid"
Data="@GridData"
Width="100%"
Height="350px"
Sortable="true"
Resizable="true"
Pageable="true">
<GridColumns>
<GridColumn Field=@nameof(ProductDto.ProductId) Width="120px" MaxResizableWidth="250" Title="ID" />
<GridColumn Field=@nameof(ProductDto.ProductName) Id="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
<GridColumn Field=@nameof(ProductDto.UnitPrice) Width="140px" Title="Price" />
<GridColumn Field=@nameof(ProductDto.UnitsInStock) Width="160px" Title="In stock" />
<GridColumn Field=@nameof(ProductDto.QuantityPerUnit) Width="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
<GridColumn Field=@nameof(ProductDto.Discontinued) Width="160px" Title="Discontinued" />
</GridColumns>
</TelerikGrid>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
@code {
private ProductService _productService;
private ProductService ProductService
{
get
{
if(_productService == null)
{
_productService = new ProductService(http);
}
return _productService;
}
}
public TelerikGrid<ProductDto> Grid { get; set; }
public IEnumerable<ProductDto> GridData { get; set; }
protected override async Task OnInitializedAsync()
{
GridData = await ProductService.GetProducts();
}
private async Task AutoFitAllColumns()
{
await Grid.AutoFitAllColumnsAsync();
}
private async Task AutoFitColumn()
{
await Grid.AutoFitColumnAsync("productName");
}
}
0 answers
153 views
In a TelerikSplitter when I click a button that causes data to load, every element at that level and lower gets the attribute tabindex="-1" for a split second and then the property is removed. Is there any function of the Splitter or Loader/LoaderContainer that would do this? This causes explicitly set tabindex attributes to be completely removed.
Update/Solution:
I determined that this was the result of an intermediate Blazor component calling some JavaScript to disable tabbing on load. This issue is unrelated to the Telerik LoaderContainer.
David
Top achievements
Rank 1
Rank 1
updated question
on
23 Oct 2023
1 answer
159 views
In my current development project, which is based on Blazor, I extensively use the splitter in conjunction with BlazorSize to manage overflow and reconstruct the scrollbar.
While this setup works effectively, the user experience is not optimal. This is because the scrollbar, computed by BlazorSize, only appears after the mouse button is released. I considered utilizing the SizeChanged event to address this issue, but it too is triggered only after the mouse button is released.
Is there a way to configure the Splitter to trigger these events during the dragging motion, rather than waiting until the mouse button is released?
While this setup works effectively, the user experience is not optimal. This is because the scrollbar, computed by BlazorSize, only appears after the mouse button is released. I considered utilizing the SizeChanged event to address this issue, but it too is triggered only after the mouse button is released.
Is there a way to configure the Splitter to trigger these events during the dragging motion, rather than waiting until the mouse button is released?
Dimo
Telerik team
answered
on
10 Oct 2023
