Resize a column in a grid inside a pane of a splitter collapse the pane

2 Answers 64 Views
Grid Splitter
Sander
Top achievements
Rank 1
Iron
Sander asked on 26 Oct 2023, 01:28 PM

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

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 31 Oct 2023, 10:48 AM

Hi Sander,

When you start resizing one of the Grids, its table receives a pixel width. At this point, the other Grid starts expanding due to this CSS behavior - Grid expands in flexbox layout. A similar issue (but on initial load) will occur if you set one of the Grid Widths in pixels, while the other one remains at 100%.

To avoid the problem, please set a Size to one of the Splitter panes. It can be Size="50%" if you wish to keep them equal on initial page load.

I also see that the two Grids have the same @ref. Probably this is just on this test page, but I am mentioning it just in case.

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
0
Sander
Top achievements
Rank 1
Iron
answered on 01 Nov 2023, 01:55 PM | edited on 01 Nov 2023, 01:56 PM

Hi Dimo,

 

Thanks this solved the issue, now it's working.

The same @ref was only a copy paste thing, but was not part of the issue.

 

Kind regards,

 

Tags
Grid Splitter
Asked by
Sander
Top achievements
Rank 1
Iron
Answers by
Dimo
Telerik team
Sander
Top achievements
Rank 1
Iron
Share this question
or