[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [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
  [Collapse]Application UI Manager
    [Collapse]Widget View
      Stack Layout Mode
      Table Layout Mode
      Flow Layout Mode
      Free Layout Mode
    [Expand]WindowsUI View
     Tabbed View
     Native MDI View
     Document Selector
     Non-Document Mode
   [Expand]Deferred Load
   [Expand]Interaction with Dock Panels
   [Expand]Bar and Ribbon Merging
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst 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]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Table Layout Mode

The Table Layout Mode provides a more flexible Widget View layout. If in Stack Layout Mode you can host your documents only within either vertically or horizontally oriented Stack Groups, the Table Layout mode defines a grid of multiple columns and rows. Widgets can occupy one or several cells of this grid.

To enable this mode, set the View's WidgetView.LayoutMode property to TableLayout. Rows and columns are the RowDefinition and ColumnDefinition class objects stored within the WidgetView.Rows and WidgetView.Columns collections, respectively. The easiest way to customize the Widget View's table layout is to use the Layout tab of the Document Manager Designer. Here, you can add or remove rows and columns with the corresponding buttons, and drag your widgets to the desired table cells. The following figure illustrates this Designer functionality.

Each column and row has its own Length property that works in the exact same way as for the Stack Group objects: you can specify either a strict pixel-based size for your row (column), or use the adaptive star-based size.

To place a document within the desired grid cell, use the Document.RowIndex and Document.ColumnIndex properties. Widgets can also stretch across multiple adjacent cells. To do so, set the Document.RowSpan and/or Document.ColumnSpan property to a positive integer value, greater than 1. The figure below illustrates a sample Widget View with the Table Layout Mode applied.

When you drag a Document within a table layout WidgetView, the Documents begin to wobble - all Documents that can swap positions with the current Document are displayed with a wobble animation (see the animation below). If you wish to disable this animation, set the WidgetView.AllowDragDropWobbleAnimation property to DefaultBoolean.False.

Is this topic helpful?​​​​​​​