ASPxClientCardView.CardClick Event

Fires on the client when a card is clicked.

Declaration

CardClick: ASPxClientEvent<ASPxClientCardViewCardClickEventHandler<ASPxClientCardView>>

Event Data

The CardClick event's data class is ASPxClientCardViewCardClickEventArgs. The following properties provide information specific to this event:

Property	Description
cancel	Specifies whether to cancel the related action (for example, row edit, export). Inherited from ASPxClientCancelEventArgs.
htmlEvent	Provides access to the parameters associated with the ASPxClientCardView.CardClick event.
visibleIndex	Gets the processed card’s visible index.

Example

This example illustrates how to use the client-side CardClick and CardDblClick events to perform different actions.

var doProcessClick;
var visibleIndex;
function ProcessClick() {
    if (doProcessClick) {
        alert("Here is the CardClick action in the " + visibleIndex.toString() + "-th card");
    }
}

Default.aspx (C#)

<dx:ASPxCardView ID="ASPxCardView1" runat="server" AutoGenerateColumns="False" 
                 DataSourceID="AccessDataSource1" KeyFieldName="CategoryID">
    <ClientSideEvents 
        CardClick="function(s, e) {
                doProcessClick = true;
                visibleIndex = e.visibleIndex+1;
                window.setTimeout(ProcessClick,500);
        }" 
        CardDblClick="function(s, e) {
            doProcessClick = false;
            var key = s.GetCardKey(e.visibleIndex);
            alert('Here is the CardDoubleClick action in a card with the Key = '+key);
        }" />
    <SettingsBehavior AllowFocusedCard="True" />
    <Columns>
        <dx:CardViewTextColumn FieldName="CategoryID" ReadOnly="True" />
        <dx:CardViewTextColumn FieldName="CategoryName" />
        <dx:CardViewTextColumn FieldName="Description" />
    </Columns>
</dx:ASPxCardView>