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

Layout View

This document outlines features specific to LayoutView only. For information on common card and selection features, refer to the root Card and Layout Views article.

Expanded Template Card

The Layout View employs the Layout Control to arrange content inside cards. For every grid column, a LayoutViewField object is generated. Switch to the "Layout | Template Card" tab in the Data Grid Designer to re-arrange data fields, rename field captions, add separators and empty space items, set up card alignment options, etc.

Related API

  • LayoutView.TemplateCard - provides access to the template card and allows you to modify it in code.

    The following example shows how to create and customize a Layout View in code. In the example, a template card consisting of six fields is created. The "Address", "City" and "Country" fields are grouped into a separate "Address Info" group.

  • LayoutView.Items - provides access to both visible and hidden card layout items (fields, empty space items, separators, etc.).
  • LayoutView.HiddenItems - provides access to hidden card layout items only.

Expanded View Designer

In the Data Grid designer, switch to the " Layout | View Layout" tab to set up most significant View options - card layout mode, card intervals, header visibility, availability of expand/collapse buttons, etc.

Expanded Card Layout Modes

There are six card layout modes available. You can set the required mode by changing the LayoutViewOptionsView.ViewMode property, while at runtime, end-users can switch between these modes by clicking the top View panel (see below).

You can either disable specific buttons on this panel (modify properties accessed through the LayoutView.OptionsHeaderPanel collection), or hide the panel entirely (disable the LayoutViewOptionsView.ShowHeaderPanel property).

Single Record

Single Row

Single Column

Multi Row and Multi Column

Carousel

  • Cards are arranged along an elliptical path. The currently selected card is displayed at the middle of a curve and neighboring cards gradually fade out.
  • Access properties are provided by the LayoutView.OptionsCarouselMode object to modify the curve.

Expanded Stretching Cards

You can stretch cards vertically or horizontally to fit them in a current View client area. To do so, enable required StretchCardToView... properties.

Run the Layout View demo to test this feature.

Expanded Panning

The Layout View does not provide embedded scroll buttons to scroll cards that are larger than a View client area. Instead, end-users can click the hand icon in the top panel to enter the Panning mode. In this mode, users click anywhere inside a View and drag it in the required direction, much like on touch-input devices.

Related API

Expanded Runtime Customization

End-users can click the "Customization" button in the top panel to re-arrange fields, add secondary UI elements (labels, empty spaces and separators), modify card sizes and indents, etc. The amount of available options depends on whether the invoked dialog is standard or the advanced one.

Related API

Expanded See Also

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