ASPxClientCardView.AddNewCard Method

Adds a new card.

Declaration

AddNewCard(): void

Remarks

The AddNewCard method switches the ASPxCardView to edit mode and allows the values of the new card to be edited. To add the new card to the underlying datasource, call the ASPxClientCardView.UpdateEdit method. End-users can save the changes made using the Update command.

To initialize row values in code, handle the ASPxCardView.InitNewCard event.

The ASPxGridBase.KeyFieldName property must be specified to enable adding new rows.

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>