Blazor Grid - Use Custom Icons as Command Buttons

A command column displays the following predefined buttons (icons):

• New (column header)
• Edit, Delete (data rows in display mode)
• Save, Cancel (data rows in EditRow and EditCell modes)

You can use HeaderTemplate, CellDisplayTemplate, or CellEditTemplate to change command button appearance within the DevExpress Blazor Grid.

Handle button/icon click events and call StartEditNewRowAsync, StartEditDataItemAsync and ShowDataItemDeleteConfirmation methods to implement required functionality. Pass the following parameters:

• A null object if you want to create a new record
• An existing object if you edit or delete a record

Use the context object to obtain the current row object in the column CellDisplayTemplate:

<CellDisplayTemplate>
    <a class="oi oi-pencil link-decoration" @onclick="@(() => MyGrid.StartEditRowAsync(context.VisibleIndex))" href="javascript:void(0);"></a>
    <a class="oi oi-x link-decoration" @onclick="@(() => MyGrid.ShowDataItemDeleteConfirmation(context.DataItem))" href="javascript:void(0);"></a>
</CellDisplayTemplate>

Files to Review

• Index.razor

Documentation

• Blazor Grid - Command Column

More Examples

• Grid for Blazor - Create a custom record deletion confirmation dialog
• Blazor Grid - Use an External Popup as an Edit Form

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)