ASPxGridView Fixed Table Layout Specifics (Scrolling and Column Resizing)

• Sep 27, 2023
• 2 minutes to read

The ASPxGridView control uses the fixed table layout algorithm to render its HTML when the scrolling and/or column resize features are enabled. In fixed table layout mode, the widths of the control and its columns affect the grid’s horizontal layout.

Note

Set the ASPxGridSettings.VerticalScrollBarMode or ASPxGridSettings.HorizontalScrollBarMode property to ScrollBarMode.Auto to enable the ASPxGridView’s scroll functionality and render the grid as a table with a fixed layout.

Layout Scenarios

In this mode, the column width does not depend on the column content. The following scenarios illustrate how the ASPxGridView control renders its layout according to the GridViewDataColumn.Width property setting.

Note

Refer to the following topic for more information about the ASPxGridView’s layout scenarios in fixed table mode: GridView Table Layout.

• The fixed-sized grid has four columns, two of which have specified widths (the Width property). The grid’s width is greater than the total width of the specified columns. In this case, the grid automatically resizes the columns with unspecified widths.

  HTML

  <table style="table-layout: fixed; width: 300px;">
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:100px">test2</td>
          <td>test3</td>
          <td>test4</td>
      </tr>
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:100px">test2</td>
          <td>test3</td>
          <td>test4</td>
      </tr>
  </table>
  

  Result:

  

• The fixed-sized grid has four columns, two of which have specified widths (the Width property). The grid’s width is less than the total width of the specified columns. In this case, the grid’s width equals the total width of columns (whose Width property is specified). Columns with unspecified widths have negative width values, and are displayed outside the grid.

  HTML

  <table style="table-layout: fixed; width: 100px;">
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:100px">test2</td>
          <td>test3</td>
          <td>test4</td>
      </tr>
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:100px">test2</td>
          <td>test3</td>
          <td>test4</td>
      </tr>
  </table>
  

  Result:

  

• The grid and all its columns have specified widths (the Width property). The grid’s width is greater than the total width of all its columns. In this case, the grid proportionally increases the widths of the columns.

  HTML

  <table style="table-layout: fixed; width: 300px;">
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:50px">test2</td>
      </tr>
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:50px">test2</td>
      </tr>
  </table>
  

  Result:

  

• The grid and all its columns have specified widths (the Width property). The grid’s width is less than the total width of all its columns. In this case, the browser stretches the grid so that the grid’s width equals the total width of its columns.

  HTML

  <table style="table-layout: fixed; width: 50px;">
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:100px">test2</td>
      </tr>
      <tr>
          <td style="width:100px">test1</td>
          <td style="width:100px">test2</td>
      </tr>
  </table>
  

  Result: