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: Auto Width Mode

This walkthrough is a transcript of the Auto Width Mode video available on the DevExpress YouTube Channel.

Expanded Column Width Modes Basics

Resize a column or the container control to see that the grid automatically adjust columns so that they occupy the entire View and the horizontal scrollbar is never required.

Another available mode is when no automatic adjustment occurs and the horizontal scrollbar appears if needed.

This tutorial will go over both these modes.

Expanded Switching Between Column Width Modes

The default behavior is automatic column width adjustment. To disable it, go to the View settings and in the GridView.OptionsView category disable the GridOptionsView.ColumnAutoWidth option. This will make the horizontal scrollbar available if necessary.

If you switch the option back to its default state, you can see how all columns are proportionally resized when you change the control's width.

Expanded Forcing a Column to Have a Fixed Width

If you want a certain column to keep its width when these adjustments happen, enable that column's OptionsColumn.FixedWidth option.

See how the Category column now keeps its width although all the other columns are shrunk.

Expanded Responding to Column Width Changes

As mentioned in the previous tutorial, you can respond to column width changes using the View's GridView.ColumnWidthChanged event. The handler in this example adjusts the Unit Price column's formatting, depending on its current width.

If you run the app, you see how this code hides decimal places in the prices when you resize the column.

But if you resize the container, the column shrinks, but proper formatting isn't applied. To fix this, you will also need to handle the grid control's SizeChanged event. And since column resizing is due to the Auto Width mode, the column's GridColumn.Width property doesn't actually change and you need to use the GridColumn.VisibleWidth property in the handler. Also add a code to display an AlertControl with both property values so you can compare them.

Run the application and resize the container. As you see, the GridColumn.Width property remains unchanged, while the GridColumn.VisibleWidth reflects the actual on-screen size and thus allows the formatting code to work.

Expanded See Also

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