ASPxClientGridView.UpdateEdit Method

Saves all the changes made and switches the grid to browse mode.

Declaration

UpdateEdit(): void

Remarks

End-users can update the edited row by clicking the Update command item.

The following code sample illustrates how to use the UpdateEdit method to show a confirmation message after a user updates the grid.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" ClientInstanceName="gv"  
  OnCommandButtonInitialize="ASPxGridView1_CommandButtonInitialize" AutoGenerateColumns="False"
  DataSourceID="ads" KeyFieldName="CategoryID">
    <Columns>
        <dx:GridViewCommandColumn Caption=" " VisibleIndex="0" Width="100">
            <NewButton Visible="True" />
            <EditButton Visible="True" />
            <DeleteButton Visible="True" />
            <CustomButtons>
                <dx:GridViewCommandColumnCustomButton ID="customBtnUpdate" Visibility="EditableRow" Text="Update" />
                <dx:GridViewCommandColumnCustomButton ID="customBtnCancel" Visibility="EditableRow" Text="Cancel" />
            </CustomButtons>
        </dx:GridViewCommandColumn>
        ...
    </Columns>
    <ClientSideEvents CustomButtonClick="OnCustomButtonClick" />
    ...
</dx:ASPxGridView>

Examples

To change ASPxGridView's data from the client side, there are appropriate ASPxClientGridView methods:

To save or cancel changes, there are:

The following example implements a custom defined toolbar with ASPxButtons, which perform all the editing capabilities over a grid's data source.

Note: to distinguish records, the property ASPxGridViewBehaviorSettings.AllowFocusedRow should be enabled for the grid.

View Example

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dxwgv" %>
<%@ Register Assembly="DevExpress.Web.v13.1, Version=13.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>How to implement a toolbar for grid with Inserting, Updating and Deleting capabilities</title>

    <script language="javascript" type="text/javascript">
    function OnNewClick(s, e) {
        grid.AddNewRow();
    }

    function OnEditClick(s, e) {
        var index = grid.GetFocusedRowIndex();
        grid.StartEditRow(index);
    }

    function OnSaveClick(s, e) {
        grid.UpdateEdit();
    }

    function  OnCancelClick(s, e) {
        grid.CancelEdit();
    } 

    function  OnDeleteClick(s, e){
        var index = grid.GetFocusedRowIndex();
        grid.DeleteRow(index);
    }  
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td>
                        <dxe:ASPxButton ID="btnNew" runat="server" Text="New" AutoPostBack="false">
                            <ClientSideEvents Click="function (s, e) { OnNewClick(s, e); }" />
                        </dxe:ASPxButton>
                    </td>
                    <td>
                        <dxe:ASPxButton ID="btnEdit" runat="server" Text="Edit" AutoPostBack="false">
                            <ClientSideEvents Click="function (s, e) { OnEditClick(s, e); }" />
                        </dxe:ASPxButton>
                    </td>
                    <td>
                        <dxe:ASPxButton ID="btnSave" runat="server" Text="Save" AutoPostBack="false">
                            <ClientSideEvents Click="function (s, e) { OnSaveClick(s, e); }" />
                        </dxe:ASPxButton>
                    </td>
                    <td>
                        <dxe:ASPxButton ID="btnCancel" runat="server" Text="Cancel" AutoPostBack="false">
                            <ClientSideEvents Click="function (s, e) { OnCancelClick(s, e); }" />
                        </dxe:ASPxButton>
                    </td>
                    <td>
                        <dxe:ASPxButton ID="btnDelete" runat="server" Text="Delete" AutoPostBack="false">
                            <ClientSideEvents Click="function (s, e) { OnDeleteClick(s, e); }" />
                        </dxe:ASPxButton>
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        <dxwgv:ASPxGridView ID="grid" runat="server" ClientInstanceName="grid" OnRowDeleting="grid_RowDeleting"
                            OnRowInserting="grid_RowInserting" OnRowUpdating="grid_RowUpdating" OnInitNewRow="grid_InitNewRow">
                            <SettingsBehavior AllowFocusedRow="True" />
                            <Templates>
                                <EditForm>
                                    <dxwgv:ASPxGridViewTemplateReplacement ReplacementType="EditFormEditors" ID="ASPxGridViewTemplateReplacement3"
                                        runat="server">
                                    </dxwgv:ASPxGridViewTemplateReplacement>
                                </EditForm>
                            </Templates>
                        </dxwgv:ASPxGridView>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
See Also