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.

Edit and Add Records

  • 7 min 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 Batch Edit Mode topic for more information on how to add and edit records in batch edit mode.

<dx:ASPxGridView ID="ASPxGridView1" >
    <SettingsEditing Mode="PopupEditForm"  />
    ...
</dx:ASPxGridView>
Note
  • Specify the KeyFieldName property to enable the grid to add and edit records in a database.
  • 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:

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

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

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

    <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) {
            gv.AddNewRow();
        }" />
    </dx:ASPxButton>
    

Edit Rows

  • ASPxGridView.StartEdit (server)

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

    <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) {
            gv.StartEditRow(2);
        }" />
    </dx:ASPxButton>
    
  • StartEditRowByKey(key) (client)

    <dx:ASPxGridView runat="server" ID="Grid" ... >
        <Columns>
        ...
        </Columns>
        <SettingsDetail ShowDetailButtons="true" ShowDetailRow="true" />
        <Templates>
            <DetailRow>
                <dx:ASPxGridView runat="server" ID="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 row values.

<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";
}

Save Row Values

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

  • The Update command button.

  • The ASPxClientGridView.UpdateEdit client method.

    <dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv" >
        <Columns>
        ...
        </Columns>
    </dx:ASPxGridView>
    
    <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="false" Text="Save">
        <ClientSideEvents Click="function(s, e) {
            gv.UpdateEdit();
        }" />
    </dx:ASPxButton>
    
  • The ASPxGridView.UpdateEdit server method.

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

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

<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="false" Text="Cancel">
    <ClientSideEvents Click="function(s, e) {
        gv.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 a callback.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv" >
    <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 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 insert one more record after the previous record was inserted:

<dx:ASPxGridView ID="ASPxGridView1" runat="server" >
    ...
    <ClientSideEvents BeginCallback="OnBeginCallback" EndCallback="OnEndCallback" />
</dx:ASPxGridView>
var added = false;
function OnEndCallback(s, e) {
    if (e.command == 'UPDATEEDIT' & added == true) {
        added = false;
        gv.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 you save row values:

Add Rows

  • ASPxGridView.RowInserting

    This event occurs when an end user tries to save the newly created row. Set the e.Cancel argument to true not to add the row values to the database.

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

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

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

    <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

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

    <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";
    }
    

Online Example

Online Demo

ASPxGridView - Edit Modes