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
    [Collapse]Columns and Card Fields
     [Expand]Customization Form
      Tutorial: Column Resizing
      Tutorial: Best Fit Option
      Tutorial: Auto Width Mode
      Tutorial: Fixed Columns
      Tutorial: Column Reordering
      Tutorial: Column Visibility
      Tutorial: Column Chooser API
      Column and Card Field Overview
      Data Cells
      Column Width Options - Auto-Width, Best Fit and Auto-Fill Column
      Column Visibility
      Creating Columns and Binding Them to Data Fields
      Fixed Columns
    [Expand]Rows and Cards
    [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

Tutorial: Best Fit Option

This walkthrough is a transcript of the Best Fit Option video available on the DevExpress YouTube Channel.

Expanded Default Behavior

The grid View provides built-in column header menus where you can select the Best Fit option. This adjusts a column's width to completely display its content.

The same can be achieved by double-clicking a column's right edge. To adjust all columns at once, use the Best Fit (all columns) option from the column header menu.

Expanded Applying the Best Fit Option at Design Time

The same menus are available at design time, but the mentioned menu items or a header edge double-click will have no effect, since data isn't loaded. To work around this, you will need to open the grid's Designer dialog and switch to the Layout Page. This is where you can pre-load data and then apply the best fit width to columns.

Expanded Limiting the Number of Records to Apply Best Fit

By default, when you apply the best fit width to a column, the View checks values in all rows. This might have an unnecessary impact on performance with larger data sources. To limit the number of records the grid View scans, use the GridOptionsView.BestFitMaxRowCount property under GridView.OptionsView. In this example, set it to 3 and apply the best fit width again to see that the result differs.

Expanded Disabling the Best Fit Option

If you disable column resizing, the Best Fit option gets disabled as well – both via the context menu or by double-clicking a column header's right edge.

Expanded Forcing a Column to Have a Fixed Width

Restore default values for all changed options and set a column's OptionsColumn.FixedWidth option. This means that the corresponding column will keep its width when you apply the Best Fit feature to the view.

Expanded Applying Best Fit in Code

Add three buttons to the UI to see how you can use this feature in code. One button will call the Grid View’s GridView.BestFitColumns method that affects all columns. The second uses a column's GridColumn.BestFit method to apply the feature to an individual column. The third method gives you the most flexibility, since you can calculate the width using the GridColumn.GetBestWidth method and then adjust the value before actually applying the change to a column.

You can now run the application and see how all three methods work at runtime.

Expanded See Also

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