Column headings are squashed together

[Cliff Conway]

I have a grid that shows the columns all squashed up into a very small space (see attached image - data rows not totally shown for privacy reasons). However, the data in the rows is not and reflects the settings (column widths) in the GridColumn settings:-

<SfGrid @ref="PriceComparisonGrid" DataSource="@PriceComparisons"

    AllowPaging="true"

    AllowSorting="true"

    AllowFiltering="true"

    AllowSelection="true"

    AllowReordering="true"

    AllowResizing="true"

    AllowGrouping="true"

    AllowExcelExport="true"

    AllowMultiSorting="true"

    AllowRowDragAndDrop="true"

    ShowColumnMenu="true"

    ShowColumnChooser="true"

    Toolbar="@ToolbarItems"

    ContextMenuItems="@(new List<object>() { "AutoFit", "AutoFitAll", "SortAscending", "SortDescending","Copy","FirstPage", "PrevPage","LastPage", "NextPage",

                "Edit" , "Delete" , "Save" , "Cancel" , "ExcelExport"})">

    <GridEvents OnToolbarClick="ToolbarClickHandler" ContextMenuItemClicked="@ContextClickHandler" TValue="PriceComparison"></GridEvents>

    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple" AllowDragSelection="true"></GridSelectionSettings>

    <GridPageSettings PageSize="15" PageSizes="@pagesize"></GridPageSettings>

    <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="300"></GridFilterSettings>

    <GridColumns>

        <GridColumn Field=@nameof(PriceComparison.ItemCode) HeaderText="Item" TextAlign="TextAlign.Left" IsPrimaryKey="true" Width="15"></GridColumn>

        <GridColumn Field=@nameof(PriceComparison.CompetitorName) HeaderText="Competitor" TextAlign="TextAlign.Left" IsPrimaryKey="true" Width="25"></GridColumn>

        <GridColumn Field=@nameof(PriceComparison.Reference) HeaderText="Reference" TextAlign="TextAlign.Left" Width="20"></GridColumn>

        <GridColumn Field=@nameof(PriceComparison.Product) HeaderText="Product" TextAlign="TextAlign.Left" Width="65"></GridColumn>

        <GridColumn HeaderText="EDW" TextAlign="TextAlign.Center">

            <GridColumns>

                <GridColumn Field=@nameof(PriceComparison.EDWPrice) HeaderText="Price" AllowGrouping="false" Format="£0.#0" TextAlign="TextAlign.Center" Width="12"></GridColumn>

                <GridColumn Field=@nameof(PriceComparison.EDWUOM) HeaderText="UOM" AllowGrouping="false" TextAlign="TextAlign.Center" Width="12"></GridColumn>

            </GridColumns>

        </GridColumn>

        <GridColumn HeaderText="Trade" TextAlign="TextAlign.Center">

            <GridColumns>

                <GridColumn Field=@nameof(PriceComparison.TradePrice) HeaderText="Price" AllowGrouping="false" Format="£0.#0" TextAlign="TextAlign.Center" Width="12"></GridColumn>

            </GridColumns>

        </GridColumn>

        <GridColumn HeaderText="Competitor" TextAlign="TextAlign.Center">

            <GridColumns>

                <GridColumn Field=@nameof(PriceComparison.CompetitorPrice) HeaderText="Price" AllowGrouping="false" Format="£0.#0" TextAlign="TextAlign.Center" Width="12"></GridColumn>

                <GridColumn Field=@nameof(PriceComparison.UOM) HeaderText="UOM" AllowGrouping="false" TextAlign="TextAlign.Center" Width="12"></GridColumn>

            </GridColumns>

        </GridColumn>

    </GridColumns>

</SfGrid>

Attachment: Syncfusion_Grid_Issue_2c35c527.zip

[Cliff Conway]

I have discovered the problem. If i include the AllowRowDragAndDrop, as shown below, the problem occurs. Is this a bug?

AllowRowDragAndDrop="true"

[Monisha Saravanan]

Hi Cliff,

Greetings from Syncfusion support.

Query: “I have a grid that shows the columns all squashed up into a very small space”

We have checked your shared query and we could see that you have rendered column with minimal width. In DataGrid we would render the column based on the defined Width at column level. To render the column with larger space we suggest you to set the width with higher pixels(150 px approximately) or we suggest you to enable the Autofit property of DataGrid so that it will fit the width based on the content.

 <GridColumn Field=@nameof(PriceComparison.ItemCode) HeaderText="Item" TextAlign="TextAlign.Left" IsPrimaryKey="true" Width="15"></GridColumn>

        <GridColumn Field=@nameof(PriceComparison.CompetitorName) HeaderText="Competitor" TextAlign="TextAlign.Left" IsPrimaryKey="true" Width="25"></GridColumn>

        <GridColumn Field=@nameof(PriceComparison.Reference) HeaderText="Reference" TextAlign="TextAlign.Left" Width="20"></GridColumn

 

Reference: https://blazor.syncfusion.com/documentation/datagrid/columns#autofit-columns

If the reported issue still persists then kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet along with model class.
2. Share us whether you are facing issue only when enabling rowdraganddrop.
3. Share us image snippet with and without enabling the RowDragandDrop.
4. Share us the Syncfusion Nuget version used.
5. Share us the video demonstration of the issue.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha