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

ButtonRow Template

Provide a ButtonRowTemplate and have the DataGridCommandMode set to either Default or ButtonRow.

The template has access to the internal commands so you’re also able to construct your own buttons on the pager that can also trigger the Datagrid’s CRUD and clear filter operations as shown in the example below:

#
First Name
Last Name
Email
Salary
1SamuelCollierSamuel.Collier62@gmail.com86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.com61 781,31 €
3GeraldPollichGerald82@yahoo.com58 810,75 €
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 €
1 - 10 of 499 items
499 items
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Editable
          Responsive
          ShowPager
          CommandMode="DataGridCommandMode.ButtonRow">
    <DataGridColumns>
        <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>
    </DataGridColumns>
    <ButtonRowTemplate>
        <Button Color="Color.Success" Clicked="context.NewCommand.Clicked">New</Button>
        <Button Color="Color.Primary" Disabled="(selectedEmployee is null)" Clicked="context.EditCommand.Clicked">Edit</Button>
        <Button Color="Color.Danger" Disabled="(selectedEmployee is null)" Clicked="context.DeleteCommand.Clicked">Delete</Button>
    </ButtonRowTemplate>
</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();
    }
}

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

On this page