This example demonstrates how to delete selected rows from the DxGrid when a user clicks a DxButton.
The selection column allows users to select one or multiple rows depending on the SelectionMode property value. To create this column, declare a DxGridSelectionColumn object in the Columns template.
Implement two-way binding for the SelectedDataItems property to access data items that correspond to selected rows. Add a Delete selected rows button to the page and delete the selected data items when a user clicks this button.
Files to Look At
Documentation
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Razor@page "/"
@using DeleteSelectedRows.Data
@inject WeatherForecastService ForecastService
@if (forecasts == null) {
<p><em>Loading...</em></p>
}
else {
<DxGrid @ref="myGrid" Data="@forecasts" CssClass="mw-1100" @bind-SelectedDataItems="@selectedDataItems" KeyFieldName="ID">
<Columns>
<DxGridSelectionColumn />
<DxGridDataColumn Caption="Date" FieldName="Date" />
<DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF" />
<DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" />
<DxGridDataColumn Caption="Summary" FieldName="Summary" />
</Columns>
</DxGrid>
<DxButton Text="Delete selected rows" Click="@OnClick"/>
}
@code {
IGrid myGrid { get; set; }
List<WeatherForecast> forecasts;
IReadOnlyList<object> selectedDataItems { get; set; }
protected override async Task OnInitializedAsync() {
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
}
void OnClick(MouseEventArgs args) {
if (selectedDataItems != null) {
foreach(WeatherForecast row in selectedDataItems)
forecasts.Remove(row);
selectedDataItems = null;
myGrid.Reload();
};
}
}