Working With DragPanelExtender Control in AJAX

A K
12y
24.8k
0
0
100
Article

Introduction

The DragPanelExtender control allows the user to drag controls independently on the web form. It makes user controls dragable. It has two main properties which are used for this. They are DragHandleID and TargetControlID.

DragHandleID : Used to set the control ID which will be associated with the DragPanelExtender control.
TargetControlID : The ID of a Panel to make dragable.

Follow the given steps to use this control.

Step 1 : Take an ASP.Net web application -> Go to ToolBar and take ScriptManager.

Step 2 : Take two Panel controls, two Label controls and one TextBox control and write some text. Look at the following code.

<asp:Panel ID="Panel1" runat="server">
         <p style="color:Green;">This is simple example of DragPanelExtender control.<br />
         You can drag the following panel area at any where on the form. </p>
           <asp:Panel ID="Panel2" Width="30%" Height="20%" BorderWidth="1px" BorderStyle="Solid" BorderColor="black" runat="server">
          <asp:Label ID="Label1" runat="server" Text="Dragable Panel.." ForeColor="Red" Font-Bold="true"></asp:Label>
           <table>
           <tr>
           <td><asp:Label ID="Label2" runat="server" Font-Bold="true" Font-Size="Larger" ForeColor="Red"
           Text="Name"></asp:Label></td>&nbsp&nbsp&nbsp
           <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
           </tr>
           </table>
           </asp:Panel>
           <p style="color:Green;">It is simple example of DragPanelExtender control.....</p>
        </asp:Panel>

Step 3 : Go to the ToolBox and add the DragPanelExtender control to the form.

Step 4: Set its DragHandleID and TargetControlID property.

<asp:DragPanelExtender ID="DragPanelExtender1" DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
      </asp:DragPanelExtender>

Code on .aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
    <title></title>
    <style type="text/css">
    .dragablepanel{
      background-color: #FFC0FF;
      height: 200px;
      width: 400px;
      border-bottom-color: black;
}
</style>
</head>
<body>
     <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
    <asp:DragPanelExtender ID="DragPanelExtender1" DragHandleID="Panel1" TargetControlID="Panel2" runat="server">
      </asp:DragPanelExtender>
        <asp:Panel ID="Panel1" runat="server">
         <p style="color:Green;">This is simple example of DragPanelExtender control.<br />
         You can drag the following panel area at any where on the form. </p>
           <asp:Panel ID="Panel2" Width="30%" Height="20%" BorderWidth="1px" BorderStyle="Solid" BorderColor="black" runat="server">
          <asp:Label ID="Label1" runat="server" Text="Dragable Panel.." ForeColor="Red" Font-Bold="true"></asp:Label>
           <table>
           <tr>
           <td><asp:Label ID="Label2" runat="server" Font-Bold="true" Font-Size="Larger" ForeColor="Red"
           Text="Name"></asp:Label></td>&nbsp&nbsp&nbsp
           <td><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></td>
           </tr>
           </table>
           </asp:Panel>
           <p style="color:Green;">It is simple example of DragPanelExtender control.....</p>
        </asp:Panel>
        <script type="text/javascript">
            function setBodyHeight()
             {
                document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px";
             }
            setBodyHeight();
</script>
    </div>
    </form>
</body>
</html>

Run the application.