In general Telerik RadGrid behaves as a normal HTML Table. If you have table-layout: auto then columns width will be calculated according to the content of the cells. Otherwise columns width should be specified in COLGROUP.COL.WIDTH. When the grid is in scrolling with static headers mode table-layout is always fixed and that is why you should provide a valid width attribute for the columns.
You can control column width and table layout also using ClipCellContentOnResize(see below). When ClipCellContentOnResize is false then table-layout is set to auto.
If you want the columns in your grid to be resizable, you need to set the client-side AllowColumnResize property to true. Then you can resize the columns by dragging the handle between them. The default value for this property is true.
Similarly, when you want the rows to be resizable, set client-side AllowRowResize property to true. Then you can drag the handle between two rows to resize them. The default value for this property is false.
Real-Time Resizing
There are two modes of column resizing with respect to visualization. The content of the resized columns can be rendered real-time as you drag the handle. This feature puts a significant load on client computer's CPU.
Alternatively, you can see only the handle moving during the resizing, and only after you drop it, the columns will be rendered. As a result, the load of the CPU is much lighter.
You can control the behavior of real-time resizing using the EnableRealTimeResize property. The default value for this property is false.
 |
 |
EnableRealTimeResize = false Only the resizing handle is rendered. |
EnableRealTimeResize = true The whole content is rendered during resizing. |
Resizing Grid on Column Resize
Telerik RadGrid allows you to control the behavior of the grid during column resizing. This behavior is controlled by the ResizeGridOnColumnResize client-side property.
When this property is set to false, the grid will preserve its size and resize the rest of the columns evenly, preserving the overall size of the whole grid.
If you set ResizeGridOnColumnResize to true and resize a column, the grid will change its size dynamically. All other columns will retain their original sizes.
The default value for this property is false.
 |
|
ResizeGridOnColumnResize = false
After resizing the CustomerID column, the grid has preserved its overall size. All other columns have been shrunk.
|
 |
ResizeGridOnColumnResize = true After resizing the CustomerID column, the grid has changed its overall size and exceeded the page limits. All other columns have kept their original sizes. |
Clipping Cell Content On Resize
Often, when working with grids, there is no need to see the whole content of a given cell. In other words, it may be clipped in case the column is resized. You can control this by setting the ClipCellContentOnResize property. By default it is set to true.
 |
 |
ClipCellContentOnResize = false The handle is dragged but, the cell won't be resized anymore because clipping is needed and it is turned off. |
ClipCellContentOnResize = true You can reduce the column size as much as you wish because the clipping is turned on. |
AllowColumnResize property has a priority over
Resizable (client-side) property. Yet you need to set both the same in order to have resizing enabled. Here is an example set of resizing-related properties:
Example:
| ASPX/ASCX |
Copy Code |
|
<rad:RadGrid runat="server" ... /> <ClientSettings> <Resizing AllowColumnResize="True" AllowRowResize = "false" ResizeGridOnColumnResize = "false" ClipCellContentOnResize = "true" EnableRealTimeResize = "false"> |
And in the code-behind:
| C# |
Copy Code |
|
... RadGrid RadGrid1 = new RadGrid(); RadGrid1.ClientSettings.Resizing.AllowColumnResize = true; RadGrid1.ClientSettings.Resizing.AllowRowResize = false; RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = false; RadGrid1.ClientSettings.Resizing.ClipCellContentOnResize = true; RadGrid1.ClientSettings.Resizing.EnableRealTimeResize = false;
... |
| VB.NET |
Copy Code |
|
... Dim RadGrid1 As RadGrid = New RadGrid RadGrid1.ClientSettings.Resizing.AllowColumnResize = true RadGrid1.ClientSettings.Resizing.AllowRowResize = false RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = false RadGrid1.ClientSettings.Resizing.ClipCellContentOnResize = true RadGrid1.ClientSettings.Resizing.EnableRealTimeResize = false ... |