BuyLog In
Example T807225
Visible to All Users

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:

Razor
<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)

Example Code

CommandButtonsWithIcons/Pages/Index.razor 
Razor
@page "/"
@using CommandButtonsWithIcons.Data
@inject WeatherForecastService ForecastService

<DxGrid Data="forecasts" 
        @ref="MyGrid" 
        KeyFieldName="ID" 
        DataItemDeleting="OnDataItemDeleting"
        EditModelSaving="OnEditModelSaving">
    <Columns>
        <DxGridCommandColumn>
            <HeaderTemplate>
                <a class="oi oi-plus" @onclick="@(() => MyGrid.StartEditNewRowAsync())" style="text-decoration: none;" href="javascript:void(0);"></a>
            </HeaderTemplate>
            <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>
        </DxGridCommandColumn>
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.Summary) Caption="Summary" />
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.Date) DisplayFormat="dd/MM/yyyy" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="Temp. (C)">
                @EditFormContext.GetEditor("TemperatureC")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Summary">
                @EditFormContext.GetEditor("Summary")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Date">
                @EditFormContext.GetEditor("Date")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    string[]? summaries;
    private List<WeatherForecast>? forecasts;
    DxGrid? MyGrid;
    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync();
        summaries = ForecastService.Summaries;
    }
    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        forecasts = await ForecastService.ChangeForecastAsync((WeatherForecast)e.EditModel);
    }
    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        if (e.DataItem != null)
            await ForecastService.Remove((WeatherForecast)e.DataItem);
    }
}

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.