Layout

• Dec 22, 2020
• 3 minutes to read

The Grid dashboard item allows you to customize its layout in various ways. You can manage the width of grid columns, specify the visibility of column headers, enable cell merging, etc.

To do this, use the Layout and Column Width Mode groups in the Design Ribbon tab of the Grid Tools contextual tab set.

• Column Width Modes
• Column Header
• Cell Merging
• Word Wrapping

Column Width Modes

The Grid dashboard item allows you to manage column widths using different modes. Use buttons in the Column Width Mode group to manage the column width modes.

The following modes are available.

AutoFit to Contents

The grid adjusts columns to the minimum width required to completely display their content automatically. If the entire content cannot be displayed within the dashboard item, horizontal scrolling is enabled.

To enable this mode in code, set the GridOptions.ColumnWidthMode property to GridColumnWidthMode.AutoFitToContents.

AutoFit to Grid

The grid adjusts the width of all columns to fit their content in an optimal way. If you are changing the size of the dashboard item, the width of columns is changed proportionally.

In code, set the GridOptions.ColumnWidthMode property to GridColumnWidthMode.AutoFitToGrid.

Manual

The grid allows you to adjust column widths manually. In code, set the GridOptions.ColumnWidthMode property to GridColumnWidthMode.Manual.

In this mode, you can adjust the width of individual columns in the following ways.

• Specify the width of the required column by dragging the right edge of the column header.

  

  In this case, all columns preserve their relative size when the grid width is changed.

  In code, set the column’s GridColumnBase.WidthType property to GridColumnFixedWidthType.Weight and specify the relative column width using the GridColumnBase.Weight property.

• Specify the column width and fix it by right-clicking the required column header and selecting Fix Width.

  

  You can also specify the fixed column width by selecting Column Width… This invokes the Column Width window that allows you to specify the width of the column in characters.

  

  In code, set the column’s GridColumnBase.WidthType property to GridColumnFixedWidthType.FixedWidth and specify the column width using the GridColumnBase.FixedWidth property.

• Fit the column width to its content and fix it by right-clicking the required column header and selecting Fit to Content.

  In code, set the column’s GridColumnBase.WidthType property to GridColumnFixedWidthType.FitToContent.

Column Header

Use the Column Headers button to toggle column header visibility.

To manage header visibility in code, use the GridOptions.ShowColumnHeaders property.

Cell Merging

The Grid allows you to merge neighboring cells with identical values . To do this, use the Merge Cells button.

Note

Note that the Web Dashboard does not support cell merging.

Note

Banded rows are not available when cell merging is enabled.

In code, use the GridOptions.AllowCellMerge property.

Word Wrapping

The word wrapping feature enables the capability to display cell content on multiple lines if the size of a dashboard item is insufficient to completely display the cell content on a single line.

Note

The word wrapping feature is not in effect when the AutoFit to Contents column width mode is enabled.

In code, use the GridOptions.WordWrap property to enable this capability.