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

[Sander]

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

    }

}

[Dimo]

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

[Sander]

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,