ASPxClientGridView.UpdateEdit Method
Saves all the changes made and switches the grid to browse mode.
Declaration
UpdateEdit(): void
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>
protected void ASPxGridView1_CommandButtonInitialize(object sender, ASPxGridViewCommandButtonEventArgs e)
{
if ((e.ButtonType == ColumnCommandButtonType.Update | e.ButtonType == ColumnCommandButtonType.Cancel))
e.Visible = false;
}
function OnCustomButtonClick(s, e) {
switch (e.buttonID) {
case "customBtnUpdate":
gv.UpdateEdit();
break
case "customBtnCancel":
gv.CancelEdit();
break
}
}
Example
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.
<%@ 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>
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using DevExpress.Web.ASPxGridView;
public partial class _Default : System.Web.UI.Page
{
DataTable GetTable()
{
//You can store a DataTable in the session state
DataTable table = Session["Table"] as DataTable;
if (table == null)
{
table = new DataTable();
DataColumn colid = table.Columns.Add("ID", typeof(Int32));
DataColumn nameid = table.Columns.Add("Name", typeof(String));
table.PrimaryKey = new DataColumn[] { colid };
colid.ReadOnly = true;
for (int i = 0; i < 23; i++)
{
DataRow aRow = table.NewRow();
aRow["ID"] = i;
aRow["Name"] = String.Format("Name{0}", i);
table.Rows.Add(aRow);
}
Session["Table"] = table;
}
return table;
}
public Int32 GetLastKey()
{
DataTable table = GetTable();
Int32 max = Int32.MinValue;
foreach (DataRow row in table.Rows)
{
if (Convert.ToInt32(row["ID"]) > max)
max = Convert.ToInt32(row["ID"]);
}
return max;
}
protected void Page_Init(object sender, EventArgs e)
{
grid.DataSource = GetTable();
grid.KeyFieldName = "ID";
grid.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
}
protected void grid_RowDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e)
{
ASPxGridView grid = sender as ASPxGridView;
DataTable table = GetTable();
DataRow found = table.Rows.Find(e.Keys[0]);
table.Rows.Remove(found);
Session["Table"] = table;
e.Cancel = true;
}
protected void grid_RowInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)
{
ASPxGridView grid = sender as ASPxGridView;
DataTable table = GetTable();
table.Rows.Add(new Object[] { e.NewValues["ID"], e.NewValues["Name"] });
Session["Table"] = table;
e.Cancel = true;
grid.CancelEdit();
}
protected void grid_RowUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)
{
ASPxGridView grid = sender as ASPxGridView;
DataTable table = GetTable();
DataRow found = table.Rows.Find(e.Keys[0]);
found["Name"] = e.NewValues["Name"];
Session["Table"] = table;
e.Cancel = true;
grid.CancelEdit();
}
protected void grid_InitNewRow(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e)
{
e.NewValues["ID"] = GetLastKey() + 1;
}
}
Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports DevExpress.Web.ASPxGridView
Partial Public Class _Default
Inherits System.Web.UI.Page
Private Function GetTable() As DataTable
'You can store a DataTable in the session state
Dim table As DataTable = TryCast(Session("Table"), DataTable)
If table Is Nothing Then
table = New DataTable()
Dim colid As DataColumn = table.Columns.Add("ID", GetType(Int32))
Dim nameid As DataColumn = table.Columns.Add("Name", GetType(String))
table.PrimaryKey = New DataColumn() { colid }
colid.ReadOnly = True
For i As Integer = 0 To 22
Dim aRow As DataRow = table.NewRow()
aRow("ID") = i
aRow("Name") = String.Format("Name{0}", i)
table.Rows.Add(aRow)
Next i
Session("Table") = table
End If
Return table
End Function
Public Function GetLastKey() As Int32
Dim table As DataTable = GetTable()
Dim max As Int32 = Int32.MinValue
For Each row As DataRow In table.Rows
If Convert.ToInt32(row("ID")) > max Then
max = Convert.ToInt32(row("ID"))
End If
Next row
Return max
End Function
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
grid.DataSource = GetTable()
grid.KeyFieldName = "ID"
grid.DataBind()
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub grid_RowDeleting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataDeletingEventArgs)
Dim grid As ASPxGridView = TryCast(sender, ASPxGridView)
Dim table As DataTable = GetTable()
Dim found As DataRow = table.Rows.Find(e.Keys(0))
table.Rows.Remove(found)
Session("Table") = table
e.Cancel = True
End Sub
Protected Sub grid_RowInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
Dim grid As ASPxGridView = TryCast(sender, ASPxGridView)
Dim table As DataTable = GetTable()
table.Rows.Add(New Object() { e.NewValues("ID"), e.NewValues("Name") })
Session("Table") = table
e.Cancel = True
grid.CancelEdit()
End Sub
Protected Sub grid_RowUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
Dim grid As ASPxGridView = TryCast(sender, ASPxGridView)
Dim table As DataTable = GetTable()
Dim found As DataRow = table.Rows.Find(e.Keys(0))
found("Name") = e.NewValues("Name")
Session("Table") = table
e.Cancel = True
grid.CancelEdit()
End Sub
Protected Sub grid_InitNewRow(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInitNewRowEventArgs)
e.NewValues("ID") = GetLastKey() + 1
End Sub
End Class
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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