Version

Column Resizing

WebDataGrid™ allows column resizing. To resize a column, an end-user clicks on the right edge of the column header and drags. A line appears to show the edge of the column while dragging. Only when dragging stops will the column resizes itself.

You can add column resizing behavior on the WebDataGrid through the designer or using the Microsoft® Visual Studio® Property Window or by using the following code:

In Visual Basic:

WebDataGrid1.Behaviors.CreateBehavior(Of Infragistics.Web.UI.GridControls.ColumnResizing)()

In C#:

WebDataGrid1.Behaviors.CreateBehavior<Infragistics.Web.UI.GridControls.ColumnResizing>();

The way resizing behaves depends on what is set for the width of WebDataGrid’s columns. There are two types of sizes you can set: pixels and percentages. By default, the width of WebDataGrid’s columns are empty, which is the equivalent of percentage sizing.

Percentage-Based Resizing

When all of WebDataGrid’s columns have percentage widths, resizing occurs so that all columns fit within the control. When an end-user resizes one column, all other columns resize as well, filling in the necessary proportions.

For example, there are 5 columns, each using 20% of WebDataGrid’s width. An end-user resizes one column to 30 % of the width. The remaining 70 % of WebDataGrid’s total width will be divided evenly amongst the other columns based on their proportional value; so since we have 4 columns, each with equal widths they will be assigned widths of 70/4 or roughly 17% so that the total width used is 100%.

Pixel-Based Resizing

As for pixel sizes, other columns retain their widths when one column resizes. A scrollbar displays if the total column widths exceed that of the control.

Note
Note:

It is not recommended that you use percentage widths together with pixel widths when you have column resizing enabled. The reason is that columns may resize unpredictably; at that point it is up to the browser to determine the widths of each column when a resize occurs.

Min/Max Width

You can set a minimum and maximum width on a column. This restricts resizing to go beyond these values. Restricting a column’s width requires that you to add a Column Resizing Setting for the ColumnResizing behavior. The Column Resizing Setting has a MinimumWidth and MaximumWidth property for which you can set a minimum or maximum value for a column, respectively.

Note
Note:

You cannot set a percentage min or max value. Further, percentage columns will ignore min/max constraints.

Multi-Column Resizing

You can resize more than one column at a time. You can select multiple columns and drag one column to resize. After you let go of the column, all selected columns resize to the same width. Only resizing a selected column will resize all selected columns; resizing an unselected column will resize only that column.

Note
Note:

Multi-Column resizing requires that you enable the Selection behavior for multiple columns. For information on doing this, see Selection.

Enabling Column Resizing

Before You Begin

The WebDataGrid™ control’s columns are resizable. To allow column resizing, you must enable the ColumnResizing behavior. Since column widths are empty by default, enabling column resizing alone makes WebDataGrid resize using percentages.

What You Will Accomplish

You will learn how to enable pixel-based column resizing on all columns of WebDataGrid. In addition, you will set a minimum size for the primary key column.

Follow these Steps

  1. Bind WebDataGrid to a SqlDataSource component retrieving data from the Customers table. Retrieve the CustomerID, CompanyName, ContactName, and ContactTitle data. For more information on doing this, see Getting Started with WebDataGrid.

  2. In the Microsoft® Visual Studio™ property window, locate the Columns property and click the ellipsis (…​) button to launch the Columns Editor Dialog.

  3. Set a pixel width for each column in the control. This allows for resizing to be based on pixels.

    1. Select the CustomerID column from the Selected Fields area.

    2. In the properties, set the Width to 100px.

    3. Repeat steps a and b for columns CompanyName, ContactName and ContactTitle.

WebDataGrid Enabling Column Resizing 01.png
  1. Click Ok to close the dialog.

  2. Locate the Behaviors property and click the ellipsis (…​) button to launch the Behaviors Editor Dialog.

  3. Check the Column Resizing behavior to enable it.

  4. In the properties for the behavior, locate the ColumnSettings property and click the ellipsis (…) button to launch the Column Settings Designer.

  5. Click Add to add a column setting.

  6. Set the ColumnKey property to CustomerID.

  7. Set the MinimumWidth property to 100. This restricts the column from being resized any lower than 100 pixels. You can leave the MaximumWidth property at -1, allowing your end-users to expand the column to any size.

WebDataGrid Enabling Column Resizing 02.png
  1. Click Apply then Ok.

  2. Click Apply then Ok again to accept changes and close the dialog.

  3. Run your application. WebDataGrid displays 4 columns each at 100 pixels. All columns are resizable with the CustomerID column restricted to a minimum width of 100 pixels.

WebDataGrid Enabling Column Resizing 03.png