articles

Home / DeveloperSection / Articles / Ajax Toolkit ResizableControlExtender Control in ASP.Net

Ajax Toolkit ResizableControlExtender Control in ASP.Net

Pushpendra Singh12948 03-Dec-2010

ResizablecontrolExtender allows resizing of panel control.

ResizableControl Properties:

·         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

Code:

Write these codes on aspx page and apply these style classes in head tag of aspx page

<head>
<style type="text/css">
        .main
        {
            width: 16px;
            height: 16px;
            background-image: url(~/Jellyfish.jpg);
            overflow: hidden;
            cursor: se-resize;
        }
 </style>
</head>
<%--Add the ScriptManager, ResizableControlExtender and Panel--%>
 
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
 
<cc1:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" HandleCssClass="main" MaximumHeight="700" MaximumWidth="1000" MinimumHeight="100"MinimumWidth="100">
</cc1:ResizableControlExtender>
 
<asp:Panel ID="Panel1" runat="server" BackImageUrl="~/Jellyfish.jpg">
</asp:Panel>

 

You Can limit maximum and minimum width and height of the resizable control

 

Run the project

 

Ajax Toolkit ResizableControlExtender Control in ASP.Net

When you stretch right corner of the image then image width and height will increase.

Ajax Toolkit ResizableControlExtender Control in ASP.Net


Updated 04-Mar-2020

Leave Comment

Comments

Liked By