syncfusion blazor sfgrid prevent columns to ocupy entire grid width
1 Reply
SIGN IN To post a reply.
Please take a look at the included project. Is it possible to prevent columns to stretch and occupy the entire width of the screen and keep their original width? I have done all I could but to no avail.
Thanks
Ben Junior
Hi Ben Junior,
Based on the requirement, we would like to clarify that it is the default
behavior of the Grid component to adjust its width according to its parent
element. As a result, the width of GridColumns will also adjust based on the
Grid element's width, overriding any defined column widths. This behavior
ensures that the GridColumns adapt to the available width of the Grid.Regarding
your requirement, it is not feasible because when the Grid's width is set to
100% or the parent width is set to 100%, the component adjusts its columns to
fit the width of its immediate parent container. This occurs regardless of the
individual widths specified for each GridColumn. This is the default behavior
of the Grid component, so it is not possible to achieve the requested behavior.
Thank you for your understanding
Reference:
https://blazor.syncfusion.com/documentation/datagrid/columns#width
Alternatively, we suggest defining the width of one column as 'auto' so that
the other column is rendered with a specific width, and the remaining column
takes up the remaining space. Kindly refer to the modified code snippets below
for your reference.
|
<div style="width:100%;">
<SfGrid @ref="@mainGrid" DataSource="@OrderDataList" AllowSelection="true" AllowSorting="true" AllowFiltering="true" AllowPaging="true" AllowGrouping="true" AllowReordering="true" AllowResizing="true" AllowTextWrap="true" AllowMultiSorting="true" ShowColumnMenu="true" ShowColumnChooser="true" EnablePersistence="true">
<GridColumns> <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="50px" AutoFit="false"></GridColumn> <GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer" Width="90px" AutoFit="false"></GridColumn> <GridColumn Field=@nameof(OrderData.State) HeaderText="State" Width="50px" AutoFit="false"></GridColumn> <GridColumn Field=@nameof(OrderData.Country) HeaderText="Country" Width="auto" AutoFit="false"></GridColumn> </GridColumns> </SfGrid> </div> |
Regards,
Prathap Senthil
