Skip to content

Latest commit

 

History

History
45 lines (31 loc) · 3.21 KB

File metadata and controls

45 lines (31 loc) · 3.21 KB

Blazor Grid - Use icons instead of default command buttons

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

Grid with Custom Icons

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

Documentation

Grid - Appearance

Does this example address your development requirements/objectives?

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