Adding and Deleting Cards

  • 6 min to read

Creating and Initializing New Cards

End-users can create new cards using the New command.

To allow end-users to add new cards, set the ASPxGridDataSecuritySettings.AllowInsert and the CardViewCommandLayoutItem.ShowNewButton properties to true.

ASPxCardView_NewCardProperties

To create cards in code, use the server ASPxCardView.AddNewCard or client ASPxClientCardView.AddNewCard method. These methods switch ASPxCardView to an edit mode and allow the values of the new card to be edited.

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

Example:

In this example, the ASPxCardView.InitNewCard event is handled to initialize the new record's field values with default values.

The image below shows the result:

ASPxCardView_InitNewCard

protected void ASPxCardView1_InitNewCard(object sender, DevExpress.Web.Data.ASPxDataInitNewRowEventArgs e)
{
    e.NewValues["CategoryName"] = "Seafood";
    e.NewValues["Description"] = "Seafood and fish";
}

Adding Cards

To add a new record to the underlying data source, call the ASPxCardView.UpdateEdit (or ASPxClientCardView.UpdateEdit) method. End-users can do this by clicking the Update command.

ASPxCardView_UpdateButton

You can also implement card validation. For information, see Card Validation and Error Indication.

After a new card has been added to ASPxCardView, the ASPxCardView.CardInserted event is raised. To cancel the insert operation, handle the ASPxCardView.CardInserting event.

Deleting Cards

End-users can delete cards using the Delete command. To do this in code, use the server ASPxCardView.DeleteCard or client ASPxClientCardView.DeleteCard method.

After a card has been deleted, the ASPxCardView.CardDeleted event is raised. To cancel the delete operation, handle the ASPxCardView.CardDeleting event.

To allow an end-user to cancel the delete operation, enable the ASPxGridBehaviorSettings.ConfirmDelete option. In this case, when the user deletes a card, the Confirm Delete window is automatically displayed.

The text displayed within the Confirm Delete window can be specified by the ASPxGridTextSettings.ConfirmDelete property.

 

Example:

The example illustrates how to delete selected cards of the ASPxCardView bound with an in-memory DataSource.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DevExpress.Web;

public partial class _Default : System.Web.UI.Page
{
    DataTable table = null;
    protected void Page_Init(object sender, EventArgs e)
    {
        if (!IsPostBack && !IsCallback)
        {
            table = new DataTable();
            table.Columns.Add("ID", typeof(int));
            table.Columns.Add("Data", typeof(string));
            table.PrimaryKey = new DataColumn[] { table.Columns["ID"] };
            for (int i = 0; i < 10; i++)
            {
                table.Rows.Add(new object[] { i, "row " + i.ToString() });
            }
            Session["table"] = table;
        }
        else
            table = (DataTable)Session["table"];
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsCallback && !IsPostBack) ASPxCardView1.DataBind();
    }
    protected void ASPxCardView1_CellEditorInitialize(object sender, DevExpress.Web.ASPxCardViewEditorEventArgs e)
    {
        ASPxCardView grid2 = (ASPxCardView)sender;
        if (e.Column.FieldName == "ID")
        {
            ASPxTextBox textBox = (ASPxTextBox)e.Editor;
            textBox.ClientEnabled = false;
            if (grid2.IsNewCardEditing)
            {
                table = (DataTable)Session["table"];
                textBox.Text = GetNewId().ToString();
            }
        }
    }
    protected void ASPxCardView1_CardInserting(object sender, DevExpress.Web.Data.ASPxDataInsertingEventArgs e)
    {
        table = (DataTable)Session["table"];
        ASPxCardView cv = (ASPxCardView)sender;
        DataRow row = table.NewRow();
        row["ID"] = e.NewValues["ID"];
        row["Data"] = e.NewValues["Data"];
        cv.CancelEdit();
        e.Cancel = true;
        table.Rows.Add(row);
    }
    protected void ASPxCardView1_CardUpdating(object sender, DevExpress.Web.Data.ASPxDataUpdatingEventArgs e)
    {
        table = (DataTable)Session["table"];
        DataRow row = table.Rows.Find(e.Keys[0]);
        row["Data"] = e.NewValues["Data"];
        ASPxCardView1.CancelEdit();
        e.Cancel = true;
    }

    protected void ASPxCardView1_DataBinding(object sender, EventArgs e)
    {
        ASPxCardView1.DataSource = table;
    }
    #region #CustomCallbackMethod
    protected void ASPxCardView1_CustomCallback(object sender, DevExpress.Web.ASPxCardViewCustomCallbackEventArgs e)
    {
        if (e.Parameters == "Delete")
        {
            table = (DataTable)Session["table"];
            List<Object> selectItems = ASPxCardView1.GetSelectedFieldValues("ID");
            foreach (object selectItemId in selectItems)
            {
                table.Rows.Remove(table.Rows.Find(selectItemId));
            }
            ASPxCardView1.DataBind();
            ASPxCardView1.Selection.UnselectAll();
        }
    }
    #endregion #CustomCallbackMethod
    private int GetNewId()
    {
        table = (DataTable)Session["table"];
        if (table.Rows.Count == 0) return 0;
        int max = Convert.ToInt32(table.Rows[0]["ID"]);
        for (int i = 1; i < table.Rows.Count; i++)
        {
            if (Convert.ToInt32(table.Rows[i]["ID"]) > max)
                max = Convert.ToInt32(table.Rows[i]["ID"]);
        }
        return max + 1;
    }
}