Working with DragPanel AJAX Control

Introduction

Enriching your web application has been kind of hard before AJAX. However, with Microsoft AJAX control toolkit, that job is becoming easier. In this article I will explain the DragPanel control with a help of a sample project.

About the control

A DragPanel is used mainly to allow you to implement mouse based drag and drop movable content in your ASP.NET web page, where the end user of your website is allowed to move the content and place it anywhere on the page. Before firing the Visual Studio environment, make sure you satisfied the requirements.

Requirements

In order to be able to work with ASP.NET AJAX Control Toolkit, the following should be available:

• Microsoft Visual Studio 2005 (any version) or you can also use the free of cost Visual Web Developer Express 2005.
• Download ASP.NET 2.0 AJAX Extensions and install them on your computer after installing Visual studio 2005.
• Download ASP.NET AJAX Control Toolkit and install it on your computer after installing Visual studio 2005 and AJAX Extensions.
• After the completion of installation, open Visual Studio 2005 or Visual Web Developer and add a tab in the Toolbox named AJAX Toolkit.
• Right Click in this tab and choose add items. Browse to the sample directory of where you did extract the Toolkit, then to bin directory and choose the file named AjaxControlToolkit.dll.

This is all. You have installed AJAX Control Toolkit and you can start building your controls. Well, you should be ready by now to begin AJAX Toolkit implementation. Creating Your DragPanel Sample Solution Follow the easy steps below to create your solution.

1. Start your Visual Studio 2005 IDE.
2. Choose Create Web Site from the menu.
3. In this sample application we will use the Visual Basic language for the sample application.
4. Name the solution DragPanelSample.
5. Choose ASP.NET AJAX Control Toolkit Web Site.
6. Choose File System in the location box.
7. Click OK to create the project.
8. Visual Studio 2005 will create your project with a Default.aspx page and most likely a readme.txt. Go ahead and get rid of the latter file.
9. Open Default.aspx page in design view.
10. You noticed that there is a control on the page already called script manager. (Well, AJAX is really a script based implementation of the language JavaScript.) In Short, Script Manager Control manages client script for Microsoft ASP.NET AJAX pages. By default, the Script Manager control registers the script for the Microsoft AJAX Library with the page. This enables client script to use the type system extensions and to support features such as partial-page rendering and Web-service calls.
11. Create a new item in the solution of type Style Sheet and leave the default name.
12. Listing 1 contains the style sheet content that should be placed inside the file. You can copy and paste directly.
    
    Listing 1 - Style Sheet Content
    
    .dragContainer{ background-color: #FFC0FF; height: 282px; width: 357px; border-bottom-color: black; } .dragHeader{ background-color: #8080FF; height: 48px; width: 358px; } .dragDetail{ background-color: #FFC0FF; height: 213px; width: 357px; }
13. Go to the source mode, click and drop the style sheet file into the header section of the default web form in order to be able to reference it.
14. Now drag one panel from the standard Toolbox, go to source mode and change the ID tag to PnlContainer, delete the height and width tags and insert a cssclass tag with a value dragContainer as selected from the style sheet like listing 2.
    
    Listing 2 - Container Panel Format
    
    < asp:Panel ID="PnlContainer" runat="server" cssclass="dragContainer" >
15. Now, drag two panels from the standard toolbox and drop them inside the container panel.
16. Name the first panel PnlHeader and delete the height and width specs. Then create a CssClass tag with value dragHeader like in Listing 3 and add the content specified.
    
    Listing 3 - Header Panel Format and Content
    
    < asp:Panel ID="PnlHeader" runat="server" CssClass="dragHeader" >
    Click and Drag Here To Move ME.....around the page < /asp:Panel >
17. Name the second panel PnlDetail and delete the height and width specs. Create a CssClass tag with value dragDetail like in listing 4.
    
    Listing 4 - Detail Panel Format and Content
    
    < asp:Panel ID="PnlDetail" runat="server" CssClass="dragDetail" >
    Here is just some content where you can add as much text as you like< br / >
    line 1< br / >
    line 2< br / >
    Remmeber that you can add any html text here< br / >< br / >
    < /asp:Panel >
18. Place the cursor after the script manager html end tag. From the Toolbox of the Toolkit drag a DragPanel control and set the properties as specified in Listing 5.
    
    Listing 5 - DragPanel Extender Format
    
    < ajaxToolkit:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PnlContainer" DragHandleID="PnlHeader" >
    < /ajaxToolkit:DragPanelExtender >
19. Please note that some of these properties cannot be specified using the normal properties window.
20. The target control ID specifies the control to drag and move (the container panel in our case).
21. The drag handle specifies the control that the user is able to click and drag from (the header panel in our case).
22. All tasks performed so far allow you to move the panel around without fixing it in place. You can try this by running your code and testing the panel.
23. In order to be able to fix the panel on the web page and stay where you have dropped, you have to add the JavaScript listed in Listing 6 before the end of the body tag or in the header tag.
    
    Listing 6 - JavaScript used to position the DragPanel
    
    < script type="text/javascript" >
    function setBodyHeightToContentHeight()
    {
    document.body.style.height = Math.max(document.documentElement.scrollHeight,
    document.body.scrollHeight)+"px";
    }
    setBodyHeightToContentHeight();
    < /script >

This article has been taken from aspalliance.com