Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

Tutorial: Auto Row Height

  • 2 minutes to read

#Tutorial Video

In this video, you will learn how to enable automatic row height calculation, so that records completely display text and image data.

Accept "Target Cookies" to watch embedded YouTube videos Open cookie settings
Or
Watch this video on Youtube Watch on youtube

#Default Row Height

By default, the GridView calculates the row height, so that cells can fully display a single line of text. If a cell’s text data exceeds the cell size, the value will be truncated. Images will be zoomed proportionally to fit the automatically calculated cell height.

GridRowLayout_DefaultRowHeightResult

#Enable Automatic Row Height Calculation

To enable automatic row height calculation, first access View settings, expand GridView.OptionsView and turn on GridOptionsView.RowAutoHeight.

GridRowLayout_RowAutoHeightProperty

#Automatic Row Height and Image Data

When automatic row height calculation is turned on, images will be displayed using their original dimensions as specified in the database. You can also try to delete an image from a cell using the image editor’s built-in menu. If you do that, the row height will be automatically adjusted.

GridRowLayout_RowsOfImageHeight

#Automatic Row Height and Text Data

To enable automatic height calculation for cells with text data, first select the column and use the GridColumn.ColumnEdit property to assign a new MemoEdit editor.

GridRowLayout_AssigningColumnEditor

Ensure that the RepositoryItemMemoEdit.WordWrap property is set to true and then run the application. The grid will then adjust the row height, so that the text is completely visible.

GridRowLayout_RowsOfTextHeight

If you add or remove text, the layout will be updated.

#Specify Image Height Manually

If you need to specify a custom height for cell images, explicitly assign a PictureEdit to the column. Now you can change the editor’s properties and set its RepositoryItemPictureEdit.CustomHeight to the required value.

GridRowLayout_PictureEditCustomHeight

If you run the application, you will see that images are now truncated. The editor allows you to see the entire image by dragging it.

GridRowLayout_ImageCustomHeightResult

To shrink the images so that they fit the specified cell height, expand the column’s GridColumn.ColumnEdit property and set RepositoryItemPictureEdit.SizeMode to PictureSizeMode.Zoom. Note that in this mode, the row will keep its height if you remove the image.

GridRowLayout_RowsWithScaledImages

See Also