Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Collapse]Image and Data Browsing
   [Expand]Product Information
   [Collapse]DataView
     ASPxDataView Overview
    [Collapse]Concepts
      Binding to Data
      Data Items
      Layout Modes
      Data Paging
    [Expand]Visual Elements
   [Expand]Headline
   [Expand]Image Gallery
   [Expand]Image Slider
   [Expand]Image Zoom
   [Expand]News Control
   [Expand]Pager
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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 Modes

The ASPxDataView control can organize its data items in different ways depending on the chosen layout mode.

  • Table Layout
    In this mode, data items are organized in a table with fixed row and column count.

  • Flow Layout
    In this mode, data items flow one after another to occupy all available space.

The current layout mode is controlled by the ASPxDataView.Layout property, which can have one of the Layout values. The default layout is Table.

Expanded Table Layout

In the Table layout mode, data items are organized in a table with the specified column and row count.

Layout settings for this mode are stored in the ASPxDataView.SettingsTableLayout property, which is an object of the DataViewTableLayoutSettings type.

An item size is defined automatically based on the control's size and provided table dimensions. If the control's size is changed (e.g., by window resizing), item size is recalculated.

In the Table layout mode, the number of items displayed on a single page is calculated based on the specified table dimensions. If the page size is changed by an end-user with the pager UI, it affects the number of rows. The number of columns can be changed only programmatically.

Expanded Flow Layout

In the Flow layout mode, data items flow one after another to fill the available area in the best possible way.

Layout settings for this mode are stored in the ASPxDataView.SettingsFlowLayout object of the DataViewFlowLayoutSettings type.

An item size is set by the DataViewItemStyle.Width and DataViewItemStyle.Height (ASPxDataViewBase.ItemStyle.Width and ASPxDataViewBase.ItemStyle.Height). If the control's size is changed (e.g., by window resizing), item size doesn't change. Instead, items are rearranged inside the control to fit the available area in the best possible way.

You can refer to the E1089 Code Central example to observe the Layout mode in action. Run it online and resize the browser window to see how items are rearranged to fill the available space.

Expanded See Also

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