Squished Headers and Content

[Mason Channer]

On initial load the datagrid shows squashed content and header columns.

1. How can I fix this?
2. How can I only display the datagrid once content has rendered?
   

[Balamurugan Lakshmanan]

Hi Mason Channer,

We have analyzed your query and we suggest you to use the Autofit feature of Grid to resolve your issues. AutoFit resizes the column to fit the widest cell’s content without wrapping. To enable AutoFit for specific columns, you need to set the AutoFit property to true.Kindly refer to  the attached code snippet and UG documentation for your reference. 

<SfGrid DataSource="@Orders" Height="315">

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"  AutoFit="true"></GridColumn>

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150" AutoFit="true"></GridColumn>

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" AutoFit="true" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120 "  AutoFit="true"></GridColumn>

    </GridColumns>

</SfGrid>

Kindly get back to us if you are facing further issue again.

Regards,

Balamurugan Lakshmanan

Attachment: BlazorApp1_54b593cd.zip

[Mason Channer]

Yes this worked my issue was I did not specify an initial Width in addition to AutoFit="true"

[Balamurugan Lakshmanan]

Hi Mason Channer,

Thanks for the update.  

We are glad to hear that your issue has been resolved from our solution.

Kindly get back to us if you have further queries.  

Regards,

Balamurugan L