Insert textbox in RadzenDataGrid

Question

I have a RadzenDataGrid that has a series of columns with data, one of this is a string that I want to represent as a textbox so the user can input data and then when clicking a "submit" execute the stored procedure that updated these fields, I don't understand how to do the 2 way binding as it's giving me error when I try to ad the "@bind-Value=@Comments" property.

my datagrid has the following:

<RadzenDataGrid AllowSorting="true" AllowColumnReorder="true"  AllowMultiColumnSorting="true"  PageSize="40" AllowFiltering="true" FilterMode="FilterMode.Simple" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@FilteredExpendituresList" TItem="Expenditure" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
    <Columns>
        <RadzenDataGridColumn TItem="Expenditure" Property="EmployeeName" Title="Employee Name" Visible=@FilteredExpendituresList.Any(x=>x.EmployeeName is not null) />
        <RadzenDataGridColumn TItem="Expenditure" Property="EmployeeNumber" Title="Employee Number" Sortable="false" Width="125px" Visible=@FilteredExpendituresList.Any(x=>x.EmployeeNumber is not null)  TextAlign="TextAlign.Center"/>
        <RadzenTextBox  @bind-Value=@Comment  Class="w-100" />
    </Columns>
</RadzenDataGrid>

and my object filling receives:

[Parameter]
    public IEnumerable<Expenditure> FilteredExpendituresList { get; set; } = null!;

with the class being:

public class Expenditure
{
    public string EmployeeName { get; set; }

    public string EmployeeNumber { get; set; }

    public string Comment { get; set; }
}

How should I do so the datagrid can have the 2 way binding and have the Comment field that is input being passed from the textbox to the object?

score 1 · Accepted Answer · answered Oct 13 '22 at 09:24

You need to use Template:

<RadzenDataGrid AllowSorting="true" AllowColumnReorder="true" AllowMultiColumnSorting="true" PageSize="40" AllowFiltering="true" FilterMode="FilterMode.Simple" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Data="@FilteredExpendituresList" TItem="Expenditure" AllowPaging="true" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
    <Columns>
        <RadzenDataGridColumn TItem="Expenditure" Property="EmployeeName" Title="Employee Name" Visible=@FilteredExpendituresList.Any(x => x.EmployeeName is not null) />
        <RadzenDataGridColumn TItem="Expenditure" Property="EmployeeNumber" Title="Employee Number" Sortable="false" Width="125px" Visible=@FilteredExpendituresList.Any(x => x.EmployeeNumber is not null) TextAlign="TextAlign.Center" />

        <RadzenDataGridColumn TItem="Expenditure">
            <Template Context="data">
                <RadzenTextBox @bind-Value="@data.Comment" Class="w-100" />
            </Template>
        </RadzenDataGridColumn>

    </Columns>
</RadzenDataGrid>

Documentation

score 1 · Answer 2 · answered Oct 13 '22 at 09:30

You can use the Template RenderFragment<T> inside a RadzenDataGridColumn if you have a global save.

If you want to use the EditTemplate RenderFragment<T>, you need to tell the Data Grid component that you want to edit by using a RadzenDataGrid<T> referenced object and call EditRow(T item). It will then go into an edit state.

Within a RadzenDataGridColumn you need to then add an EditTemplate tag for the RenderFragment<T>.

Refer to their documentation for detailed examples: https://blazor.radzen.com/datagrid-inline-edit

Insert textbox in RadzenDataGrid

2 Answers2