Resizing Data Controls in ASP.NET Applications
 
Published: 30 Jun 2008
Abstract
In this article Aravind demonstrates how to resize ASP.NET data controls such as the GridView at run time. After listing a brief overview of the concept, he provides a short coverage of style settings and the events which need to be captured to achieve the desired result. He makes use of a single JavaScript file to illustrate this functionality and provides crisp explanation of each line of the code.
by Aravind Kumar
Feedback
Average Rating: 
Views (Total / Last 10 Days): 20603/ 20

Introduction

This article explains about resizing web controls in runtime. In browser output, usually resizing is achieved during Development for fixing the control’s width and height. But sometimes we require resizing the DataGrid, DataList or other data controls to adjust for clearly reading the displayed data. It is rare to see the internet page's output to be adjustable, but it is possible with a few lines of JavaScript.

Event Types

The whole resize logic (column width increase or decrease) depends upon catching the co-ordinate where the user drags the column to be resized. Mouse capturing will be set on initially when the page loads. Events to be captured are the following:

·         Mouse Over

·         Mouse Down

·         Mouse Up

Style Settings

Resizing can be done only on the column headers. Usually all data controls, like DataGrid, GridView or DataList, will be set with some style class for the header row. Here we take advantage of this style for tracking the user's mouse over an event on the header row. This event will initiate the trigger to start capturing the further events like mouse down and mouse up. There is no special style setting to be done other than the user’s look and feel styles. The JavaScript just requires a style name and that is it!

Mouse Capturing

The user will be automatically seeing the difference in the cursor which will signal to them that the DataGrid/GridView is ready for resizing. This will be done by the handler which we have set for document onmousemove. Whenever the user reaches the header row, the first level job is over and mouse down event will be ready to be raised for checking where the user clicks the mouse to start dragging. At this moment the mouse move event will again take over. Now the JavaScript will start handling mousedown and mousemove, which is equal to mouse drag. On the mouse drag, the column size and the table size will increase or decrease based on the mouse’s left or right movement respectively. Whenever the user makes the mouse go up (stops dragging and releasing the mouse), the resizing will get stopped and the current drag object will be destroyed.

More Technical Information on Events

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

This script is just a plug-in to the existing DataGrid or GridView. Just add the downloadable JavaScript to the project. Include the reference to the webpage. Assign the CSS Class name you have used for the control to the headerStyle variable found in the JavaScript file. Now your data control's header is ready for resizing!

Conclusion

In this article you have learned how to resize data oriented controls such as GridView at run time.

I dedicate this article to my mom who constantly encourage and cheer me up in my life.

[Download Source]



User Comments

Title: andhra pradesh news   
Name: andhraguy
Date: 2008-07-07 2:21:59 AM
Comment:
Thank you
Title: I love JavaScript   
Name: Abdulla Abdelhaq
Date: 2008-07-05 3:33:51 PM
Comment:
Nice article, nice code.
As we know, there is a Ajax Extender that does the Reizable Content. But I alway like the Javascript rather any thing.
really great code man.
Title: Good Article   
Name: Sampath
Date: 2008-06-30 9:28:42 PM
Comment:
Really an excellent article Aravind...

Have been following all your posts and found them very useful... Please keep up the good work...

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2024 ASPAlliance.com  |  Page Processed at 2024-03-28 12:05:14 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search