If the width of the columns with autofit param set to true exceeds width of screen grid will get vertical scroll bars

[Admir Hodžic]

My grid has Height="100%"  columns in my grid has set  AutoFit="true".

If user screen width  is smaller than all columns after records load browser get beside horizontal scrolls also get vertical scrolls.

My grid loading data in async OnInitializedAsync methid.

When user land on page before data loads there is no svrols, grid is fitted 100% by height and withid in main div, there is no scols.

After data is loaded main grid get vertical grid whic I am trying to avoid.

How I can autofit columns of grid without causing height of grid to grow

[Admir Hodžic]

Apologies for spamming.

Looks like vertical scrolls is caused increasing grid for displaying its horizontal scrolls.

Same happening if user manly resize column width  to  cause horizontal scroll.

Grid grow for size of horizontal scroll and browser drows vertical scroll also 

Can we set grid Height using css calc etc Calc(100%-20px)

My grid has AllowPaging set, 

But strange thing I getting vertical scrolls even when my grid has fixed height etx (600px) and there is planty size 

[Vignesh Natarajan]

Hi Admir,  

 

Thanks for contacting Syncfusion support.  

 

Query: “Can we set grid Height using css calc etc Calc(100%-20px)” 

 

We understand that you are facing trouble with horizontal and vertical scroller in Grid. By default Grid height and width will be adjusted based on browser width and height. But if you want to adjust the Grid height and width to be adjusted inside a parent container, then we suggest you to define the Height and Width property of Grid as 100% and define static height / width or calculated height to immediate parent element to Grid.  

 

Refer the below code example.  

 

<div style="height: 550px;width: 950px"> 

    <SfGrid DataSource="@GridData" Height="100%" Width="100%" AllowPaging="true"> 

        <GridColumns> 

            <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Width="150"></GridColumn> 

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

. . .. . . .  

        </GridColumns> 

    </SfGrid> 

</div> 

 

 

So that Grid will be adjusted to immediate parent width and height. Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/scrolling/#responsive-with-parent-container  

 

If above solution does not match your requirement, kindly share more details about your issue along with video demonstration. It will be very help for us to validate the reported query at our end and provide solution as early as possible.   

 

Regards, 

Vignesh Natarajan 

[Admir Hodžic]

Thak you on help.

I did manage to have 100% height following samples from sidebar with responsive panels.

[Vignesh Natarajan]

Hi Admir,  

Thanks for the update.  

We are glad to hear that you have resolved your query.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan