ASPxClientCardView.UpdateEdit Method

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

Declaration

UpdateEdit(): void

Remarks

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

Example

To change ASPxCardView’s data from the client side, there are appropriate ASPxClientCardView methods:

• ASPxClientCardView.AddNewCard
• ASPxClientCardView.DeleteCard
• ASPxClientCardView.StartEditCard

To save or cancel changes, there are:

• ASPxClientCardView.UpdateEdit
• ASPxClientCardView.CancelEdit

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

Note: to distinguish records, the property ASPxCardViewBehaviorSettings.AllowFocusedCard should be enabled for the grid.

C#

    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_InitNewCard(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e) {
        e.NewValues["ID"] = GetLastKey() + 1;
    }
    protected void grid_CardDeleting(object sender, DevExpress.Web.Data.ASPxDataDeletingEventArgs e) {
        ASPxCardView grid = sender as ASPxCardView;

        DataTable table = GetTable();
        DataRow found = table.Rows.Find(e.Keys[0]);
        table.Rows.Remove(found);

        Session["Table"] = table;

        e.Cancel = true;
    }
    protected void grid_CardInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e) {
        ASPxCardView grid = sender as ASPxCardView;

        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_CardUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e) {
        ASPxCardView grid = sender as ASPxCardView;

        DataTable table = GetTable();
        DataRow found = table.Rows.Find(e.Keys[0]);
        found["Name"] = e.NewValues["Name"];

        Session["Table"] = table;

        e.Cancel = true;
        grid.CancelEdit();
    }

ASPX

<script type="text/javascript">
    function OnNewClick(s, e) {
        grid.AddNewCard();
    }
    function OnEditClick(s, e) {
        var index = grid.GetFocusedCardIndex();
        grid.StartEditCard(index);
    }
    function OnSaveClick(s, e) {
        grid.UpdateEdit();
    }
    function OnCancelClick(s, e) {
        grid.CancelEdit();
    }
    function OnDeleteClick(s, e) {
        var index = grid.GetFocusedCardIndex();
        grid.DeleteCard(index);
    }
</script>
......
<table>
    <tr>
        <td>
            <dx:ASPxButton ID="btnNew" runat="server" Text="New" AutoPostBack="false">
                <ClientSideEvents Click="function (s, e) { OnNewClick(s, e); }" />
            </dx:ASPxButton>
        </td>
        <td>
            <dx:ASPxButton ID="btnEdit" runat="server" Text="Edit" AutoPostBack="false">
                <ClientSideEvents Click="function (s, e) { OnEditClick(s, e); }" />
            </dx:ASPxButton>
        </td>
        <td>
            <dx:ASPxButton ID="btnSave" runat="server" Text="Save" AutoPostBack="false">
                <ClientSideEvents Click="function (s, e) { OnSaveClick(s, e); }" />
            </dx:ASPxButton>
        </td>
        <td>
            <dx:ASPxButton ID="btnCancel" runat="server" Text="Cancel" AutoPostBack="false">
              <ClientSideEvents Click="function (s, e) { OnCancelClick(s, e); }" />
            </dx:ASPxButton>
        </td>
        <td>
            <dx:ASPxButton ID="btnDelete" runat="server" Text="Delete" AutoPostBack="false">
              <ClientSideEvents Click="function (s, e) { OnDeleteClick(s, e); }" />
            </dx:ASPxButton>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <dx:ASPxCardView ID="grid" runat="server" OnCardDeleting="grid_CardDeleting" OnCardInserting="grid_CardInserting" 
                OnCardUpdating="grid_CardUpdating" OnInitNewCard="grid_InitNewCard" ClientInstanceName="grid">
                <SettingsBehavior AllowFocusedCard="True" />
            </dx:ASPxCardView>
        </td>
    </tr>
</table>
    </div>
    </form>