Log In
[Expand]General Information
[Collapse]WinForms Controls
 [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]Binding to Data
   [Collapse]Grid View
    [Expand]Columns and Card Fields
    [Collapse]Rows and Cards
      Rows and Cards Overview
      Tutorial: Auto Row Height
      Tutorial: Row Height and Layout Basics
      Rows Layout
    [Expand]Row, Column and Cell Access API
    [Expand]Split Presentation
    [Expand]Cell Merging
    [Expand]Row Preview Sections
   [Expand]View Technology
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [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]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Report Server
[Expand]eXpressApp Framework
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Rows Layout

Grid Views present their data with the help of rows and columns. This topic discusses how rows are arranged within Views and how their layout can be customized. For information on column layout, please refer to the Column Width Options - Auto-Width, Best Fit and Auto-Fill Column topic.

Expanded Online Video

Learn how to allow end-users to resize data rows, how to pre-define the height of data and group rows, how the grid adjusts row height based on currently applied styles and how you can use a specially designed event to specify custom height for individual rows.

Expanded Row Layout Basics

By default, rows are displayed immediately one after another. All rows have the same height that is determined by font settings applied to rows. The row height is determined by the row that requires the maximum text height. Please refer to the Appearances Overview topic for details on modifying row appearance settings.

The image below shows a default row layout (when all rows use the same font settings), as well as modified group row font settings. Note that the data row height has changed, even though font settings were not.

The default behavior described above can be modified using a number of properties. First, you can set data row height manually using the View's GridView.RowHeight property. Group row height is, in turn, specified by the GridView.GroupRowHeight property. Finally, you can apply intervals between data rows. Use the GridView.RowSeparatorHeight property for this purpose. Note that the GridView.RowHeight and GridView.GroupRowHeight properties can only be used to increase row height. Row height cannot be set to less than what is required by text heights.

The following image illustrates the GridView.RowHeight, GridView.GroupRowHeight and GridView.RowSeparatorHeight properties.

Expanded Variable Data Row Height

Grid Views allow you to display data rows with variable heights. This occurs in two cases. The first case is when data row height depends on row contents. To enable this feature, you need to set the GridOptionsView.RowAutoHeight option to true. Note that row height can only depend on the contents of cells that use either MemoEdit or PictureEdit to display and edit their values. Please refer to the In-place Editors Overview topic for details on assigning editors to cells.

Note: when using MemoEdit and variable row height, make sure that the TextOptions.WordWrap option of a cell's Appearance object is not set to WordWrap.NoWrap. Refer to the Appearances Overview topic for more information on appearances.

You can also assign different heights to rows manually. Handle the GridView.CalcRowHeight event for this purpose. The event is raised for each data row when the View or a row is invalidated. It enables you to specify a processed row's height. The code below illustrates an event handler example.

The following image displays the result.

Expanded See Also

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