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

Make SfGrid Fit to available space

Hello support team,

i have the following code, using TailWind and Blazor : 

<div class="flex flex-col gap-6">
<SfGrid @ref="_grid" Height="600" DataSource="@Tenancies" EnableHeaderFocus="true" AllowSelection="true" AllowFiltering="true" AllowSorting="true" AllowPaging="true" EnableVirtualization="false" EnableHover="true">
<GridPageSettings PageSizes="@PageSizes" PageCount="5" PageSize="20"></GridPageSettings>
<GridColumns>
...
</GridColumns>
</SfGrid>
</div>


My problem here is that I would like to make the SfGrid fit to the available space left on the screen once the other divs are displayed. I've tried modifying the Height property to X% without success. 
The problem being the following : 
   - I would like to have no scroll bar on the page but only in the grid. (in case the grid's height exceeds the screen one)
  - Have the grid paging available at the bottom of the screen at all time.
  - Have the grid size adapt to the size of the tab.

I kindly ask for your help on that matter. If something isn't clear to you in my explanation, please let me know.


1 Reply

NP Naveen Palanivel Syncfusion Team October 30, 2022 10:09 PM

Hi Etienne,


Greetings from Syncfusion support.


We checked your query and we like to inform that, we can set only width or height 100% to grid. It does not take height or weight of grid like  40 % or 90 % . we can customize the pagination inside pagerTemplate and we have already discussed about this  similar topics detailly in our UG documentation. Kindly refer the documentation link shared.


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

https://blazor.syncfusion.com/documentation/datagrid/paging#pager-template

https://blazor.syncfusion.com/documentation/datagrid/scrolling#set-width-and-height


Please let us know if you have any concerns.


Regards,

Naveen Palanivel


Loader.
Live Chat Icon For mobile
Up arrow icon