aspnet-120706-components-grid-view-concepts-gridview-table-layout.md
The ASPxGridView uses a table-based algorithm to render its content and supports two table layout modes:
A grid with a fixed or automatic layout supports non-responsive and responsive modes.
Note
This topic contains examples that illustrate how a grid with 5 data columns and 2 command columns renders its columns with different settings. The grid’s footer displays the calculated column widths in the sample images.
A grid should meet the following conditions to enable automatic table layout mode:
false.The grid uses the automatic table layout algorithm to calculate the minimum column width required to fit the column’s content. A rendered column’s width depends on the following settings:
The following examples illustrate different grid layouts in non-responsive mode:
The grid (width=600px) automatically adjusts its columns if their widths are not specified.
The grid renders a column (“ID”) with the calculated minimum width (34px) if the column’s Width property is set to a value (for example, 5px or 1%) that does not allow the column to display all its content.
The grid renders its columns as follows if a column width is set to a value that is larger than the calculated maximum width (for example, 400px or 100%):
The widths of the “Product Name” and command columns are specified in relative values. The grid calculates other column widths based on the remaining grid width.
In responsive mode (ASPxGridViewAdaptivitySettings.AdaptivityMode=GridViewAdaptivityMode.HideDataCells), the grid automatically hides columns one by one when the content does not fit the columns. The grid hides columns according to their visible indices (GridViewDataColumn.VisibleIndex).
Use the GridViewColumn.AdaptivePriority property to specify the column priority in responsive mode. The grid hides columns in descending order based on the GridViewColumn.AdaptivePriority property value.
Note
The grid hides command columns after data columns if they have the same AdaptivePriority property values.
The following examples illustrate how a grid with different layouts resizes and hides columns in responsive mode:
In this example, the command columns have a minimum width (5%) and the “Product Name” column occupies 40% of the grid width. The AdaptivePriority property is not specified.
The grid hides columns with the specified AdaptivePriority property in the following order:
Do one of the following to use the fixed table layout in a grid:
The grid uses the fixed table layout algorithm to calculate column widths in table layout mode. In this mode, the grid’s horizontal layout depends only on the grid width, column widths, borders, and cell spacing as described below:
Note
In HorizontalScrollBarMode, do the following to correctly display columns with undefined widths:
Specify percentage widths for these columns to allow them to occupy the remaining grid width.
Specify the MinWidth property for these columns to prevent them from collapsing.
The grid supports the following combinations of column width values:
Note
A grid does not support a layout when at least one column has an undefined width while other column widths are specified in percentage values. In this case, the grid layout can vary in different browsers.
In this mode, a grid uses its width and specified column widths to calculate the layout. The grid equally distributes the remaining width among columns with unspecified widths.
The following examples illustrate different grid layouts in non-responsive mode:
The grid (width=700px) applies an equal width (100px) to each of its 7 columns with undefined widths.
In this example, the “Product Name” column with an unspecified width occupies the remaining grid width after the browser renders all grid columns with specified widths.
The examples below illustrate how to implement different grid layouts when column widths are in absolute and/or percentage values for different grid widths: 350px, 700px, and 1000px. Set a column’s ASPxGridBehaviorSettings.AllowEllipsisInText property to true to truncate a column caption that does not match its width and add an ellipsis.
The grid has the following column settings:
The grid does not stretch the “Price”, “Quantity”, and “Total” columns to the appropriate percentage widths when you specify their maximum widths.
You can do the following to prevent column content truncation on narrow screens (350px):
Important
The ASPxGridSettings.HorizontalScrollBarMode property is not in effect in the previous example since the data column widths are specified in percentage. In v18.2 and higher, you can use the GridViewColumn.MinWidth property to restrict the minimum column width and enable the horizontal scrollbar.
In this mode, the grid hides columns in order according to the corresponding GridViewColumn.AdaptivePriority property values if column content (cells values, header text, etc.) does not fit the minimum column widths.
The examples below illustrate how to customize a grid’s layout in responsive mode:
In v18.2 and higher, enable the ASPxGridViewAdaptivitySettings.AllowHideDataCellsByColumnMinWidth property and specify the GridViewColumn.MinWidth property to resize and hide columns as follows: decrease the column widths to the MinWidth property value, truncate the content, and then hide the columns.
The columns have the following MinWidth property values:
Adjust the column widths proportionally to their minimum widths (90px, 40px, 40px, 35px) to change this behavior: