Blazorise DataGrid: Edit Template

Blazor includes templated components that can accept one or more UI segments as input and render them as part of the component during component rendering. DataGrid is a templated Blazor component that lets you customize various parts of the user interface with template parameters. It enables you to generate custom components or content using your own logic.

Examples

EditTemplate

Edit template will give you a way to handle the editing of grid cell values. For this template CellEditContext is used as a context value. Use it to get or set the cell values.
Salary
86 030,41 €
61 781,31 €
58 810,75 €
84 414,66 €
69 318,29 €
78 566,12 €
57 456,82 €
89 153,38 €
55 349,94 €
73 625,86 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          Editable
          Responsive>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof( Employee.Salary )" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" Editable>
        <EditTemplate>
            <NumericInput TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@(v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>
@code {
    private readonly EmployeeData EmployeeData = new();
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page