Home / AJAX

HOW TO Use the Resizable Control

RSS
Modified on 2009/12/24 03:12 by Chris Muench Categorized as Uncategorized

Resizable Demonstration

filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler

Resizable Description

ResizableControl is an extender that attaches to any element on a web page and allows the user to resize that control with a handle that attaches to lower-right corner of the control. The resize handle lets the user resize the element as if it were a window. The appearance of the resize handle can be specified by the page designer with a CSS style. The content within the element can use CSS styles to automatically resize to fit the new dimensions. Alternatively, ResizableControl exposes two events (onresizing and onresize) that the page designer can attach custom script to in order to enable more complex layout logic. Element dimensions are preserved across postbacks to the server and "size" properties accessible on both the client and server can be used to enable custom resize behaviors. ResizableControl can optionally limit the maximum and minimum width and height of the target control so that resizing can be constrained by the page author (for example, to limit scrolling to only the horizontal dimension).

Video - How Do I: Use the ASP.NET AJAX Resizable Control?

Resizable Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type="text/css"> .resize { background-color: Gray; border: dashed 2px red; width: 300px; height: 200px; overflow: hidden } .sizing { background-color: Blue; } .handle { background-color: Red; width: 10px; height: 10px; } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.require(Sys.components.resizable, function() { $("#resize").resizable({ HandleCssClass: "handle", ResizableCssClass: "sizing" }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div id="resize" class="resize"> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler filler <br /> </div> </div> </form> </body> </html>

Resizable Client Properties

Resizable Server Code Sample

        <asp:Panel ID="PanelImage" runat="server" CssClass="frameImage">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/AJAX.gif"
                AlternateText="ASP.NET AJAX" style="width:100%; height:100%;" />
        </asp:Panel>
        <div style="float: right; width: 160px; border: 1px dotted Gray; text-align: right">
            <asp:LinkButton ID="Button1" runat="server" Text="Submit" /><br />
            <asp:LinkButton ID="Button2" runat="server" Text="Shrink (via Server)" OnClick="Button2_Click" /><br />
            <asp:LinkButton ID="Button3" runat="server" Text="Grow (via Client)" OnClientClick="return OnClientClickGrow();" /><br />
            <p id="lastResize">Last image resize: Unknown</p>
        </div>
        <p><%= GetContentFillerText() %></p>
        <p></p>

<p><strong>Resizable text with "onresize" event handler</strong></p> <asp:Panel ID="PanelText" runat="server" CssClass="frameText"> This text resizes itself to be as large as possible within its container. </asp:Panel> <p><%= GetContentFillerText() %></p>

<script type="text/javascript"> function OnClientClickGrow () { var rcp = $find('ResizableControlBehavior1'); var size = rcp.get_Size(); rcp.set_Size( { width: size.width*2, height: size.height*2 } ); return false; }

function OnClientResizeImage(sender, eventArgs) { $get("lastResize").innerHTML = "Last image resize at " + (new Date()).toString(); }

var fontSize = 12; function OnClientResizeText(sender, eventArgs) { // This sample code isn't very efficient, but demonstrates the idea well enough 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'; } } </script> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" BehaviorID="ResizableControlBehavior1" TargetControlID="PanelImage" ResizableCssClass="resizingImage" HandleCssClass="handleImage" MinimumWidth="50" MinimumHeight="26" MaximumWidth="250" MaximumHeight="170" HandleOffsetX="3" HandleOffsetY="3" OnClientResize="OnClientResizeImage" /> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender2" runat="server" TargetControlID="PanelText" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="100" MinimumHeight="50" MaximumWidth="400" MaximumHeight="150" OnClientResize="OnClientResizeText" />


Resizable Server Properties

The properties in italics are optional.

<ajaxToolkit:ResizableControlExtender ID="RCE" runat="server"
    TargetControlID="PanelImage"
    HandleCssClass="handleImage"
    ResizableCssClass="resizingImage"
    MinimumWidth="50"
    MinimumHeight="20"
    MaximumWidth="260"
    MaximumHeight="130"
    OnClientResize="OnClientResizeImage"
    HandleOffsetX="3"
    HandleOffsetY="3" />
  • TargetControlID - The ID of the element that becomes resizable
  • HandleCssClass - The name of the CSS class to apply to the resize handle
  • ResizableCssClass - The name of the CSS class to apply to the element when resizing
  • MinimumWidth/MinimumHeight - Minimum dimensions of the resizable element
  • MaximumWidth/MaximumHeight - Maximum dimensions of the resizable element
  • OnClientResizeBegin - Event fired when the element starts being resized
  • OnClientResizing - Event fired as the element is being resized
  • OnClientResize - Event fired when the element has been resized
  • HandleOffsetX/HandleOffsetY - Offsets to apply to the location of the resize handle

Resizable Additional Code Samples