HOW TO USE ASP.NET AJAX DRAG PANEL EXTENDER

HOW TO USE ASP.NET  AJAX DRAG PANEL EXTENDER

Drag Panel Extender can be added to panel control. It has 2 panels
one nested another.Nested panel used for drag purpose. Outer Panel used for content display,

DRAG PANEL EXTENDER PROPERTIES:

1) targetcontrolid
2)draghandleid


        </div>    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </asp:ToolkitScriptManager>
    <h1>ASP.NET AJAX DRAG PANEL EXTENDER DEMO</h1>

          <asp:panel  runat="server" ID="panel1"
          BorderColor="Red"
          BorderStyle="Solid"
          BorderWidth="1px"
          BackColor="magenta"
          ForeColor="White"
           Width="300px"
          >
<!--   DEFINE 2 PANELS 1 FOR OUTER PANEL AND 2 FOR DRAG HANDLE PANEL -->

           <asp:Panel ID="pnlDragHandle" runat="server" BackColor="Teal" BorderColor="Yellow" BorderStyle="Dotted" BorderWidth="5px">
              Drag this Panel by clicking here
           </asp:Panel>
          The DragPanel extender allows users to easily add "draggability" to their controls. The DragPanel targets any ASP.NET Panel and takes an additional parameter that signifies the control to use as the "drag handle". Once initialized, the user can freely drag the panel around the web page using the drag handle.


          </asp:panel>
    <asp:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="panel1"
     DragHandleID="pnlDragHandle"  
    >
    </asp:DragPanelExtender>
   
    </div>

<!--  DRAG PANEL EXTENDER MAY NOT WORK IN ALL BROWSERS, SO SET BODY HEIGHT VALUE -->
    <script type="text/javascript">
        function setbodyHeight() {
            document.body.style.height = "530px";//Math.max(document.body.scrollHeight);
        }
        setbodyHeight();
    </script>

TAGS: HOW TO USE ASP.NET  AJAX DRAG PANEL EXTENDER,Drag Panel Extender,how to use drag panel extender.asp.net ajax control toolkit, drag panel extender for panel control. asp:DragPanelExtender.