DxGrid.ShowDataItemDeleteConfirmation(Object) Method

Displays the delete confirmation dialog for the specified data item. If a user confirms the operation, the method raises the DataItemDeleting event.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.Grid.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void ShowDataItemDeleteConfirmation(
    object dataItem
)

Parameters

Name	Type	Description
dataItem	Object	The data item.

Remarks

The Grid allows users to add, edit, and delete its data rows.

Tip

For information on how to enable data editing, refer to the following topic: Editing and Validation in Blazor Grid.

The Grid supports the DxGridCommandColumn that contains the predefined New, Edit, and Delete command buttons. Once a user clicks the Delete button, the delete confirmation dialog appears.

You can also create custom command elements inside or outside the Grid. Handle an element’s click event and call the ShowDataItemDeleteConfirmation method to display the delete confirmation dialog for the specified data item. The DataItemDeleting event fires when a user confirms the delete operation. Handle this event to check user access permissions and delete the data item from the underlying data source.

StartEditNewRowAsync

Starts editing a new row.

StartEditRowAsync | StartEditDataItemAsync

Start editing the specified row or data item.

ShowRowDeleteConfirmation

Displays the delete confirmation dialog for the specified row.

The following code snippet displays Open Iconic icons in command buttons:

Razor

@page "/"
@using CommandButtonsWithIcons.Data
@inject WeatherForecastService ForecastService

<div>
    <DxGrid Data="forecasts" 
            @ref="MyGrid" 
            KeyFieldName="ID" 
            DataItemDeleting="OnDataItemDeleting"
            EditModelSaving="OnEditModelSaving">
        <Columns>
            <DxGridCommandColumn>
                <HeaderTemplate>
                    <a class="oi oi-plus link-decoration" @onclick="@(() => MyGrid.StartEditNewRowAsync())" href="javascript:void(0);"></a>
                </HeaderTemplate>
                <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>
            </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>
</div>

@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);
    }
}

WeatherForecast

namespace CommandButtonsWithIcons.Data
{
    public class WeatherForecast
    {
        public int ID { get; set; }
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string? Summary { get; set; }
    }
}

WeatherForecastService

namespace CommandButtonsWithIcons.Data {
    public class WeatherForecastService {
        public readonly string[] Summaries = new[] {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };
        private List<WeatherForecast>? Forecasts;
        public Task<List<WeatherForecast>> GetForecastAsync() {
            if (Forecasts == null) {
                var rnd = new Random();
                Forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
                    ID = index,
                    Date = DateTime.Today.AddDays(index),
                    TemperatureC = rnd.Next(-20, 55),
                    Summary = Summaries[rnd.Next(Summaries.Length)]
                }).ToList();
            }
            return Task.FromResult(Forecasts);
        }
        public Task<List<WeatherForecast>> ChangeForecastAsync(WeatherForecast changed) {
            var orginalForecast = Forecasts.FirstOrDefault(i => i.ID == changed.ID);
            if (orginalForecast != null) {
                orginalForecast.TemperatureC = changed.TemperatureC;
                orginalForecast.Summary = changed.Summary;
                orginalForecast.Date = changed.Date;
            }
            else {
                Forecasts.Add(changed);
            }
            return Task.FromResult(Forecasts);
        }
        public Task<List<WeatherForecast>> Remove(WeatherForecast forecast) {
            Forecasts.Remove(forecast);
            return Task.FromResult(Forecasts);
        }
    }
}

CSS

.link-decoration {
    text-decoration: none;
}

View Example: Use icons instead of default command buttons

Implements

ShowDataItemDeleteConfirmation(Object)