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