Working with DragPanel AJAX Control
page 4 of 6
by Nidal Arabi
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 33679/ 69

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>    

View Entire Article

User Comments

Title: rh   
Name: rtyry
Date: 2012-10-26 1:54:41 AM
Comment:
ryry
Title: b   
Name: bh
Date: 2012-10-12 12:54:05 PM
Comment:
j
Title: Thanks   
Name: Krishna
Date: 2012-04-26 5:07:27 AM
Comment:
It's useful to beginners also,Thanks a alot
Title: Helpful   
Name: Mr. Gopal
Date: 2009-03-24 7:19:03 AM
Comment:
It is very helpful that a very beginner can try it.....
Thank you
Title: Thanks   
Name: Mr.Gren
Date: 2009-01-15 6:29:24 PM
Comment:
I do not understand "Listing 6 - JavaScript used to position the DragPanel"? (I'm not good at javascript)
Title: Good   
Name: mr.gren
Date: 2009-01-14 5:03:59 PM
Comment:
Thanks !!!
Title: using iframe   
Name: aravind
Date: 2008-12-26 2:58:08 AM
Comment:
hw can i make a iframe dragable?
Title: iframe dragable.   
Name: Hemant.
Date: 2008-12-01 2:26:07 AM
Comment:
how can i make an iframe dragable?






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2021 ASPAlliance.com  |  Page Processed at 2021-11-26 9:39:24 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search