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>

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.

2 Replies

NP Naveen Palanivel Syncfusion Team October 31, 2022 03:09 AM UTC

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



Please let us know if you have any concerns.


Naveen Palanivel

DK Daniel Koffler February 20, 2023 05:20 PM UTC

The "min-width" hack worked for me:

<div class="bg-white p-3 border h-100"></div>
<div class="mt-3 flex-grow-1 overflow-auto">

<!--Content flex container.-->
<div class="d-flex h-100">

<!--Does not work without 'min-width' definition.-->
<div style="min-width: 0">

<!--Data grid.-->
<SfGrid @ref="DataEntryGrid" DataSource="@PlanValues" SelectedRowIndex="0" Height="100%" AllowPaging="false"
AllowResizing="true" EnableHover="false" GridLines="GridLine.Horizontal" style="width: inherit">
<GridSelectionSettings Mode="SelectionMode.Both" Type="SelectionType.Multiple"
CellSelectionMode="CellSelectionMode.Box" EnableToggle="false"></GridSelectionSettings>
<GridEditSettings AllowEditing="false"></GridEditSettings>
<GridEvents TValue="PlanValue" RowSelected="RowSelectHandler" RowDeselected="RowDeSelectHandler">
<div @ref="_editForm" id="editForm" class="collapse collapse-horizontal bg-light border h-100">
<div class="h-100" style="width: 300px">

Live Chat Icon For mobile
Up arrow icon