Introduction
Recently, I got a requirement to have resizable text section on my ASP.NET page. The first thing that got in my head was to use ResizableControlExtender
, and that worked well for me. I could resize my text just by dragging my panel handler. A few days later, I got a new requirement to have two buttons on the form, one to enlarge and one to shrink my text. This article describes how I accomplished this.
Background
Microsoft released the AJAX toolkit that has a lot of nice features and controls. One of those controls is ResizableControl
. My project uses this control.
Code
As I mentioned before, I am using the Microsoft sample code. We have a simple panel that has some text that will be resized.
<asp:Panel ID="PanelText" runat="server" CssClass="frameText">
This text resizes itself to be as large as possible
</asp:Panel>
Then, we need to hook up this panel to the ResizableControlExtender
, so we use this code:
<ajaxToolkit:ResizableControlExtender
ID="ResizableControlExtender2" runat="server"
BehaviorID="ResizableControlBehavior2"
TargetControlID="PanelText"
ResizableCssClass="resizingText"
HandleCssClass="handleText"
MinimumWidth="100"
MinimumHeight="50"
MaximumWidth="400"
MaximumHeight="350"
OnClientResize="OnClientResizeText" />
I think the control properties are self explanatory, except BehaviorID
. The BehaviorID
property lets you access the client-side behavior for your extender control from the script code in the client. You can set this BehaviorID
to simplify the process. You need this reference because you will need to use these extender properties and functions.
OnClientResizeText
is a JavaScript function that will handle the resize event. I got this from Microsoft.
function OnClientResizeText(sender, eventArgs) {
var e = sender.get_element();
while((e.scrollWidth <= e.clientWidth) ||
(e.scrollHeight <= e.clientHeight)) {
e.style.fontSize = (fontSize++)+'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
while (((e.clientWidth < e.scrollWidth) ||
(e.clientHeight < e.scrollHeight)) &&
((Sys.Browser.agent !== Sys.Browser.Opera) ||
(e.scrollWidth != lastScrollWidth) ||
(e.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = (fontSize--)+'pt';
}
}
At this point, your text can be resized with a simple mouse drag event.
Now, we need to do the same thing with two buttons: Enlarge and Shrink.
<asp:Button ID="LinkButton1" runat="server"
Text="Enlarge text" OnClientClick="return OnClientTextGrow();" />
<asp:Button ID="Button1" runat="server"
Text="Shrink text" OnClientClick="return OnClientTextShrink();" />
All those buttons do is initiate calls to the OnClientTextGrow()
and OnClientTextShrink
functions, respectively. These functions always return false
, so no post back is generated.
Now, we can examine the OnClientTextGrow
function:
function OnClientTextGrow () {
var rcp = $find('ResizableControlBehavior2');
var size = rcp.get_Size();
rcp.set_Size( {width: size.width*1.05, height: size.height*1.05} );
return false;
}
Since we specified BehaviorID
in our ResizableControlExtender
, we can use it to access the control's functions. This control has a get_Size()
function that will get us the control size. The same way, we can use set_Size()
to set new control dimensions. For simplicity, I simply multiply the current control size * 1.05.
Source code
You can simply download the provided sample project, open it with Visual Studio 2.0, and run it.