How to adjust the size and remove excessive space in the datgrid in mudblazor when height is set dynamically

56 Views Asked by At

I am using muddatagrid and I have set the height for the datagrid which changes dynamically based on screen size it dispays the scrollbar when the rowsperpage exceed the height. But the problem arises when the the number of records is less than the height or rowsperpage , there will be excessive space between the pager content and the records in bottom of the datagrid .

For example, if there is less than 10 records to display, then there will be a space in the bottom of the datagrid, between actual records and pager content(I have added paging).This happens in last page as well when there are multiple pages. In this case, I want to set the height to remaining pages and let it to be auto height in last page where records are lower than the mentioned height. How can I achieve this.

This is my code

<MudDataGrid Items="@Elements" Filterable="true" FilterCaseSensitivity="DataGridFilterCaseSensitivity.CaseInsensitive" RowsPerPage="@rowsperpage"  Context="context" FixedHeader="true" Height="@((Service.Height-100).ToString() + "px")">
    @*  @ref="dataGrid" Height="@((currentpage==(int)(Elements.Count()/rowsperpage))&&((Elements.Count()%rowsperpage) ==0) ? ("100px"):"auto")"
      ColumnResizeMode="@((currentpage==(int)(Elements.Count()/rowsperpage))&&((Elements.Count()%rowsperpage) ==0) ? ResizeMode.None : ResizeMode.Column)" @bind-CurrentPage="@currentpage">*@
<Columns>
<PropertyColumn Property="x => x.Number" Title="Nr" />
<PropertyColumn Property="x => x.Sign" />
<PropertyColumn Property="x => x.Name" />
<PropertyColumn Property="x => x.Position" />
<PropertyColumn Property="x => x.Molar" Title="Molar mass" />
</Columns>
<NoRecordsContent>
<MudText>No matching records found</MudText>

I have added mudblazor snippet for this issue.

https://try.mudblazor.com/snippet/ckQIEHaSwUQhyioT

I want to adjust the height if the record's height is lowerer than the fixed height of datagrid.

enter image description here

This is what I am getting now as output but what output I want is

[1]: https://i.stack.imgur.com/Sq5HK.png

When the height of all the data exceed the height of datagrid it will create a scrollbar, but when the data height is lower than the set height(dynamically set) it will create unnecessary . I want to fix that get output like the above image.

Thank you!!!

0

There are 0 best solutions below