Focused Card

• Feb 02, 2023

The DevExpress MVC CardView provides the Focused Card feature. By default, this feature is disabled. To enable it, set the SettingsBehavior.AllowFocusedCard (see ASPxCardViewBehaviorSettings.AllowFocusedCard) option to true.

The style settings defining the appearance of the focused card can be accessed and customized using the Styles.FocusedCard (see CardViewStyles.FocusedCard) property.

Manipulating Focus on the Server-Side

The focused card is identified by the MVCxCardView.FocusedCardIndex property (see ASPxCardView.FocusedCardIndex). Use this property to move card focus within the current page.

View code:

Razor

@Html.DevExpress().CardView(settings => {
    settings.Name = "CardView";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" };
    settings.SettingsPager.PageSize = 5;

    settings.KeyFieldName = "EmployeeID";
    settings.Columns.Add("LastName");
    settings.Columns.Add("FirstName");
    settings.Columns.Add("City");
    settings.Columns.Add("Country");

    settings.PreRender = (s, e) =>
    {
        var sender = (MVCxCardView)s;
        // Set the zero-based index of the focused card.
        sender.FocusedCardIndex = 3;
    };
    // Enable card focus.
    settings.SettingsBehavior.AllowFocusedCard = true;
}).Bind(Model).GetHtml()

Manipulating Focus on the Client-Side

End-users move card focus by clicking the cards they need. To identify the currently focused card, use the client ASPxClientCardView.GetFocusedCardIndex method. To move card focus, use the ASPxClientCardView.SetFocusedCardIndex method.

To respond to changing card focus, handle the ASPxClientCardView.FocusedCardChanged client event.