ContextQMD
Back to Devexpress

Delete Records

aspnet-401080-components-grid-view-concepts-edit-data-delete-records.md

latest6.0 KB
Original Source

Delete Records

  • Aug 15, 2022
  • 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.

aspx
<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 false to 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.

aspx
<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:

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.

aspx
<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.

aspx
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv" >
    <ClientSideEvents BeginCallback="OnBeginCallback" />
    <Columns>
        ...
    </Columns>
</dx:ASPxGridView>
js
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:

aspx
<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gridView" ...>
         ...
        <ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback"/>
</dx:ASPxGridView>
js
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 true to prevent this action.

  • The ASPxGridView.RowDeleted event occurs when the record is removed from the database.

Online Examples