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
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
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
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
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;