Edit and Add Records

May 03, 2023
6 minutes to read

This topic illustrates how to add and edit a record in the ASPxGridView control. 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 add and edit records in batch edit mode: Batch Edit Mode.

View Example Run Demo

ASPX

aspx

<dx:ASPxGridView ID="ASPxGridView1" >
    <SettingsEditing Mode="PopupEditForm" />
    ...
</dx:ASPxGridView>

Note

Specify the KeyFieldName property to enable data edit and insertion operations.
You can set the AllowEdit and/or the AllowInsert properties to false to prevent users from editing and/or inserting records.

Switch to Edit Mode

Use any of the following UI elements to allow users to switch the grid to edit mode:

The built-in command button

Create a command column (GridViewCommandColumn) and use the following properties to display the Edit and New command buttons in the grid:

ShowEditButton: displays the Edit command button.
ShowNewButton and ShowNewButtonInHeader: display the New command button.

Use the EditButton and NewButton objects to access the Edit and New command button settings.

ASPX

aspx

<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="OrderID" >
    <Columns>
    <dx:GridViewCommandColumn VisibleIndex="0" ShowEditButton="True" ShowNewButtonInHeader="True" >
    </dx:GridViewCommandColumn>
    ...
    </Columns>
    <SettingsCommandButton>
        <NewButton ButtonType="Button" RenderMode="Button" >
        </NewButton>
        <EditButton ButtonType="Button" RenderMode="Button" >
        </EditButton>
    </SettingsCommandButton>
</dx:ASPxGridView>

Custom UI element

Create custom UI elements that call the following APIs to switch the grid to edit mode:

Add Rows

ASPxGridView.AddNewRow (server)
ASPxClientGridView.AddNewRow (client)

Edit Rows

You can handle the ASPxGridView.InitNewRow event to initialize a new record’s field values.

ASPX

aspx

<dx:ASPxGridView ID="ASPxGridView1" runat="server" OnInitNewRow="ASPxGridView1_InitNewRow" 
KeyFieldName="OrderID" >
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>

csharp

protected void ASPxGridView1_InitNewRow(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e)
{
    e.NewValues["OrderDate"] = new DateTime(1970, 1, 10);
    e.NewValues["ShipCountry"] = "USA";
}

Save Row Values

Use one of the following to save row values to the database:

The Update command button.
The client-side ASPxClientGridView.UpdateEdit method.
The server-side ASPxGridView.UpdateEdit method.

The client-side CancelEdit method allows you to cancel changes and switch the grid to browse mode.

ASPX

aspx

<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gridView" >
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>

<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="false" Text="Cancel">
    <ClientSideEvents Click="function(s, e) {
        gridView.CancelEdit();
    }" />
</dx:ASPxButton>

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 AddNewRow, StartEditRow, StartEditRowByKey, UpdateEdit, or CancelEdit client-side methods. You can handle the BeginCallback and EndCallback events, and check the e.command property to determine which user action triggered the callback.

ASPX

aspx

<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gridView" >
    <ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback" />
    <Columns>
        ...
    </Columns>
</dx:ASPxGridView>

function OnBeginCallback(s, e) {
    if (e.command == "ADDNEWROW") {
        // your code
    }
}
function OnEndCallback(s, e) {
    if (e.command == "ADDNEWROW") {
        // 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 insert one additional record after the previous record is inserted:

ASPX

aspx

<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gridView" >
    ...
    <ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback" />
</dx:ASPxGridView>

var added = false;
function OnEndCallback(s, e) {
    if (e.command == 'UPDATEEDIT' & added == true) {
        added = false;
        gridView.AddNewRow();
    }
}
function OnBeginCallback(s, e) {
    if (e.command == 'ADDNEWROW')
        added = true;
    if (e.command == 'CANCELEDIT')
        added = false;
}

Server-Side Events

The grid also raises the following server-side events when it saves row values:

Add Rows

Edit Rows