GridView Fixed Table Layout Specifics (Scrolling and Column Resizing)

• Oct 06, 2023
• 2 minutes to read

The GridView extension 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 extension’s and its columns’ widths affect the grid’s horizontal layout.

Note

Set the ASPxGridSettings.VerticalScrollBarMode or ASPxGridSettings.HorizontalScrollBarMode properties to ScrollBarMode.Auto or ScrollBarMode.Auto to enable the GridView’s scrolling functionality and render the grid as a table with a fixed layout.

Layout Scenarios

In this mode, the columns widths do not depend on the columns’ content. The following scenarios illustrate how the GridView extension renders its layout according to the GridViewDataColumn.Width property setting.

• The fixed-sized grid has four columns, two of which have specified widths (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 (Width property). The grid’s width is less than the specified columns’ total width. 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 (Width property). The grid’s width is greater than the total width of all its columns. In this case, the grid proportionally increases the columns’ widths.

  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 (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: