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.  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.
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:
| 
ASP.NET AJAX UI Controls ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control OverviewGetting StartedGrid Columns ElementsTypesHeadersGrid Rows ItemsCommand ItemResizing ReorderingSortingPaging Pager ItemDo PagingScrolling Do ScrollingScroll ShowingVirtual ScrollingGrouping Do GroupingGroup ExpressionsGroup ElementFiltering Do FilteringFiltering ExpressionSelecting Selecting RowsExportingOperating Edit ModeEdit RecordsValidationData BindingGrid Style |
