ResizableControlExtender Control In Ajax

ResizableControlExtender 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, ResizableControlExtender exposes two events (onresizing and onresize) that the page designer can attach custom script to in order to enable more complex layout logic.
ResizableControlExtender Properties:-

1. TargetControlID: - The ID of the element that becomes resizable
2. HandleCssClass: - The name of the CSS class to apply to the resize handle
3. ResizableCssClass :- The name of the CSS class to apply to the element when resizing

4. MinimumWidth/MinimumHeight: - Minimum dimensions of the resizable element
5. MaximumWidth/MaximumHeight :- Maximum dimensions of the resizable element
6. OnClientResizeBegin: - Event fired when the element starts being resized
7. OnClientResizing :- Event fired as the element is being resized
8. OnClientResize :- Event fired when the element has been resized
9. HandleOffsetX/HandleOffsetY :- Offsets to apply to the location of the resize handle

Example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ResizableControlExtender.aspx.cs" Inherits="ResizableControlExtender" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<style type="text/css">
 .HandleCSS
{
 width: 15px; height: 16px;
 background-color: Red;
 }
.ResizableCSS
 {
 padding: 0px;
 border-style: solid;
border-width: 5px;
border-color: Green;
cursor: se-resize;
}
 </style>


<form id="form1" runat="server">
 <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
 </asp:ToolkitScriptManager>
<div>
 <h3> Using ResizableControlExtender </h3>
 <hr />
<asp:Panel ID="PanelImage" runat="server" Width="250" Height="150"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/AJAX.gif" AlternateText="ASP.NET AJAX" Style="width: 100%; height: 100%;" />
 </asp:Panel> <asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="PanelImage" HandleCssClass="HandleCSS" ResizableCssClass="ResizableCSS"> </asp:ResizableControlExtender>
 </div>
 </form>
Output:-