Focused Card Overview

• Jun 16, 2022
• 2 minutes to read

To enable the Focused Card feature, set the ASPxCardViewBehaviorSettings.AllowFocusedCard property to true.

Utilize the CardViewStyles.FocusedCard property to access and customize the style settings used to paint the focused card.

Server-Side

The focused card is identified by the ASPxCardView.FocusedCardIndex property. Use this property to move card focus within the current page. Note that if you change this property, the ASPxCardView.FocusedCardChanged event is raised.

The following example moves focus to a card that is not displayed on the current page. First, switch to the page that contains the required card, and then move the card focus.

C#

protected void Button1_Click(object sender, EventArgs e)
{
    // Obtain the visible index of the required card.
    int cardIndex = ASPxCardView1.FindVisibleIndexByKeyValue("OLDWO");
    if (cardIndex == ASPxCardView.InvalidCardIndex) return;
    if (!IsCardVisibleOnScreen(cardIndex)) {
        // Switch to the page that contains the required card.
        GoToPage(cardIndex);
    }
    // Focus the required card.
    ASPxCardView1.FocusedCardIndex = cardIndex;
}

bool IsCardVisibleOnScreen(int cardIndex)
{
    int startIndex = ASPxCardView1.PageIndex * ASPxCardView1.SettingsPager.PageSize;
    int endIndex = startIndex + ASPxCardView1.SettingsPager.PageSize;
    return cardIndex >= startIndex && cardIndex < endIndex;
}
void GoToPage(int cardIndex)
{
    ASPxCardView1.PageIndex = cardIndex / ASPxCardView1.SettingsPager.PageSize;
}

Client-Side

End users can click cards to move focus. To identify the currently focused card, use the client ASPxClientCardView.GetFocusedCardIndex method. To move card focus, use the ASPxClientCardView.SetFocusedCardIndex method.

To respond to a change in card focus, handle the ASPxClientCardView.FocusedCardChanged client event.