How to set grid width dynamically ?

[Ben Junior]

I am using the solution on this link here to adjust the grid height when user resizes the browser. It works for height but I also need it for width. My grid has lots of columns, some autofit and others with a preset width. I need to have the horizontal scroll bar visible (I read the docs about grid and columns and I am aware how it works) and the only way to do that is by setting a width value for the grid. Setting it at 100% works only if the grid is wider than a certain width but if it gets smaller, the horizontal bar in the grid never shows up. Please, take a look at the attached picture. I need the horizontal scroll bar in the grid and not in the browser.

Attachment: ResizeGridWidth_23d2876.zip

[Rahul Narayanasamy]

Hi Ben, 

Greetings from Syncfusion. 

Query: How to set grid width dynamically ? 

We have validated your query and you want to set the Grid Width dynamically. You can achieve your requirement by using below way. If you want to be the Grid width as responsive, then you can explicitly define the width for parent component of the Grid. find the below code snippets for your reference. 

 

<div style="width: calc(100vw - 20rem);"> 

    @*Change the 20rem value based on your browser page layout*@ 

    <SfGrid @ref="GridObj" DataSource="@Orders" AllowPaging="true" Height="100%" Width="100%"> 

        <GridEvents DataBound="Data" TValue="Order"></GridEvents> 

        <GridPageSettings PageSize="@pager"></GridPageSettings> 

        <GridColumns> 

            . . . 

    </SfGrid> 

</div> 

Sample: https://www.syncfusion.com/downloads/support/forum/164269/ze/Sample728955427  

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

Please let us know if you have any concerns. 

Regards, 

Rahul 

[Ben Junior]

Thanks. It works perfectly. 

NOTE: I had already seen the reference link you included  and tried that solution but it didn't work cause it is missing the "width: calc(100vw - 10rem)" that you added in the sample.

[Rahul Narayanasamy]

Hi Ben, 

Thanks for the update. 

We are happy to hear that the provided solution was helpful to achieve your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Rahul