This blog post was written in response to support center topic Q241888: “how to wrap column caption”. There are a couple of quick steps. If you are in a hurry here is the short answer. For detailed instructions read on.
1. Select the GridControl and click on Run Designer
2. Select the Appearance Properties
3. Se the ColumnPanelRowHeight to 50 (pixels for the default font; a little more if you have long headers/column names)
4. Expand Appearance.HeaderPanel.Options and set UseTextOptions to True
5. Expand Appearance.HeaderPanel.TextOptions and set Trimming to None or Default. (Default will add an ellipsis {e.g. Custom…} for long words
6. Expand Appearance.HeaderPanel.TextOptions and set WordWrap to Wrap
Here is the long and short of it.
By default the GridControl column row is set to be approximately one row in height. By default long column names are elided {e.g. Custo… for Customer ID} if the form or grid is too small to display the full column name. Real estate on a form is like that. However, if the grid column name is elided then the ToolTip—displayed by hovering—will contain the full column name. If you want to display more of the column name or as much as possible then follow these steps:
1. Add a GridControl from the Data tab to a Windows Form. (I am using version 9.3.2 for the example)
2. Click on the GridControl smart tag, click Choose Data Source and pick Add Project Data Source
3. Configure the Northwind Customers table (or any table you like)
4. Click Run Designer (see Figure 1)
5. In the Designer set the ColumnPanelRowHeight (in pixels) to 50—estimate the height in pixels; 50 should be large enough for two rows in the default font
6. Expand the Appearance.HeaderPanel properties (in the designer)
7. Using designer expand the sub-property Options (see Figure 2) and set UseTextOptions to True
8. Expand the Appearance.HeaderPanel.TextOptions property and set Trimming to Default or None and WordWap to Wrap
9. Close the designer and run the sample
If you select WordWrap = Wrap and Trimming to Default then the grid will elide long names that don’t fit the column width and wrap shorter words, breaking on words. If you select WordWrap = Wrap and Trimming = None then the grid will wrap words based on individual words. This isn’t always possible, so you get wrapping in the middle of words if necessary.
Figure 3 shows a combination of wrapped headers, elided words, and wrapping. This is ultimately a necessary step based on how much screen space is available. The code can only use the space available and make a best guess at how to display the headers based on the available space and options you have chosen. The good news is that the Tooltip (see Figure 4) shows the whole header name, and the user (at run-time can) can right-click the column headers and choose Best Fit, Best Fit (all columns), view the Tooltip by hovering the mouse, or expand individual columns. Reasonable length column names with grids using the maximum real estate space should be able to display full column headers. Where you may run into problems is with huge tables or long column names.
If you want to figure out how to set the ColumnPanelRowHeight to an optimal height, dynamically, then you will need to determine the longest string, calculate the column width (roughly, and it can be changed by the user at runtime) and set the ColumnPanelRowHeight based on the font’s TextHeight. The code is Graphics.MeasureString(string, Font) which returns a SizeF type and the y property contains the string height for that font. Next, split the header by words and you should have an approximation of the number of rows, so height is SizeF.Y * rows. Again, this is a loose approximation and may still not be perfect when the user starts gerrymandering the layout at runtime.
I’d be interested in hearing about scenarios that necessitate additional solutions or options.
Happy Holidays!
Figure 1: Run the designer to help you configure GridControl options.
Figure 2: The designer will help you in experimenting with grid options.
Figure 3: Wrapped headers with default trimming.
Figure 4: Hovering the mouse displays the column header as a tooltip.