Resizing Data Controls in ASP.NET Applications
page 1 of 3
Published: 30 Jun 2008
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
Average Rating: 
Views (Total / Last 10 Days): 20305/ 24


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.

View Entire Article

User Comments

Title: andhra pradesh news   
Name: andhraguy
Date: 2008-07-07 2:21:59 AM
Thank you
Title: I love JavaScript   
Name: Abdulla Abdelhaq
Date: 2008-07-05 3:33:51 PM
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
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  |  Page Processed at 2024-07-23 5:26:34 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search