GridView Fixed Table Layout Specifics (Scrolling and Column Resizing)

• Aug 01, 2019
• 2 minutes to read

The GridView extension uses the fixed table layout algorithm to render its HTML when the scrolling and/or column resizing 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.

Note

Refer to the GridView – How the GridView shows its columns when the fixed table layout is applied KB article for more information about the GridView’s layout scenarios in fixed table mode.

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