There are some things to look into in the code for a clearer understanding. The column resize can be pulled into the picture by just adding the JavaScript file to the web page. Before that, define the header columns you use in the web pages to the JavaScript file (headerStyle).

Listing 1

var isDraggable = false; 
var xX=0;anchorChild=0;anchorMain=0; 
var objOn=null;gridMain=null; 
var lastObj=undefined;
var headerStyle="DataGrid-HeaderStyle";

Other common settings to be made are the following:

isDraggable – This variable will be initially set to false to denote that dragging logic should not be called; this will become true whenever the mouse hovers over the datagrid’s header column’s border.

xX, anchorChild, anchorMain – These three variables will hold 0 initially on every mouse down event when the user starts dragging. xX will hold the x-axis position of the mouse, anchorChild will hold the width of the Current Resizing cell, and anchorMain will hold the width of the entire DataGrid or control.

objOn – This will hold the current object which is under dragging.

lastObj – This temp object loads the objOn object. This will be captured on mousedown and loaded to objOn during MouseMove.

Firefox – DOM Expressions differ from browser to browser, so we have a common variable which will be checked in every event. When the script is initialized, we initialize the FireFox by finding whether the current browser is Firefox or other.

Listing 2

var firefox = document.getElementById&&!document.all; 

Mouse Events

OnMouseMove – This event is used to capture the current place in which the mouse is hovered and also to change the width of the cell and DataGrid while they drag. So first we will capture the object on which we hover the mouse.

Listing 3

objOn=(!firefox)?e.srcElement:e.target; 

The line below will be used to load the last mouse over the object for reference.

Listing 4

if(lastObj!=undefined)objOn=lastObj; 

Then we have to change the cursor to resizable if the mouse is hovered on the DataGrid header column’s borders.

Listing 5

document.body.style.cursor =(objOn.offsetWidth-e.offsetX < 10 && 
objOn.parentElement.className == headerStyle)?'e-resize':'default'; 

Now, we decide whether we should start dragging or not. It depends on whether the user has clicked the mouse for dragging which would have made the boolean isDraggable true.

Listing 6

if(isDraggable) 
{ document.body.style.cursor='e-resize'; 
//Current_MouseX_Position - MouseX_DragStart + Cell_Width 
ic=e.clientX-xX+anchorChild; 
//Current_MouseX_Position - MouseX_DragStart + Table_Width
it=e.clientX-xX+anchorMain; 
if(ic>0) 
{
gridMain.style.width = it + "px"; //Increase Table Width 
objOn.style.width = ic + "px"; //Increase Cell Width
}
}

The above piece of code will increase or decrease the size of the DataGrid based on the mouse movement.

OnMouseDown – This event is used to capture the point or pixel where the user has started to drag (if the user has the mouse pointer over the DataGrid header’s border). Here we will find the Cell’s Offset Position and Table’s Offset position which will give the current X-Axis width of the cell and the table respectively.

First we will capture the object over which we hover the mouse.

Listing 7

objOn=(!firefox)?e.srcElement:e.target; 

Then we have to check whether the mouse is hovered on the DataGrid header column’s borders. If it is true, the following steps will be carried out.

Listing 8

if(objOn.parentElement.className == headerStyle && 
document.body.style.cursor=='e-resize') 
{ 

Set the Boolean Flag isDraggable to denote that we are in draggable mode.

Listing 9

isDraggable = true; 

Set the gridMain object with the DataGrid or GridView object.

Listing 10

gridMain = objOn.parentElement.parentElement.parentElement; 

Get the object of main table which corresponds to current column's width variation.

Listing 11

xX = e.clientX; 

Get the current Mouse X Position.

Listing 12

anchorChild = objOn.offsetWidth; 

Getting the current Cell/Column Width

Listing 13

anchorMain = gridMain.offsetWidth; 

Get the current Table Width.

Listing 14

lastObj = objOn; 

This will be the else part of the Current IF Statement. If the mouse is clicked outside the header scope, the lastObj variable is set to undefined.

Listing 15

lastObj = undefined;

OnMouseUp – This event is used to stop the dragging. There is no specific code to stop the drag; the drag event will be fired based on mouseover and mousedown events. When the mouse click is up, lastObj object used in those events will be undefined and isDraggable boolean flag will be set to false to say that the drag has been stopped by the user.

Dragging Stop and Forget LastObj

Listing 16

isDraggable = false;
lastObj=undefined;