Skip to main content
BuyLog In
ASP.NET Web Forms Controls
Search in…
Docs > ASP.NET WebForms Controls > Grid View > Concepts > GridView Table Layout
A newer version of this page is available. .
All docs
V19.2
ASP.NET Controls and MVC Extensions
Prerequisites
What's Installed
Common Concepts
ASP.NET WebForms Controls
Getting Started
Card View
Chart Control
Data and Image Navigation
Data Editors
Diagram
Docking and Popups
File Management
Gantt
Gauges
Grid View
Product Information
Getting Started
Fundamentals
Concepts
Bind to Data
Data Representation Basics
Focus and Navigation
Edit Data
Use Data Summaries
Filter Data
Group Data
Sort Data
Merge Data Cells
Save and Restore Client Layout
Format Data
Master-Detail Relationship
Appearance Customization
Adaptivity
GridView Table Layout
Templates
Export
Toolbars
ASPxGridLookup
Grid Designer
Visual Elements
Examples
Member Tables
HTML Editor
Multi-Use Site Controls
Pivot Grid
Reporting
Rich Text Editor
Scheduler
Site Navigation and Layout
Spell Checker
Spreadsheet
Tree List
Vertical Grid
Query Builder
ASP.NET MVC Extensions
Localization
Redistribution and Deployment
Get More Help
.NET Framework API Reference
Client API Reference
Download CHM

GridView Table Layout

  • 11 minutes to read

The ASPxGridView uses a table-based algorithm to render its content and supports two table layout modes:

  • Automatic - The grid calculates the columns’ widths proportionally based on the grid’s width and cells’ content.
  • Fixed - A column’s width depends on the grid’s and other columns’ widths and does not depend on the cells’ content.

A grid with a fixed or automatic layout supports non-responsive and responsive modes.

Note

This topic provides 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 columns’ widths in the sample images.

Automatic Table Layout

A grid should meet the following conditions to enable automatic table layout mode:

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 column’s calculated minimum width;
  • the grid’s width;
  • the column’s GridViewDataColumn.Width property.

Non-Responsive mode

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.

    GridLayout-1

  • 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.

    GridLayout-2

  • The grid renders its columns as follows if a column’s (“ID”) width is set to a value that is larger than the calculated maximum width, for example, 400px or 100%:

    • All columns’ widths (except the “ID” column) are equal to the calculated minimum width values.
    • The “ID” column’s width is calculated based on the remaining grid’s width. Set the Styles.Cell.Wrap property to false not to wrap the cell content.

    GridLayout-3

  • The “Product Name” and command columns’ widths are specified in relative values. The grid calculates other columns’ widths based on the remaining grid width.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="5%" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" />
<dx:GridViewDataTextColumn FieldName="ProductName" Width="40%"/>
<dx:GridViewDataTextColumn FieldName="Price"/>
<dx:GridViewDataTextColumn FieldName="Quantity" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="5%"/>

    GridLayout-4

    Note that the grid proportionally increases/decreases the columns’ widths when the browser’s width changes.

    GridLayout-5

Responsive Mode

In responsive mode (ASPxGridViewAdaptivitySettings.AdaptivityMode=GridViewAdaptivityMode.HideDataCells), the grid automatically hides columns one by one when the content do not fit the columns. The grid hides its columns according to their visible indices (GridViewDataColumn.VisibleIndex).

Use the GridViewColumn.AdaptivePriority property to specify the order in which the grid hides columns in responsive mode. The bigger a column’s GridViewColumn.AdaptivePriority property value is, the earlier the grid hides the column.

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 the minimum width (5%) and the “Product Name” column occupies 40% of the grid width. The AdaptivePriority property is not specified.

    The grid proportionally decreases its columns’ widths to the minimum values when the screen’s width changes. If the columns’ content (cells values, the header text, etc.) do not fit these minimum widths, the grid hides columns one by one according to their visible indices.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="5%" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" />
<dx:GridViewDataTextColumn FieldName="ProductName" Width="40%"/>
<dx:GridViewDataTextColumn FieldName="Price"/>
<dx:GridViewDataTextColumn FieldName="Quantity" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="5%"/>

    GridLayout-6

  • The grid hides columns with the specified AdaptivePriority property in the following order:

    • The “ID” column (the AdaptivePriority property is set to 3).
    • Command columns (the columns’ AdaptivePriority property is set to 2).
    • The “Price” and “Quantity” columns (the AdaptivePriority property is set to 1).
    • The “Product Name” and “Total” columns have not the specified GridViewColumn.AdaptivePriority property. The grid hides these columns last.
    <dx:GridViewCommandColumn ShowEditButton="true" Width="5%" AdaptivePriority="2"/>
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" AdaptivePriority="3"/>
<dx:GridViewDataTextColumn FieldName="ProductName" Width="40%"/>
<dx:GridViewDataTextColumn FieldName="Price" AdaptivePriority="1"/>
<dx:GridViewDataTextColumn FieldName="Quantity" AdaptivePriority="1"/>
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="5%" AdaptivePriority="2"/>

    GridLayout-6

Fixed Table Layout

Do one of the following to use the fixed table layout in a grid:

The grid uses the fixed table layout algorithm to calculate columns’ widths in table layout mode. In this mode, the grid’s horizontal layout depends only on the grid’s width, columns’ width, borders and cell spacing as described below:

  • The columns’ widths are not specified. - The grid renders columns with proportional widths.
  • The columns’ widths are specified. - The grid renders columns with the specified widths and does not take the cells’ content into account.
  • The grid contains at least one column with an unspecified width while other columns’ widths are specified. - The grid renders the columns with the specified widths. Columns with no specified widths equally occupy the remaining grid width.

The grid supports the following combinations of columns’ widths values:

  • All columns’ widths are absolute values (in pixels).
  • All columns’ widths are relative values (in percentage). The sum of all columns’ widths should be equal to 100%.
  • Several columns’ widths are specified in absolute values whereas other columns‘ widths are not specified.
  • Several columns’ widths are specified in absolute values whereas other columns‘ widths are specified in relative values. There are no columns with unspecified widths. For columns with percentage widths, the sum of their widths should be equal to 100%.

Note

A grid does not support a layout when at least one column has an unspecified width while other columns’ widths are specified in relative values. In this case, the grid layout can vary in different browsers.

Non-Responsive Mode

In this mode, a grid uses its and columns’ widths to calculate a layout. The grid equally distributes the remaining width between columns with unspecified widths.

The following examples illustrate different grid’s layouts in non-responsive mode:

  • The grid (width=700px) gives an equal width (100px) to each of its 7 columns with unspecified widths.

    The rendered columns’ widths remain the same if you set a column’s width to 55px. In this case, the calculated grid’s width is 7columns*55px=385px that is less than the specified grid’s width (ASPxWebControl.Width) - 700px. The grid proportionally increases the columns’ widths until the total sum of columns’ width equals 700px.

    Note that if you allow users to resize columns (the ColumnResizeMode property), the width of the first 6 columns will be 55px and the most right column will have a relative width.

    GridLayout-7

  • In this example, the “Product Name” column with an unspecified width occupies the remaining grid’s width after the browser renders all grid columns with the specified widths.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="55px" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="55px" />
<dx:GridViewDataTextColumn FieldName="ProductName"/>
<dx:GridViewDataTextColumn FieldName="Price" Width="55px" />
<dx:GridViewDataTextColumn FieldName="Quantity" Width="55px" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Width="55px" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="55px" />

    GridLayout-8

    Vice versa, if the only one column has the specified width (The “Product Name” column’s width is 300px), the grid distributes its remaining width between other columns.

    GridLayout-9

The examples below illustrate how to implement different grid layouts when columns’ widths values are in absolute and/or relative values for different grid’s widths: 350px, 700px, and 1000px. Set a columns’ ASPxGridBehaviorSettings.AllowEllipsisInText property to true to truncate the column’s caption.

  • The grid has the following columns’ settings:

    • Columns that contain only numbers (“ID”, “Price”, “Quantity”) or short strings (command columns) have 40px and 50px widths;
    • The “Product Name” column has an unspecified width so it occupies the remaining grid’s width.

    The grid renders its layout more proportionally on a narrow screen (350px) than on a large one when the “Product Name” column occupies too much space.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn FieldName="ProductName" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn FieldName="Price" Width="40px" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn FieldName="Quantity" Width="40px" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Width="50px" Settings-AllowEllipsisInText="True" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" />

    GridLayout-10

    The grid arranges its columns more proportionally on a larger screen, if you set the “Product Name”, “Price”, “Quantity” and “Total” columns’ widths to relative values.

    Note

    It is recommended that you first arrange columns on a narrow screen (350px) to choose an appropriate widths’ values in percentage.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn FieldName="ProductName" Settings-AllowEllipsisInText="True" Width="35%"  />
<dx:GridViewDataTextColumn FieldName="Price" Settings-AllowEllipsisInText="True" Width="20%"  />
<dx:GridViewDataTextColumn FieldName="Quantity" Settings-AllowEllipsisInText="True" Width="20%" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Settings-AllowEllipsisInText="True" Width="25%" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" />

    GridLayout-11

  • The grid does not overstretch the “Price”, “Quantity” and “Total” columns when you specify their maximum widths.

    Note

    Starting with v18.2, the ASPxGridView provides the GridViewColumn.MaxWidth property.

    Note that the GridViewColumn.MaxWidth property is not in effect if a grid width is not specified.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn FieldName="ProductName" Settings-AllowEllipsisInText="True" Width="35%"  />
<dx:GridViewDataTextColumn FieldName="Price" Settings-AllowEllipsisInText="True" Width="20%" MaxWidth="70" />
<dx:GridViewDataTextColumn FieldName="Quantity" Settings-AllowEllipsisInText="True" Width="20%" MaxWidth="70" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Settings-AllowEllipsisInText="True" Width="25%" MaxWidth="70" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" />

    GridLayout-12

You can do the following not to truncate columns’ content on a narrow screen (350px):

Important

The ASPxGridSettings.HorizontalScrollBarMode property is not in effect in the previous example since the data columns’ widths are specified in percentage. Starting with v18.2, you can use the GridViewColumn.MinWidth property to restrict the minimum column’s width and enable the horizontal scrollbar.

  • The following example illustrates how to specify the minimum columns’ widths to display the horizontal scrollbar in the grid on a narrow screen.

    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" Settings-AllowEllipsisInText="True" />
<dx:GridViewDataTextColumn FieldName="ProductName" Settings-AllowEllipsisInText="True" Width="35%" MinWidth="135" />
<dx:GridViewDataTextColumn FieldName="Price" Settings-AllowEllipsisInText="True" Width="20%" MaxWidth="70" MinWidth="45" />
<dx:GridViewDataTextColumn FieldName="Quantity" Settings-AllowEllipsisInText="True" Width="20%" MaxWidth="70" MinWidth="62" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Settings-AllowEllipsisInText="True" Width="25%" MaxWidth="70" MinWidth="50" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" />

    GridLayout-13

Responsive Mode

In this mode, a grid hides columns one by one according to their GridViewColumn.AdaptivePriority property values if columns’ content (cells values, the header text, etc.) do not fit the minimum columns’ widths.

The examples below illustrate how to customize a grid’s layout in responsive mode:

  • The grid columns’ settings:

    • The “ID” column’s AdaptivePriority property is set to 3.
    • The “Edit” and “Delete” columns’ AdaptivePriority property is set to 2.
    • The “Price” and “Quantity” columns’ AdaptivePriority property is set to 1.
    • The grid hides the “Product Name” and “Total” columns last as their GridViewColumn.AdaptivePriority property is not specified.

    The grid starts to hide its columns when the following content does not fit the “Price”, “Quantity” and “Total” columns’ width:

    • The “Price”, “Quantity” and “Total” columns’ header captions.
    • The “Product Name” column’s cell values.
    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" AdaptivePriority="2" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" AdaptivePriority="3" />
<dx:GridViewDataTextColumn FieldName="ProductName" Width="35%"   />
<dx:GridViewDataTextColumn FieldName="Price" Width="20%" MaxWidth="70" AdaptivePriority="1" />
<dx:GridViewDataTextColumn FieldName="Quantity" Width="20%" MaxWidth="70" AdaptivePriority="1" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Width="25%" MaxWidth="70"  />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" AdaptivePriority="2" />

    GridLayout-14

Starting with v18.2, enable the ASPxGridViewAdaptivitySettings.AllowHideDataCellsByColumnMinWidth property and specify the GridViewColumn.MinWidth property to resize and hide columns as follows: decrease the columns’ widths to the MinWidth property value, truncate the content and then hide the columns.

  • The columns have the following MinWidth property values:

    • The “Price” and “Quantity” columns: 35px
    • The “Total” column: 40px
    • The “Product Name” column: 90px
    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" AdaptivePriority="2" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" AdaptivePriority="3" />
<dx:GridViewDataTextColumn FieldName="ProductName" Width="35%" MinWidth="90" />
<dx:GridViewDataTextColumn FieldName="Price" Width="20%" MaxWidth="70" MinWidth="35" AdaptivePriority="1" />
<dx:GridViewDataTextColumn FieldName="Quantity" Width="20%" MaxWidth="70" MinWidth="35" AdaptivePriority="1" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Width="25%" MaxWidth="70" MinWidth="40" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" AdaptivePriority="2" />

    In this example, the grid truncates the “Product Name” column and hides other columns only when the “Product Name” column’s width equals its minimum value (MinWidth property). With the current columns settings, the “Product Name” column narrows faster than other columns. Correspondingly, the grid hides the “Price”, “Quantity” and “Total” columns before their widths equal the specified minimum values.

    GridLayout-15

  • Adjust the columns’ widths proportionally to their minimum widths (90px, 40px, 40px, 35px) to change this behavior:

    • “Product Name” column’s width: 35% -> 50%
    • “Price” column’s width: 20% -> 15%
    • “Quantity” column’s width: 20% -> 15%
    • “Total” column’s width: 25% -> 20%
    <dx:GridViewCommandColumn ShowEditButton="true" Width="50px" AdaptivePriority="2" />
<dx:GridViewDataTextColumn FieldName="OrderID" Caption="ID" Width="30px" AdaptivePriority="3" />
<dx:GridViewDataTextColumn FieldName="ProductName" Width="50%" MinWidth="90" />
<dx:GridViewDataTextColumn FieldName="Price" Width="15%" MaxWidth="70" MinWidth="35" AdaptivePriority="1" />
<dx:GridViewDataTextColumn FieldName="Quantity" Width="15%" MaxWidth="70" MinWidth="35" AdaptivePriority="1" />
<dx:GridViewDataTextColumn UnboundType="Integer" FieldName="Total" Caption="Total" Width="20%" MaxWidth="70" MinWidth="40" />
<dx:GridViewCommandColumn ShowDeleteButton="true" Width="50px" AdaptivePriority="2" />

    GridLayout-16