AJAX Resizable Control Extender

by top54u.com 06 Jun, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

ASP.Net AJAX Tab Extender CSS Class Styles

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

ASP.Net AJAX Tab Control Extender

ASP.Net AJAX Star Rating Extender Control

ASP.Net AJAX Password Strength Extender Control

ASP.Net AJAX Cascading Dropdown Control Extender

ASP.Net AJAX NoBot Extender Control

The AJAX Control Toolkit has a Resizable Extender control that allows resizing of panel control attached to the resizable extender. Resizable Handle is attached to the bottom-left side of the target Panel control that enables the user to resize the dimensions of the panel. Resizable extender control provides three client side events that handles the action such as onClientResize, onClientResizeBegin and onClientResizing. These client side events can be used to auto resize the inner content of the attached Panel control.

You can also specify the Maximum resizable width for the resizable extender that does not allow exceeding the width more than the specified maximum width. Minimum resizable width for the resizable extender does not allow reducing the width of the attached Panel control less than the specified minimum width. Similarly Maximum and minimum Height values for the resizable extender control also specify the constraint on Height of the attached Panel control.

AJAX Resizable Extender Control Properties

TargetControlID: ID of the control that will server as the resizable control.

MinimumWidth: Minimum width for the control attached to the resizable extender.

MinimumHeight: Minimum height constraint for the attached control.

MaximumWidth: Maximum resizable width allowed for the target control.

MaximumHeight: Maximum resizable height allowed for the target control.

HandleCssClass: CSS class name to apply the style on resizable Handle. It displays the image at the bottom-left side of the attached control that handles the resizing behavior.

ResizableCssClass: CSS class name to apply the style on target control when user is performing the resize action.

HandleOffsetX: horizontal offset for the resizable handle.

HandleOffsetY: vertical offset for the resizable handle.

onClientResizeBegin: client side event fires when the attached control starts resize action.

onClientResizing: client side event fires when the attached control is being resized.

onClientResize: client side event fires when the attached control has been resized or completed the resize action.

Sample Code for Resizable Extender Control

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>AJAX Resizeable Control</title>

    <style type="text/css">

    body
    {
    font-family:verdana;
    font-size:11px;
    }

    .handle
    {
    width:16px;
    height:16px;
    background-image:url(Handle.gif);
    overflow:hidden;
    cursor:se-resize;
    }

    </style>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

        <script type="text/javascript">
        function onResize(sender, eventArgs)
        {
            var e = sender.get_element();
            alert("width: " + e.scrollWidth + ", height: " + e.scrollHeight);
        }
        </script>

        <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" Style="border: solid 1px #000">
            Content for resizable panel
        </asp:Panel>
        <ajaxToolkit:ResizableControlExtender
             ID="ResizableControlExtender1"
             runat="server"
             TargetControlID="Panel1"
             MinimumHeight="52"
             MinimumWidth="52"
             MaximumHeight="200"
             MaximumWidth="200"
             HandleCssClass="handle"
             OnClientResize="onResize">
        </ajaxToolkit:ResizableControlExtender>
    </div>
    </form>
</body>
</html>

Spotlight.....

Be the first to rate this post