$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
GridView Items Resizing in ASP.NET AJAX
Home > How to > Grid Resizing
The Kettic asp.net ajax Data Grid control provides the support of column and row resizing to hold data. In this article, we will introduce you how to change the column and row size of web grid view by your mouse. All the operation is done in the client side by mouse drag and drop the border of the column and row, the javascript can call the ajax to postback these informations, and the asp.net grid view will resize the graphs dynamically.

Resizing columns

When a grid is generated, but in some column, it's too narrow or too wide to show the data cell message. So changing the size of the column is in need. It is possible for users to define the column width for a particular one. No matter how narrow the width of the column is, it is able to hold some data. The Data Grid column offers the property Width to users to resize column layout. Furthermore, the two values, MinimumWidth and MaximumWidth, allow users to restrict the length of data for column.

Reresizing columns by dragging and dropping

In usually case, users like to drag the border handle between the two columns. It is really easy to adjust the width of columns by dragging the column vertical grid line to desired size with mouse and then release your drag. While your dragging, the column is resizing dynamically. All of thses mouse events are run in client side, so you will feel the web data grid column size is changing so fast like auto. According to Kettic gridview component's ajax technique, after your mouse right button up, our gridvew control in the server side will deal with the changes asynchronously.

Note, if you want to resize the column by dragging and dropping, you need set ClientSettings.Resizing.AllowColumnResize property to True in the design aspx property window or using the C# code in Page_Load method.

resize grid view column items in asp.net ajax

Resizing columns Automatically

To simplify the user's operation, Kettic asp.net data grid control provide a "fit to content" functionality. Users can double-click the resize handle in the grid column to make the column fit the data content size. In another way, users can also click the "Best Fit" button in column header's context menu, then the column will resize to fit the widest cell's content dynamically.

Resizing columns Customizing

The AutoFitColumn property has various options available to customize the columns as specific requirements. Here we list all the enum value in the auto fit property, you can define this mode in the aspx.cs class file using C# code.
  • AutoFitColumn.None, this mode is able to disable the AutoFitColumn property and won't allow the width automatic change. So all the web data grid column is fixed width.
  • AutoFitColumn.EntireCells, this mode is able to adjust the column width to fit the entire cells of contents in Data Grid Control. It will match the max width of the data cell, even if this data cell is not displaying now.
  • AutoFitColumn.ShownDataCells, this mode is able to adjust the column width to fit the contents of data cells that has been shown.
  • AutoFitColumn.HeaderCells, this mode is able to adjust the column width to fit the contents of the header cell.
  • AutoFitColumn.FilterCells, this mode is able to adjust the column width to fit the filter cell contents.
  • AutoFitColumn.SymmaryRowCells, this mode is able to adjust the column width to fit the summary row cell contents.
  • AutoFitColumn.SystemCells, this mode is able to adjust the column width to fit the system cells contents.
  • AutoFitColumn.ShownCells, this mode is able to adjust the column width to fit the shown cells contents. It means if you go to the next page of data grid view, maybe one data cell has very long content, then the grid column will resize to wider automatically.

Resizing rows

If you want to resize the grid row height, you can set AllowRowResize property to True. After that, you can drag any part of the row bottom edge to change the size of the rows. Like resizing the grid view column, all your mouse events occur in the client side, the javascript will send and call event to redraw the grid graphs by ajax. So there is no delay feeling while your dragging, it's be done dynamically.

Here we provide the sample ASPX demo code:

<Resizing AllowRowResize="True" />
resize row items in asp.net ajax

In this free online demo, you can do resize operation in web gridview.