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.
