Delete Records
- 4 minutes to read
This topic illustrates how to delete the ASPxGridView‘s records. Use the instructions below to manage records when the grid is in the Inline, EditForm, EditFormAndDisplayRow, and PopupEditForm edit modes (Mode). Refer to the following topic for more information on how to delete records in batch edit mode: Batch Edit Mode.
<dx:ASPxGridView ID="ASPxGridView1" >
<SettingsEditing Mode="EditForm" />
...
</dx:ASPxGridView>
Note
- Specify the KeyFieldName property to enable the grid to delete records in a database.
- You can set the AllowDelete property to
falseto prevent users from deleting records.
Create UI Element
Use any of the following UI elements that allow users to delete records:
The built-in Delete command button
Create a command column (GridViewCommandColumn) and use the ShowDeleteButton property to display the Delete command button in the grid. Use the DeleteButton object to access the Delete command button’s settings.
<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="OrderID" >
<Columns>
<dx:GridViewCommandColumn VisibleIndex="0" ShowDeleteButton="True" >
</dx:GridViewCommandColumn>
...
</Columns>
<SettingsCommandButton>
<DeleteButton ButtonType="Button" RenderMode="Button" >
</NewButton>
</SettingsCommandButton>
</dx:ASPxGridView>
Custom UI element
Create custom UI elements that call the following APIs to delete records:
The ASPxGridView.DeleteRow method (server side).
<dx:ASPxGridView ID="ASPxGridView1" runat="server" > ... </dx:ASPxGridView> <dx:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Delete record"> </dx:ASPxButton>protected void ASPxButton2_Click(object sender, EventArgs e) { ASPxGridView1.DeleteRow(0); }The ASPxClientGridView.DeleteRow method (client side).
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv" > ... </dx:ASPxGridView> <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="false" Text="Delete "> <ClientSideEvents Click="OnClick" /> </dx:ASPxButton>function OnClick(s, e) { gv.DeleteRow(0); }The DeleteRowByKey(key) method (client side).
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv" > ... </dx:ASPxGridView> <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="false" Text="Delete "> <ClientSideEvents Click="OnClick" /> </dx:ASPxButton>function OnClick(s, e) { var keys = gv.GetSelectedKeysOnPage(); gv.DeleteRowByKey(keys[0]); }
Confirm Delete
Use the ASPxGridBehaviorSettings.ConfirmDelete property to specify whether the grid displays the delete confirmation dialog. The ASPxGridTextSettings.ConfirmDelete property specifies the delete confirmation dialog’s text.
<dx:ASPxGridView ID="ASPxGridView1" runat="server" >
<SettingsBehavior ConfirmDelete="true" />
<SettingsText ConfirmDelete="Custom Text" />
<Columns>
<dx:GridViewCommandColumn ShowDeleteButton="true" VisibleIndex="0" >
...
</Columns>
</dx:ASPxGridView>
Client-Side Events
The grid sends a callback to the server and raises the BeginCallback and EndCallback events when you click a command button or call the DeleteRow(visibleIndex) or DeleteRowByKey(key) methods. You can handle the BeginCallback event and check the e.command property to determine which user action triggered the callback.
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv" >
<ClientSideEvents BeginCallback="OnBeginCallback" />
<Columns>
...
</Columns>
</dx:ASPxGridView>
function OnBeginCallback(s, e) {
if (e.command == "DELETEROW") {
// your code
}
}
Note
Do not send parallel callbacks to controls because it can cause unpredictable results (the controls may return callback results at different times). The following topic describes the recommended approach: Callbacks.
The following example illustrates how to use subsequent callbacks to create a new record after you delete a row:
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gridView" ...>
...
<ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback"/>
</dx:ASPxGridView>
var deleted = false;
function OnEndCallback(s, e) {
if (e.command == 'DELETEROW' & deleted == true) {
deleted = false;
gv.AddNewRow();
}
}
function OnBeginCallback(s, e) {
if (e.command == 'DELETEROW')
deleted = true;
}
Server-Side Events
The grid raises the following server-side events when you delete a record:
The ASPxGridView.RowDeleting event. The grid raises this event when an end user attempts to remove the record. Set the e.Cancel argument to
trueto prevent this action.<dx:ASPxGridView ID="ASPxGridView1" runat="server" OnRowDeleting="ASPxGridView1_RowDeleting" ClientInstanceName="gridView" > <ClientSideEvents EndCallback="OnEndCallback" /> <Columns> <dx:GridViewCommandColumn ShowDeleteButton="true" > </dx:GridViewCommandColumn> ... </Columns> </dx:ASPxGridView>protected void ASPxGridView1_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) { ASPxGridView1.JSProperties["cpVisibleIndex"] = ASPxGridView1.FindVisibleIndexByKeyValue(e.Keys[0]); e.Cancel = true; }function OnEndCallback(s, e) { alert(gridView.cpVisibleIndex); }Note
The grid raises the client-side BeginCallback and EndCallback events even if you set the event’s e.Cancel property to
true. You can use the JSProperties property to pass information from the server side to the client.<dx:ASPxGridView ID="ASPxGridView1" runat="server" OnRowInserting="ASPxGridView1_RowDeleting" > <ClientSideEvents BeginCallback="function(s, e) { if (s.cp_cancel != null) { alert(s.cp_cancel); delete s.cp_cancel; } }"/> ... </dx:ASPxGridView>protected void ASPxGridView1_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) { ... e.Cancel = true; ((ASPxGridView)sender).JSProperties["cp_cancel"] = "The operation is canceled"; }The ASPxGridView.RowDeleted event occurs when the record is removed from the database.
<dx:ASPxGridView ID="ASPxGridView1" runat="server" OnRowDeleted="ASPxGridView1_RowDeleted" > <ClientSideEvents EndCallback="OnEndCallback" /> <Columns> <dx:GridViewCommandColumn ShowDeleteButton="true" > </dx:GridViewCommandColumn> ... </Columns> </dx:ASPxGridView>string result; protected void ASPxGridView1_RowDeleted(object sender, DevExpress.Web.Data.ASPxDataDeletedEventArgs e) { if (!(e.Exception == null)) result += "/r/n" + e.Exception.Message; }