We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Squished Headers and Content

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?

3 Replies 1 reply marked as answer

BL Balamurugan Lakshmanan Syncfusion Team January 9, 2023 11:54 AM UTC

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


        <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>



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


Balamurugan Lakshmanan

Attachment: BlazorApp1_54b593cd.zip

Marked as answer

MC Mason Channer January 9, 2023 09:54 PM UTC

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

BL Balamurugan Lakshmanan Syncfusion Team January 11, 2023 06:58 AM UTC

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.  


Balamurugan L

Live Chat Icon For mobile
Up arrow icon