devexpress-examples/blazor-dxgrid-command-buttons-with-icons

Customize command button appearance. Add custom icons to cells.

Blazor Grid - Use icons instead of default command buttons

Use templates to modify command button appearance within the DevExpress Blazor Grid.

For example, you can add content to the command column's CellDisplayTemplate or HeaderTemplate (HTML elements).

You'll need to handle the corresponding event and use StartEditNewRowAsync, StartEditDataItemAsync and ShowDataItemDeleteConfirmation methods to implement appropriate functionality. Remember to send the following input parameters:

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

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

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

Files to Review

• Index.razor

Documentation

Grid - Appearance