Resize Gridview Column

//Copy and Paste the Code in your aspx file and  Change the id of Gridview Control

<script type="text/javascript">// true when a header is currently being resized
var _isResizing;// a reference to the header column that is being resized
var _element;// an array of all of the tables header cells

var _ths;function pageLoad(args) {// get all of the th elements from the gridview_ths = $get(

'MainContent_gvCustomers').getElementsByTagName('TH');// if the grid has at least one th element

if (_ths.length > 1) {for (i = 0; i < _ths.length; i++) {// determine the widths_ths[i].style.width = Sys.UI.DomElement.getBounds(_ths[i]).width +
'px';// attach the mousemove and mousedown events
$addHandler(_ths[i],
$addHandler(_ths[i],
}
}
if (i < _ths.length - 1) {'mousemove', _onMouseMove);'mousedown', _onMouseDown);// add a global mouseup handler $addHandler(document,
'mouseup', _onMouseUp);// add a global selectstart handler$addHandler(document,
}
}


'selectstart', _onSelectStart);function _onMouseMove(args) {if (_isResizing) {// determine the new width of the header

var bounds = Sys.UI.DomElement.getBounds(_element);var width = args.clientX - bounds.x;// we set the minimum width to 1 px, so make// sure it is at least this before bothering to// calculate the new width
if (width > 1) {// get the next th element so we can adjust its size as well


var nextColumn = _element.nextSibling;var nextColumnWidth;if (width < _toNumber(_element.style.width)) {// make the next column biggernextColumnWidth = _toNumber(nextColumn.style.width) + _toNumber(_element.style.width) - width;
}

else if (width > _toNumber(_element.style.width)) {// make the next column smallernextColumnWidth = _toNumber(nextColumn.style.width) - (width - _toNumber(_element.style.width));
}
// we also don't want to shrink this width to less than one pixel,// so make sure of this before resizing ...
_element.style.width = width +
nextColumn.style.width = nextColumnWidth +
}
}
}

if (nextColumnWidth > 1) {'px';'px';else {// get the bounds of the element. If the mouse cursor is within// 2px of the border, display the e-cursor -> cursor:e-resize

args.target.style.cursor =
}

args.target.style.cursor =
}
}
}

var bounds = Sys.UI.DomElement.getBounds(args.target);if (Math.abs((bounds.x + bounds.width) - (args.clientX)) <= 2) {'e-resize';else {'';function _onMouseDown(args) {// if the user clicks the mouse button while// the cursor is in the resize position, it means// they want to start resizing. Set _isResizing to true// and grab the th element that is being resized
_isResizing =
_element = args.target;
}
}

if (args.target.style.cursor == 'e-resize') {true;function _onMouseUp(args) {// the user let go of the mouse - so// they are done resizing the header. Reset// everything back
if (_isResizing) {// set back to default values_isResizing =
_element =
false;null;// make sure the cursor is set back to default
_ths[i].style.cursor =
}
}
}

for (i = 0; i < _ths.length; i++) {'';function _onSelectStart(args) {// Don't allow selection during drag
args.preventDefault();

}
}

if (_isResizing) {return false;function _toNumber(m) {// helper function to peel the px off of the widths
}


return new Number(m.replace('px', ''));</script> <div style="width:95%;"><p>Click on the column headers to resize
</p><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:GridView ID="gvCustomers" Width="100%" runat="server" AllowSorting="true" AllowPaging="true" PageSize="15" AutoGenerateColumns="false">
<Columns> <asp:BoundField HeaderText="ID" DataField="ClientSpecificFieldId" SortExpression="customerid" /><asp:BoundField HeaderText="Company" DataField="ClientId" SortExpression="companyname" /><asp:BoundField HeaderText="Contact Name" DataField="ClientSpecificField" SortExpression="contactname" /></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel></div>