[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Implementation Details
   [Collapse]Grid View Data Layout
    [Expand]Columns and Card Fields
    [Expand]Rows and Cards
     Data Cells
     Best Fit
     Compact Mode
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Filtering and Searching
   [Expand]Data Summaries
   [Expand]Paging and Scrolling
   [Expand]Focus, Navigation, Selection
   [Expand]Conditional Formatting
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[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)

Compact Mode

The GridControl allows you to build adaptive layouts. The control automatically adapts its data rows (or treelist nodes) in a fully customizable compact mode.

You should define the following properties to enable displaying row data in compact mode:



TableView.DataRowCompactTemplate / TreeListView.DataRowCompactTemplate

A template used to render data rows in compact mode.

TableView.SwitchToCompactModeWidth / TreeListView.SwitchToCompactModeWidth

GridControl's maximum width when the compact mode is enabled.

The GridControl automatically changes its layout when its width is less than or equal to the value specified by the TableView.SwitchToCompactModeWidth (TreeListView.SwitchToCompactModeWidth) property. In this case, the data rows (or nodes) are rendered using the TableView.DataRowCompactTemplate (TreeListView.DataRowCompactTemplate).

Expanded Compact Panel

The compact panel replaces the column headers and is used to group, sort and filter grid items in compact mode.


Use the TableView.CompactPanelShowMode / TreeListView.CompactPanelShowMode property to control the availability of the compact panel when GridControl switches to compact mode. The compact panel is enabled by default.


The GridControl supports displaying the compact panel in full-sized mode. Set the TableView.CompactPanelShowMode / TreeListView.CompactPanelShowMode property to Always to display the compact panel in the full-sized GridControl.

The code sample below demonstrates how to disable the compact panel.


Predefined Filters

The compact panel can display predefined filter items. When clicking a filter item, the GridControl displays only those items that meet the filter criteria. To add filters to the compact panel, pass a collection of filter items (instances of the CompactModeFilterItem class) to the TableView.CompactModeFilterItems (TreeListView.CompactModeFilterItems) property.

The code sample below demonstrates how to define a set of predefined filters.

The compact panel can display filter items in the following modes, according to the TableView.CompactFilterElementShowMode property value.


Compact panel does not display its filter items.


Compact panel displays filter items as a separate list.


Compact panel displays its filter items in a separate menu.


Compact panel merges filter items with the sort items in a single menu.


The GridControl allows you to merge the grid's header within the compact panel by setting the DataViewBase.HeaderPosition property to HeaderPosition.CompactPanel.

Expanded See Also

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