AJAX / ASP.NET- Resize text in the asp:Panel with a button onClick (OnClientClick) event and ResizableControlExtender

• Download source code - 243 KB

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();
    // Make the font bigger until it's too big
    while((e.scrollWidth <= e.clientWidth) || 
           (e.scrollHeight <= e.clientHeight)) {
        e.style.fontSize = (fontSize++)+'pt';
    }
    var lastScrollWidth = -1;
    var lastScrollHeight = -1;
    // Make the font smaller until it's not
    // too big - or the last change had no effect
    // (for Opera where e.clientWidth
    //   and e.scrollWidth don't behave correctly)
    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 () {               
    //Get Extender control
    var rcp = $find('ResizableControlBehavior2');                
    //Get Size Structure
    var size = rcp.get_Size();
   //Set new size for this control
    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.