Search code examples
cssmudblazor

MudDataGrid inside MudDialog

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.

Solution

  • Something like this?

    Datagrid dialog example

    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