Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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
   [Collapse]Getting Started
    [Collapse]Walkthroughs
     [Expand]Appearance and Conditional Formatting
     [Expand]Data Editing
     [Expand]Hit Information
     [Expand]Data Binding and Working with Columns
     [Collapse]Grid View - Columns, Rows and Cells
       Tutorial: Column Resizing
       Tutorial: Best Fit Option
       Tutorial: Auto Width Mode
       Tutorial: Fixed Columns
       Tutorial: Column Reordering
       Tutorial: Column Visibility
       Tutorial: Column Chooser API
       Tutorial: Auto Row Height
       Tutorial: Cell Merging
       Tutorial: Identifying Rows
       Tutorial: Row Height and Layout Basics
     [Expand]Banded Views
     [Expand]WinExplorer View
     [Expand]Tile View
     [Expand]Grouping
     [Expand]Filter and Search
     [Expand]Sorting
     [Expand]Summaries
     [Expand]Split Presentation
     [Expand]Row Preview Sections
     Data Grid and Views
   [Expand]Data Binding
   [Expand]Views
   [Expand]Data Editing and Validation
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Filter and Search
   [Expand]Summaries
   [Expand]Focus and Selection Handling
    Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
    Split Presentation
    Row Preview Sections
    Scrolling
   [Expand]Batch Modifications
   [Expand]Hit Information
    Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [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]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

Tutorial: Row Height and Layout Basics

This walkthrough is a transcript of the Row Height and Layout Basics video available on the DevExpress YouTube Channel.

In this tutorial, you will 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 Enabling Row Resizing for End-Users

At design-time, click the View label to access its properties, expand GridView.OptionsCustomization and enable the GridOptionsCustomization.AllowRowSizing property.

End-users can now resize rows by dragging any row's bottom edge.

Note that this changes row height for all rows at once. End-users cannot freely resize individual rows.

Expanded Specifying Row Height

You can predefine row height at design-time or in code using the grid View's properties. GridView.RowHeight sets the height for data rows, GridView.GroupRowHeight for group rows.

Group grid data to see that the changes were applied.

Expanded Applying Visual Styles

Grid row height is also affected by applied visual styles. To illustrate this, first turn on the GridOptionsView.EnableAppearanceOddRow option. Then, access the GridViewAppearances.OddRow appearance settings and change the font size.

You'll see that the row height changed, but once again it has changed for all rows at once, not only for odd rows.

If you allow end-users to resize rows at runtime, they won't be able to resize them less than required to display odd rows completely.

Expanded Providing Variable Row Height

To apply height to individual rows, you'll need to handle the GridView.CalcRowHeight event. Use it to specify different heights for odd and even rows.

Run the application to see that now rows have different heights, as set by the event handler code.

Expanded See Also

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