ResizableControlExtender in AJAX Using ASP.NET

A K
12y
26.6k
0
0
100
Article

Introduction

The ResizableControl allows the user to resize a control in form. A resizable handle is attached to the bottom left of the target control that allows the user to resize the dimensions of the control. The properties of the ResizableControlExtender is given below.

TargetControlID : It is used to set the ID of control which is to be resizable.
HandleCssClass : It sets the name of CSS class which is to be apply to resize handle.
ResizableCssClass : It is used to set the name of the CSS class to apply with control when resizing
MinimumWidth : It is used to set the minimum width of resizable element.
MinimumHeight : It is used to set the minimum height of resizable element.
MaximumWidth : It is used to set the maximum width of resizable element.
MaximumHeight : It is used to set the maximum width of 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 : To set the location of resize handle.

Now we take a ASP.NET web application and then we use a ResizableControlExtender and we will use the properties of the ResizableControlExtender as we have discussed above. Follow the given steps.

Step 1 : Create an ASP.NET Web Application.
Step 2 : Go to the Toolbox and put a ScriptManager on the form.

Code on .aspx page

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

Step 3 : Take a Panel control and write a paragraph inside the Panel.

Step 4 : Go to Toolbar and take a ResizableControlExtender control.

code on .aspx page

<asp:ResizableControlExtender ID="ResizableControlExtender1" runat="server">
        </asp:ResizableControlExtender>

Step 5 : Set the property of ResizableControlExtender control as below.

<asp:ResizableControlExtender ID="ResizableControlExtender1" TargetControlID="Panel1" HandleCssClass="handlecss" ResizableCssClass="resizablecss" MaximumHeight="700" MaximumWidth="700"
MinimumHeight="300" MinimumWidth="200" HandleOffsetX="2" HandleOffsetY="2" runat="server">
        </asp:ResizableControlExtender>

Code on .aspx page

<head runat="server">
    <title></title>
     <style type="text/css">
.handlecss
{
width:20px;
height:20px;
background-color:Red ;
}
.resizablecss
{
padding:0px;
border-style:solid;
border-width:2px;
border-color:Green;
cursor:se-resize;
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Panel ID="Panel1" runat="server" Height="202px" Width="817px">
        <p style="font-family:Verdana; color:Green; font-size:15">This is example of ResizableControlExtender. This is example of ResizableControlExtender. This is example of
        ResizableControlExtender.
        This is example of ResizableControlExtender.</p>
        <p style="font-family:Verdana; color:Green; font-size:15"> This is example of ResizableControlExtender. This is example of ResizableControlExtender.
        This is example of ResizableControlExtender. This is example of ResizableControlExtender. </p>
        <p style="font-family:Verdana; color:Green; font-size:15"> This is example of ResizableControlExtender.
        This is example of ResizableControlExtender. This is example of ResizableControlExtender. This is example of ResizableControlExtender.
        </p>
        </asp:Panel>
       <asp:ResizableControlExtender ID="ResizableControlExtender1" TargetControlID="Panel1" HandleCssClass="handlecss" ResizableCssClass="resizablecss" MaximumHeight="700" MaximumWidth="700"
       MinimumHeight="300" MinimumWidth="200" HandleOffsetX="2" HandleOffsetY="2" runat="server">
        </asp:ResizableControlExtender>
    </div>
    </form>
</body>

Run the application.

When you hover the mouse on the resize handler, it will look like the below figure.

You can resize the pannel area by dragging it. Look at below figure.