如何使用 EditTemplate 绑定到 Blazorise DataGrid 中的 TextEdit

Question

I am new to Blazor and Blazorise...and while studying this component, I can't seem to find any material teaching how to bind a variable in a TextEdit inside an EditTemplate of a Blazorise DataGrid..

Inside my Blazorise DataGrid, I have a DataColumn (see code below):

<DataGridColumn
    Caption="Description"
    Editable="true"
    TItem="ProductVo"
    Field="@nameof(ProductVo.Description)">
        <DisplayTemplate>
            @($"{(context as ProductVo)?.Description}")
        </DisplayTemplate>
        <EditTemplate>
            <Validation UsePattern="true">              
                <TextEdit @bind-Text="context.CellValue" Text="@((string)context.CellValue)" Pattern="^.{3,200}$">
                    <Feedback>
                        <ValidationError>This field must be between 3 and 200 characters long.</ValidationError>
                    </Feedback>
                </TextEdit>
            </Validation>
        </EditTemplate>
</DataGridColumn>

In my <TextEdit> , I can display the value when editing by using the following code:

Text="@((string)context.CellValue)"

But it does not save, because I can't bind the context.CellValue using @bind-Text="context.CellValue" .

Please help me learn how to use Blazorise DataGrid, thanks in advance!

Answer 1

You're missing the TextChanged event, responsable to update the text on the context . This should work:

<TextEdit Text="@((string)context.CellValue)" TextChanged="@(v => ( (CellEditContext)context ).CellValue = v)" Pattern="^.{3,200}$">