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
var isDraggable = false;
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
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.
var firefox = document.getElementById&&!document.all;
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.
The line below will be used to load the last mouse over the
object for reference.
Then we have to change the cursor to resizable if the mouse
is hovered on the DataGrid header column’s borders.
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.
//Current_MouseX_Position - MouseX_DragStart + Cell_Width
//Current_MouseX_Position - MouseX_DragStart + Table_Width
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
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
if(objOn.parentElement.className == headerStyle &&
Set the Boolean Flag isDraggable to denote that we are in
Set the gridMain object with the DataGrid or GridView
gridMain = objOn.parentElement.parentElement.parentElement;
Get the object of main table which corresponds to current
column's width variation.
Get the current Mouse X Position.
anchorChild = objOn.offsetWidth;
Getting the current Cell/Column Width
anchorMain = gridMain.offsetWidth;
Get the current Table Width.
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
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
isDraggable = false;