Skip to main content

Card and Layout Views

  • 4 minutes to read

Data Grid - Cards - Overview

In Card View (CardView class), data source records are displayed as cards arranged down and then across. The Layout View (LayoutView class) offers more layout modes and is significantly more advanced in terms of features and customization flexibility.

Common Information

Card View

Layout View

Cards

Cards in both Views display captions with embedded collapse/expand buttons for users to minimize and restore cards. In cases where cards do not fit the current View height, users can scroll them. Neighboring cards are visually delimited by splitters that allow users to resize cards (in Card View only).

Data Grid - Cards - CardView Cards

Property Name

(Card View)

Property Name

(Layout View)

Description

CardOptionsView.ShowCardCaption

CardView.CardCaptionFormat

LayoutViewOptionsView.ShowCardCaption

LayoutView.CardCaptionFormat

Allow you to hide card captions or change their default “Record N {0}” format.

CardView.CustomCardCaptionImage

LayoutView.CustomCardCaptionImage

Handle this event to supply icons for card headers.

CardView.VertScrollVisibility

LayoutViewOptionsBehavior.AllowPanCards

When cards do not vertically fit in the View, users can scroll card content using embedded scroll buttons (Card View) or by switching to the Panning mode (Layout View).

CardOptionsView.ShowLines

CardOptionsBehavior.Sizeable

CardOptionsBehavior.AutoHorzWidth

LayoutViewOptionsView.ShowCardLines

In Card View, these settings specify card widths and the availability of card splitters. Card widths in the Layout View can be changed only in the customization window.

CardOptionsView.ShowCardExpandButton

CardOptionsBehavior.AllowExpandCollapse

LayoutViewOptionsView.ShowCardExpandButton

LayoutViewOptionsBehavior.AllowExpandCollapse

Allow you to disable or hide card expand/collapse buttons.

Multiple Card Selection

If the ColumnViewOptionsSelection.MultiSelect option is enabled, users can click cards with the “Ctrl” or “Shift” keys pressed to select multiple records at once. In addition, the Layout View also supports marquee selection.

Data Grid - Cards - Marquee

In code, call the ColumnView.SelectRange method to select multiple cards manually or the ColumnView.GetSelectedRows method to retrieve all currently selected cards.

Card View: Field Captions and Value Cells

Cards display data in the “Caption: Value” format.

Data Grid - Cards - Values

Card View: Layout

The layout of cards in Card View depends on row and column counts, card size settings, and card indents.

Rows and columns

Card size

  • CardView.CardWidth — Specifies the default card width (200 pixels). If the CardOptionsBehavior.AutoHorzWidth option is enabled, cards stretch horizontally to occupy the View’s client area, within the “MaximumCardColumns” setting limit.
  • Card height is determined automatically depending on the card content — cards stretch vertically until they reach the maximum available row height (the “MaximumCardRows” setting) or the current View’s client area height.
  • If the CardOptionsView.ShowEmptyFields option is disabled, cards do not display empty values, which may cause cards to have different heights.

    Concepts - CardsLayout - EmptyFields

  • Cards can also have different heights when the CardOptionsBehavior.FieldAutoHeight setting is enabled. In this case, PictureEdit and MemoEdit in-place editors gain only as much height as their content requires.

    Concepts - CardsLayout - AutoHeight

Card Indent

  • Both vertical and horizontal distances between cards are controlled by the CardView.CardInterval property.

Card View: Scrolling

The Card View includes a horizontal scroll bar for the entire View (which allows users to scroll through cards) and a vertical scroll bar for individual cards that do not fit vertically within the current View region. When scrolling horizontally, the minimum scroll increment is one card.

Concepts - ViewScrolling - CardView

Related API

Card View: Customization Panel

Users can click the “Customize” button at the View’s top left corner to invoke the customization panel, apply filtering and sorting, and toggle column visibility.

Data Grid - Cards - CardView Customization

Set the CardOptionsView.ShowQuickCustomizeButton property to false to disable this button.

See Also