ARTICLE
AJAX Resizable Extender Control
Through this article you will learn about AJAX Resizable Extender Control.
ASP.NET AJAX offers you Resizable Extender Control. 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.
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" />
There are the following properties of Resizable extender control:
-
TargetControlID
-
HandleCssClass
-
ResizableCssClass
-
MinimumWidth
-
MinimumHeight
-
MaximumWidth
-
MaximumHeight
-
OnClientResizeBegin
-
OnClientResizing
-
OnClientResize
-
HandleOffsetX
-
HandleOffsetY
Example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ResizableControl.aspx.cs" Inherits="ResizableControl" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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 id="Head1" runat="server">
<title>Resizable Control</title>
<style type="text/css">
.handle
{
width:10px;
height:10px;
background-color:#aaccee;
}
.resizing
{
padding:0px;
border-style:solid;
border-width:1px;
border-color:#aaccee;
cursor:se-resize;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager" />
<div>
<asp:Panel ID="Panel1" runat="server" Style="width: 300px; height: 200px;">
<asp:Label ID="image1" runat="server" Text="ASP.NET AJAX offers you Resizable Extender Control. 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.">
</asp:Label>
</asp:Panel>
<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="handle" ResizableCssClass="resizing" MaximumHeight="400" MaximumWidth="500" MinimumHeight="100" MinimumWidth="100" HandleOffsetX="5" HandleOffsetY="5" />
</div>
</form>
</body>
</html>
Output: Now Press F5 to debug the application. You will get the following output:
If you want to resize the panel then put the mouse on right button corner and drag as you want.
