Make SfGrid Fit to available space

[Etienne Combourieu]

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.

[Naveen Palanivel]

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

[Daniel Koffler]

The "min-width" hack worked for me:

<div class="bg-white p-3 border h-100"></div>

<!--Content.-->

<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">

</GridEvents>

<GridColumns>

</GridColumns>

</SfGrid>

</div>

<div @ref="_editForm" id="editForm" class="collapse collapse-horizontal bg-light border h-100">

<div class="h-100" style="width: 300px">

</div>

</div>

</div>

</div>

</div>