MudBlazor MudDataGrid Multi-line Edit

Question

How do you implement a multi-line text edit field (MudTextField) in the data grids edit form?

I cannot find any guidance on how to implement this.

I am using the form edit mode, not the in-line editor. I tried an edit template but the MudTextField did not show up at all in the edit form.

Answer 1

As you said you tried, you can use an EditTemplate

    <PropertyColumn Property="x => x.Name" >
        <EditTemplate>
            <MudTextField MaxLines="4" @bind-Value="@context.Item.Name" Variant="Variant.Outlined" AutoGrow/>
        </EditTemplate>
    </PropertyColumn>

You can either use AutoGrow or Lines="{value greater than 1}" to use multilines

MudSnippet

@using System.Net.Http.Json
@using System.Collections.Generic;
@using System.Text.Json.Serialization;
@inject HttpClient httpClient
    
    <MudDataGrid T="Element" Items="@Elements.Take(4)" ReadOnly="false" EditMode="@DataGridEditMode.Form"
        Bordered="true" Dense="true">
        <Columns>
            <PropertyColumn Property="x => x.Number" Title="Nr" IsEditable="false" />
            <PropertyColumn Property="x => x.Sign" >
                <EditTemplate>
                    <MudTextField MaxLines="4" @bind-Value="@context.Item.Sign" Variant="Variant.Outlined" Lines="2"/>
                </EditTemplate>
            </PropertyColumn>
            <PropertyColumn Property="x => x.Name" >
                <EditTemplate>
                    <MudTextField MaxLines="4" @bind-Value="@context.Item.Name" Variant="Variant.Outlined" AutoGrow/>
                </EditTemplate>
            </PropertyColumn>
            <PropertyColumn Property="x => x.Molar" Title="Molar mass" />
            <TemplateColumn CellClass="d-flex justify-end">
                <CellTemplate>
                    <MudIconButton Size="@Size.Small" Icon="@Icons.Material.Outlined.Edit" OnClick="@context.Actions.StartEditingItemAsync" />
                </CellTemplate>
            </TemplateColumn>
        </Columns>
    </MudDataGrid>
    
    @code {
        private IEnumerable<Element> Elements = new List<Element>();
    
        protected override async Task OnInitializedAsync()
        {
            Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
        }

        public class Element
        {
            public string Group { get; set; }
            public int Position { get; set; }
            public string Name { get; set; }
            public int Number { get; set; }
    
            [JsonPropertyName("small")]
            public string Sign { get; set; }
            public double Molar { get; set; }
            public IList<int> Electrons { get; set; }
    
            public override string ToString()
            {
                return $"{Sign} - {Name}";
            }
        }
    }