ASPxClientCardView.DeleteCard(visibleIndex) Method

Deletes the specified card.

Declaration

DeleteCard(
    visibleIndex: number
): void

Parameters

Name	Type	Description
visibleIndex	number	The card’s visible index.

Remarks

Once the DeleteCard method is called, the ASPxCardView.CardDeleting event is raised. It allows you to cancel the delete operation. After a card has been deleted, the ASPxCardView.CardDeleted event is raised.

End-users can delete cards by clicking the Delete command.

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>