How can I change the DxGrid New/Edit/Delete button styles?

Question

Using .net core with the DevExpress DxGrid component, I'm looking for the best way to change the default hyperlink style buttons.

My goal is to show them as bootstrap buttons, so mostly just a css class change is needed.

The best way would be using official attributes/templates/events, etc. and not some javascript 'hack' to replace the classes.

Answer 1

Using a DxGridCommandColumn you can define templates for the new button with the HeaderTemplate, for the edit and delete buttons use the CellDisplayTemplate.

This integrates nicely with the existing DxGrid new/edit/delete functionality.

Example:

<DxGridCommandColumn>
                            <HeaderTemplate Context="unique">
                                <DxButton CssClass="mt-2 mr-1" IconCssClass="fas fa-plus" RenderStyle="ButtonRenderStyle.Primary" Text="New"
                                          @onclick="(() => MyGrid.StartEditNewRowAsync())" />
                            </HeaderTemplate>
                            <CellDisplayTemplate Context="unique">
                                <DxButton CssClass="mt-2 mr-1" IconCssClass="fas fa-edit" RenderStyle="ButtonRenderStyle.Warning" Text="Edit"
                                          @onclick="(() => MyGrid.StartEditRowAsync(unique.VisibleIndex))" />
                                <DxButton CssClass="mt-2 mr-1" IconCssClass="fas fa-trash-alt" RenderStyle="ButtonRenderStyle.Danger" Text="Delete"
                                          @onclick="(() => MyGrid.ShowRowDeleteConfirmation(unique.VisibleIndex))"/>
                            </CellDisplayTemplate>
                        </DxGridCommandColumn>