Ok, I have problem with MudDataGrid being inside MudDialog. My data grid has many items, so it's taller than the dialog. But I would like to get the outcome that Dialog doesn't show any scroll. So that grid is only scrollable, something like that:
|--------------------|
| |
| |--------------| |
| | this is grid | |
| | | |
| | | |
| | | |
| | | |
| | | |
| |------------- | |
| |
| Other stuff |
----------------------
| OK Cancel |
----------------------
The first thing is dialog itself - without any scrolls Then we have grid with scroll Then some other stuff (MudText) And the grid footer with OK and Cancel buttons.
I am struggling with this grid for couple of hours now. But I am from backend, not front, so I need some help with that.
Something like this?
There's built-in DialogOptions that you can use to configure the dialog.
In this example, I set the MaxWidth
and FullWidth
in DialogOptions
. There's also options to fullscreen the dialog in the examples
<MudButton OnClick="OpenDialogAsync" Variant="Variant.Filled" Color="Color.Primary">
Datagrid + Dialog
</MudButton>
@code {
private readonly DialogOptions _maxWidth = new() { MaxWidth = MaxWidth.Medium, FullWidth = true };
private async Task OpenDialogAsync()
{
var dialog = await DialogService.ShowAsync<DialogScrollableExample_Dialog>("My Title",_maxWidth);
var result = await dialog.Result;
}
}
Then in the Dialog, I give the MudDataGrid
a Height
and a FixedHeader
so that the headers are fixed when scrolling. There's also a FixedFooter
.
Also, applied an overflow:hidden
on MudDialog.ContentStyle
to hide the scroll from the dialog.
<MudDialog Style="outline:1px solid green;" ContentStyle="outline:1px solid red;overflow:hidden;">
<TitleContent>
<MudSlider T="int" Max="100" Min="20" @bind-Value="@_height" Variant="Variant.Outlined">DataGrid Height Slider = @_height</MudSlider>
</TitleContent>
<DialogContent>
<MudDataGrid Items="@Elements.Take(100)" FixedHeader="true" Height=@($"{_height}vh;")>
<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>
</MudDataGrid>
</DialogContent>
<DialogActions>
<MudButton OnClick="Cancel">Cancel</MudButton>
<MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
</DialogActions>
</MudDialog>
Demo 👉 MudBlazor Snippet