Telerik Forums
UI for Blazor Forum
1 answer
24 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>


Nadezhda Tacheva
Telerik team
 answered on 28 May 2025
1 answer
18 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
175 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
559 views
I have this structure:


+ Menu - Navigation Page Load to div "Desktop"
   + div desktop
      + Toolbar
      + Splitter Vertical
           +Splitterpane
                 -Overview Grid
           +Splitterpane
                 - Detail
                       +TelerikEditForm
                            -lot of stuff-

         
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. :-)

Peter
Top achievements
Rank 1
Iron
Iron
 answered on 09 Nov 2023
2 answers
193 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.ProductIdWidth="120px" MaxResizableWidth="250" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductNameId="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
        <GridColumn Field=@nameof(ProductDto.UnitPriceWidth="140px" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStockWidth="160px" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnitWidth="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.DiscontinuedWidth="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.ProductIdWidth="120px" MaxResizableWidth="250" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductNameId="productName" Width="200px" MinResizableWidth="120" Title="Name"/>
        <GridColumn Field=@nameof(ProductDto.UnitPriceWidth="140px" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStockWidth="160px" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnitWidth="210px" MinResizableWidth="100" MaxResizableWidth="400" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.DiscontinuedWidth="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");
    }
}
Sander
Top achievements
Rank 1
Iron
 updated answer on 01 Nov 2023
0 answers
81 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
 updated question on 23 Oct 2023
1 answer
96 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?
Dimo
Telerik team
 answered on 10 Oct 2023
1 answer
173 views
 Hello,
 
 How to collapse the pane using their collapse/expand buttons  or double-clicking the split bars,
 so that the minimum size the pane is taken into account.
 Currently the whole panel is closed.
 
 Thank you very much
Dimo
Telerik team
 answered on 22 Mar 2023
1 answer
203 views
If the splitter pane is collapsed,  its content is disposed and re-initialized again when the user expands the pane.

Is there a way to keep a pane content? 
Nadezhda Tacheva
Telerik team
 answered on 25 Jan 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?