Focused Card Overview
- 2 minutes to read
To enable the Focused Card feature, set the ASPxCardViewBehaviorSettings.AllowFocusedCard property to true.
The style settings used to paint the focused card can be accessed and customized using the CardViewStyles.FocusedCard property.
Server-Side
The focused card is identified by the ASPxCardView.FocusedCardIndex property. Use this property to move card focus within the current page. Changing this property raises the ASPxCardView.FocusedCardChanged event.
This example shows how to focus a card which isn’t displayed on the current page. To do this, you should first switch to the page which contains the required card, and then move the card focus.
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 which 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 move card focus by clicking the cards they need. To identify the currently focused card, use the ASPxClientCardView.GetFocusedCardIndex client method. To move card focus, use the ASPxClientCardView.SetFocusedCardIndex method.
To respond to changing card focus, handle the ASPxClientCardView.FocusedCardChanged client event.