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

<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

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

GridView - Edit Mode

Custom UI element

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

Add Rows

ASPxGridView.AddNewRow (server)

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="OrderID" >
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>
<dx:ASPxButton ID="ASPxButton1" runat="server"  OnClick="ASPxButton1_Click" Text="Add a Row">
</dx:ASPxButton>

protected void ASPxButton1_Click(object sender, EventArgs e){
    ASPxGridView1.AddNewRow();
}

ASPxClientGridView.AddNewRow (client)

ASPX

<dx:ASPxGridView ID="ASPxGridView1" ClientInstanceName="gridView" runat="server" KeyFieldName="OrderID" >
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Add a Row">
    <ClientSideEvents Click="function(s, e) {
        gridView.AddNewRow();
    }" />
</dx:ASPxButton>

Edit Rows

ASPxGridView.StartEdit (server)

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="OrderID" >
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>
<dx:ASPxButton ID="ASPxButton1" runat="server"  OnClick="ASPxButton1_Click" Text="Edit a Row">
</dx:ASPxButton>

protected void ASPxButton1_Click(object sender, EventArgs e){
    ASPxGridView1.StartEdit(2);
}

StartEditRow(visibleIndex) (client)

ASPX

<dx:ASPxGridView ID="ASPxGridView1" ClientInstanceName="gridView" runat="server" KeyFieldName="OrderID" >
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>
<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Edit a Row">
    <ClientSideEvents Click="function(s, e) {
        gridView.StartEditRow(2);
    }" />
</dx:ASPxButton>

StartEditRowByKey(key) (client)

ASPX

<dx:ASPxGridView runat="server" ID="Grid" ... >
    <Columns>
    ...
    </Columns>
    <SettingsDetail ShowDetailButtons="true" ShowDetailRow="true" />
    <Templates>
        <DetailRow>
            <dx:ASPxGridView runat="server" ID="GridDetail" ClientInstanceName="gridDetail" ...>
                <ClientSideEvents RowDblClick="RowDblClick" />
                ...
            </dx:ASPxGridView>
        </DetailRow>
    </Templates>
</dx:ASPxGridView>

function RowDblClick(s, e) {
    var key = gridDetail.GetRowKey(e.visibleIndex);
    gridDetail.StartEditRowByKey(key);
}

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

ASPX

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

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

GridView - Initialize a New Row

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.

ASPX

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

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

The server-side ASPxGridView.UpdateEdit method.

ASPX

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

<dx:ASPxButton ID="ASPxButton2" runat="server" OnClick="ASPxButton2_Click" Text="Save">
</dx:ASPxButton>

protected void ASPxButton2_Click(object sender, EventArgs e) {
    ASPxGridView1.UpdateEdit();
}

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

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

<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

<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

ASPxGridView.RowInserting

This event occurs when a user tries to save the newly created row. Set the e.Cancel argument to true to cancel the insert operation.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"  OnRowInserting="ASPxGridView1_RowInserting" >
    ...
</dx:ASPxGridView>

protected void ASPxGridView1_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
    if (e.NewValues["ProductName"].ToString() == "tets produtc")
        e.NewValues["ProductName"] = "test product";

    if (e.NewValues["ProductName"].ToString().Contains("aqua"))
        e.Cancel = true;
}

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.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"  OnRowInserting="ASPxGridView1_RowInserting" >
    <ClientSideEvents BeginCallback="function(s, e) { 
        if (s.cp_cancel != null) {
            alert(s.cp_cancel);
            delete s.cp_cancel;
        }
    }"/>
    ...
</dx:ASPxGridView>

protected void ASPxGridView1_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
    ...
    e.Cancel = true;
    ((ASPxGridView)sender).JSProperties["cp_cancel"] = "The operation is canceled";
}

ASPxGridView.RowInserted

This event occurs when the grid adds the record to the database. The example bellow illustrates how to display an alert message if the grid successfully added a new row to the database.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"  OnRowInserted="ASPxGridView1_RowInserted" >
    ...
    <ClientSideEvents EndCallback="OnEndCallback"/>
</dx:ASPxGridView>

function OnEndCallback(s, e) {
    if (e.command == 'UPDATEEDIT') {
        alert(s.cp_Success);
        delete s.cp_Success;
    }
}

protected void ASPxGridView1_RowInserted(object sender, DevExpress.Web.Data.ASPxDataInsertedEventArgs e) {
    if(e.Exception == null)
        ((ASPxGridView)sender).JSProperties["cp_success"] = "A row is successfully inserted";
}

Edit Rows

ASPxGridView.RowUpdating

This event occurs when a user attempts to save the edited row. Set the e.Cancel argument to true to prevent this action.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"  OnRowUpdating="ASPxGridView1_RowUpdating" >
    ...
</dx:ASPxGridView>

protected void ASPxGridView1_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
    if (e.NewValues["ProductName"].ToString() == "tets produtc")
        e.NewValues["ProductName"] = "test product";

    if (e.NewValues["ProductName"].ToString().Contains("aqua"))
        e.Cancel = true;    
}

Note

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"  OnRowUpdating="ASPxGridView1_RowUpdating" >
    <ClientSideEvents BeginCallback="function(s, e) { 
        if (s.cp_cancel != null) {
            alert(s.cp_cancel);
            delete s.cp_cancel;
        }
    }"/>
    ...
</dx:ASPxGridView>

protected void ASPxGridView1_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
    ...
    e.Cancel = true;
    ((ASPxGridView)sender).JSProperties["cp_cancel"] = "The operation is canceled";
}

ASPxGridView.RowUpdated

This event occurs when the grid updates the record in the database. The example bellow illustrates how to display an alert message if the grid successfully updated the record in the database.

ASPX

<dx:ASPxGridView ID="ASPxGridView1" runat="server"  OnRowUpdated="ASPxGridView1_RowUpdated" >
    ...
    <ClientSideEvents EndCallback="OnEndCallback"/>
</dx:ASPxGridView>

function OnEndCallback(s, e) {
    if (e.command == 'UPDATEEDIT') {
        alert(s.cp_Success);
        delete s.cp_Success;
    }
}

protected void ASPxGridView1_RowUpdated(object sender, DevExpress.Web.Data.ASPxDataUpdatedEventArgs e) {
    if(e.Exception == null)
        ((ASPxGridView)sender).JSProperties["cp_success"] = "A row is successfully updated";
}

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Switch to Edit Mode

The built-in command button

Custom UI element

Add Rows

Edit Rows

Save Row Values

Client-Side Events

Server-Side Events