The requested page is not available for the requested platform. You are viewing the content for Default platform.
All docs
V19.2
19.2
19.1
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Delete Records

  • 4 min 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 Batch Edit Mode topic for more information on how to delete records in 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 false to disable end users to delete 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 a 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 to send parallel callbacks to controls because it can cause unpredictable results (the controls may return callback results at a different time). Refer to the Concept of Callbacks help article for the recommended approach.

The following example illustrates how to use subsequent callbacks to create a new record after you deleted 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 true to 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;
    }
    

Online Examples