How to: Delete Selected Cards

• Dec 17, 2020
• 4 minutes to read

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

function OnClickButtonDel(s, e) {
    card.PerformCallback('Delete');
}

Default.aspx

<dx:ASPxCardView ID="ASPxCardView1" KeyFieldName="ID" AutoGenerateColumns="False" runat="server" 
                    ClientInstanceName="card" 
                    OnCellEditorInitialize="ASPxCardView1_CellEditorInitialize" 
                    OnCardInserting="ASPxCardView1_CardInserting" 
                    OnCardUpdating="ASPxCardView1_CardUpdating" 
                    OnCustomCallback="ASPxCardView1_CustomCallback" 
                    OnDataBinding="ASPxCardView1_DataBinding">
    <Columns>
        <dx:CardViewTextColumn FieldName="ID" />
        <dx:CardViewTextColumn FieldName="Data" />
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowSelectCheckbox="True" />
            <dx:CardViewColumnLayoutItem ColumnName ="ID" />
            <dx:CardViewColumnLayoutItem ColumnName="Data" />
            <dx:EditModeCommandLayoutItem HorizontalAlign="Right" />
        </Items>
    </CardLayoutProperties>
</dx:ASPxCardView>
<dx:ASPxButton ID="ASPxButton1" runat="server" ClientInstanceName="btn1" 
                AutoPostBack="false" Text="Delete">
    <ClientSideEvents Click="OnClickButtonDel"/>
</dx:ASPxButton>

Default.aspx.cs

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;
}
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();
    }
}
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;
}

Default.aspx.vb

Private table As DataTable = Nothing
Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
    If (Not IsPostBack) AndAlso (Not IsCallback) Then
        table = New DataTable()
        table.Columns.Add("ID", GetType(Integer))
        table.Columns.Add("Data", GetType(String))
        table.PrimaryKey = New DataColumn() { table.Columns("ID") }
        For i As Integer = 0 To 9
            table.Rows.Add(New Object() { i, "row " & i.ToString() })
        Next i
        Session("table") = table
    Else
        table = DirectCast(Session("table"), DataTable)
    End If
End Sub
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    If (Not IsCallback) AndAlso (Not IsPostBack) Then
        ASPxCardView1.DataBind()
    End If
End Sub
Protected Sub ASPxCardView1_CellEditorInitialize(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewEditorEventArgs)
    Dim grid2 As ASPxCardView = DirectCast(sender, ASPxCardView)
    If e.Column.FieldName = "ID" Then
        Dim textBox As ASPxTextBox = CType(e.Editor, ASPxTextBox)
        textBox.ClientEnabled = False
        If grid2.IsNewCardEditing Then
            table = DirectCast(Session("table"), DataTable)
            textBox.Text = GetNewId().ToString()
        End If
    End If
End Sub
Protected Sub ASPxCardView1_CardInserting(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataInsertingEventArgs)
    table = DirectCast(Session("table"), DataTable)
    Dim cv As ASPxCardView = DirectCast(sender, ASPxCardView)
    Dim row As DataRow = table.NewRow()
    row("ID") = e.NewValues("ID")
    row("Data") = e.NewValues("Data")
    cv.CancelEdit()
    e.Cancel = True
    table.Rows.Add(row)
End Sub
Protected Sub ASPxCardView1_CardUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs)
    table = DirectCast(Session("table"), DataTable)
    Dim row As DataRow = table.Rows.Find(e.Keys(0))
    row("Data") = e.NewValues("Data")
    ASPxCardView1.CancelEdit()
    e.Cancel = True
End Sub
Protected Sub ASPxCardView1_DataBinding(ByVal sender As Object, ByVal e As EventArgs)
    ASPxCardView1.DataSource = table
End Sub
Protected Sub ASPxCardView1_CustomCallback(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxCardViewCustomCallbackEventArgs)
    If e.Parameters = "Delete" Then
        table = DirectCast(Session("table"), DataTable)
        Dim selectItems As List(Of Object) = ASPxCardView1.GetSelectedFieldValues("ID")
        For Each selectItemId As Object In selectItems
            table.Rows.Remove(table.Rows.Find(selectItemId))
        Next selectItemId
        ASPxCardView1.DataBind()
        ASPxCardView1.Selection.UnselectAll()
    End If
End Sub
Private Function GetNewId() As Integer
    table = DirectCast(Session("table"), DataTable)
    If table.Rows.Count = 0 Then
        Return 0
    End If
    Dim max As Integer = Convert.ToInt32(table.Rows(0)("ID"))
    For i As Integer = 1 To table.Rows.Count - 1
        If Convert.ToInt32(table.Rows(i)("ID")) > max Then
            max = Convert.ToInt32(table.Rows(i)("ID"))
        End If
    Next i
    Return max + 1
End Function