Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Data Binding
   [Collapse]Views
    [Expand]Grid View
     Banded Grid Views
    [Collapse]Card and Layout Views
      Layout View
     WinExplorer View
    [Expand]Tile View
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Card and Layout Views


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

Common Information Card View Layout View

Expanded Cards

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

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, end-users can scroll card content by embedded scroll buttons (Card View) or by entering 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 card expand\collapse buttons or render them invisible.

Expanded Multiple Card Selection

If the ColumnViewOptionsSelection.MultiSelect option is enabled, end-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.

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

Expanded Card View: Field Captions and Value Cells

Cards display data in the "Caption: Value" format.

Expanded 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 card width (200 pixels by default). If the CardOptionsBehavior.AutoHorzWidth option is enabled, cards stretch horizontally to occupy the View's client area, but no more than the "MaximumCardColumns" setting allows them to.
  • 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.

  • 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.

Card Indent

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

Expanded Card View: Scrolling

The Card View provides a horizontal scroll bar for the entire View (allows end-users to scroll through cards) and a vertical scroll bar for individual cards that do not fit vertically in the current View region. When scrolling horizontally, the minimal scroll step is one card.

Related API

Expanded Card View: Customization Panel

End-users can click the "Customize" button at the View's top left corner to invoke the customization panel, apply filtering, sorting, and toggle column visibility.

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

How would you rate this topic?​​​​​​​