Completed
Last Updated: 07 Apr 2020 17:46 by ADMIN
Manuel
Created on: 07 Apr 2020 09:17
Category: UI for Blazor
Type: Bug Report
0
Horizontal scrolling in Blazor grid does not respect set column width

According to the doc (https://docs.telerik.com/blazor-ui/components/grid/columns/width), 

"When all column widths are explicitly set and the cumulative column width is greater than the available Grid width, a horizontal scrollbar appears and all set column widths are respected."

I have a grid with a width of 1500px and a cumulative column width of 1750 pixels:

    <TelerikGrid Data="@datos"
                 Class="ns-grid-fitxatges"
                 PageSize="10"
                 Pageable="true"
                 Sortable="true"
                 Width="1500px"
                 Height="60vh">
        <GridColumns>
            <GridColumn Field="@nameof(LlistaFitxatgesDto.CodiInternActivitat)" Title="Codi Intern" Width="150px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.CodiExternActivitat)" Title="Codi Extern" Width="250px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Activitat)" Width="300px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.HoraFitxatge)" Title="@Loc["Fitxatge"]" Width="150px">
                <Template>
                    @{
                        var hora = (context as LlistaFitxatgesDto).HoraFitxatge.DateTime;
                        <span>@hora.ToString("dd/MM/yyyy HH:mm:ss")</span>
                    }
                </Template>
            </GridColumn>
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Sessio)" Title="@Loc["SessiĆ³"]" Width="180px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Sentit)" Title="@Loc["Sentit"]" Width="80px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.TipusDocument)" Title="@Loc["DOC"]" Width="70px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.DocParticipant)" Title="@Loc["Document"]" Width="90px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Nom)" Title="@Loc["Nom"]" Width="90px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Cognom1)" Title="@Loc["Cognom1"]" Width="90px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Cognom2)" Title="@Loc["Cognom2"]" Width="90px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Metode)" Title="@Loc["Metode"]" Width="80px" />
            <GridColumn Field="@nameof(LlistaFitxatgesDto.RutaXml)" Title="XML" Width="60px">
                <Template>
                    @{
                        var ruta = (context as LlistaFitxatgesDto).RutaXml;
                        <a href="@ruta">XML</a>
                    }
                </Template>
            </GridColumn>
            <GridColumn Field="@nameof(LlistaFitxatgesDto.Terminal)" Title="Terminal" Width="70px" />
        </GridColumns>
    </TelerikGrid>

The horizontal scroll bar appears all right, but the column widths are not respected. As shown in the image, the columns on the right are squeezed 

 

Any clues?

Thanks in advance

 

3 comments
ADMIN
Marin Bratanov
Posted on: 07 Apr 2020 17:46

I'm happy to hear you have things working! I'm now closing this issue.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Manuel
Posted on: 07 Apr 2020 17:24

Hi Martin

Thank you for your quick help. 

I have upgraded to version 2.10 and checked the CDNs as you said. I had some trouble with the styling, some CSS class seem to have changed since version 2.9, but now the grid seems to work as intended.

Thanks again

Manuel

ADMIN
Marin Bratanov
Posted on: 07 Apr 2020 12:15

Hello Manuel,

Could you check whether this works as expected for you with our latest version (2.10.0 at the time of writing) and that the styles and scripts you fetch match the version, especially if you use the CDN (read more on upgarding here).

I am also attaching a sample app that I tested this with and it seems to work as expected for me. I am also adding a short video from my experiments so you can confirm if I am missing something.

 

Regards,
Marin Bratanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.