[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
  Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Implementation Details
   [Expand]Views
   [Collapse]Grid View Data Layout
    [Expand]Columns and Card Fields
    [Expand]Bands
    [Expand]Rows and Cards
    [Expand]Nodes
     Data Cells
     Best Fit
     Compact Mode
   [Expand]Binding to Data
   [Expand]Master-Detail Data Representation
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Selection
   [Expand]Filtering and Searching
   [Expand]Sorting
   [Expand]Data Summaries
   [Expand]Paging and Scrolling
   [Expand]Focus and Navigation
   [Expand]Conditional Formatting
   [Expand]Drag-and-Drop
   [Expand]Appearance Customization
   [Expand]MVVM Enhancements
   [Expand]Printing and Exporting
   [Expand]End-User Interaction
   [Expand]Miscellaneous
   [Expand]Performance Improvement
   [Expand]Design-Time Features
   [Expand]Visual Elements
   [Expand]End-User Capabilities
   [Expand]Examples
  [Expand]Ribbon, Bars and Menu
  [Expand]Charts Suite
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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:

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.

Availability

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.

Tip

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.

Customization

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.

CompactFilterElementShowMode.NeverCompact panel does not display its filter items.
CompactFilterElementShowMode.ListCompact panel displays filter items as a separate list.

CompactFilterElementShowMode.ContextMenuCompact panel displays its filter items in a separate menu.

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

Header

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?​​​​​​​