Blazorise DataGrid: Commands 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.

Command Templates

If you want to change the default command buttons, you can use following templates:

  • NewCommandTemplate
  • EditCommandTemplate
  • SaveCommandTemplate
  • CancelCommandTemplate
  • DeleteCommandTemplate
  • ClearFilterCommandTemplate
#First NameLast NameEmailSalary
4CoraConnCora27@yahoo.com84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.com69 318,29 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
7GregoryRennerGregory63@hotmail.com57 456,82 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
9MerlePacochaMerle3@gmail.com55 349,94 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
12YvetteFerryYvette22@gmail.com89 658,90 €
13PabloFriesenPablo_Friesen96@gmail.com77 090,27 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Editable
          Responsive>
    <DataGridCommandColumn>
        <NewCommandTemplate>
            <Button Color="Color.Success" Clicked="@context.Clicked">New</Button>
        </NewCommandTemplate>
        <EditCommandTemplate>
            <Button Color="Color.Primary" Clicked="@context.Clicked">Edit</Button>
        </EditCommandTemplate>
    </DataGridCommandColumn>
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable>
        <EditTemplate>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>

@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

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