Duration: 15 minutes
Summary: In this video, we are going to talk about the DragPanelExtender and the DropShadowExtender. With the drag panel extender we can create a draggable panel. The drag handle for the panel in our example is a label. As we always do, we start by dropping a script manager on the page. With the drag panel we need to set two ids: the target control and the drag handle. Once those are set, we can drag the panel around the page. We will use the same panel we created in the previous example. Then, we will add a DropShadowExtender on the page and associate it with the panel using the TargetControlId. Finally, we set some properties: Opacity, Rounded, and TrackPosition.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Label, DragPanelExtender, TargetControlID, DragHandleID, ToolkitScriptManager, DropShadowExtender, Opacity, Rounded, TrackPosition, Panel .
Welcome back, everyone. I am Ayad Boudiab , I am a senior .Net Application Developer and as you can see in the series of videos, we've been discussing AJAXControlToolkit. We already discussed the server portion of AJAX and we discussed many of the controls there. Now we've been working with the AJAXControlToolkit, the client side, and we've been discussing, for example, the Accordion, the HTMLEditorExtender, the AutoComplete, AlwaysVisibleControl, we've talked about many of those. In today's video, I'd like to talk about a couple of things. The first thing is the DragPanel control and the DropShadow control. If we have more time, of course, we'll discuss other controls, but these are the two main ones that I'd like to talk about. For every one of those, I'll create a page and then we'll see this control in action. We'll set some properties and see how all that would work.
Let's go ahead and get started starting with a page for the DragPanel. On the website, I right click and add new item. Let's call this one 'DragPanelExample' and click add. Now I have an empty page. Here's my control toolkit that I added in the previous video. Please watch the earlier video to see how we added the tab and how we added those controls to the tab. That's mainly by adding the DLL. In that case, I need to start, first, by adding a ToolkitScriptManager onto the page. That will add the ToolkitScriptManager there and under the script manager we'll add our control. Don't worry about this error, I think it's showing up because I have a couple instances of Visual sitting open that I'm working with so you should not encounter this error. You just drop the ToolkitScriptManager on the page and you're ready to go. Having the ToolkitScriptManager, then to add the Panel that would contain some content, I grabbed the content from a video I was working on, it doesn't matter, just it's simple text. Let's go ahead and add a Panel to our page and see how we can take it from there. Let me simply add a break in case I need that here and let me scroll up to the standard controls, take a Panel, and drop that on the page.
Now that I have the Panel, I want to do a couple of things. First, I will have the content as I promised, these are the ones that are simple text. And I will also have a label, Why do i need a label? In my case, I'm working with a DragPanel, as the name implies it allows me to drag a Panel around the page. If I need to drag a Panel around the page I need a handler, that's a handle that you can click on so you can drag the Panel around. That handle that I'm using in this case is a label. That's why I'm going to add, inside the Panel, a label and some text. Here's my Panel, I'm going to add a label inside the Panel, and let's set some properties for this label. I have a label inside the Panel, ID is 'Label1', Runnat="server". Let's set the BackColor, make that 'Black'. Let's make the Font-Bold. We already have the text properties so let's set the Text to 'DragPanel'. Now I have my label, background color, the bold font, the ForeColor - let's make that 'White'. That's one more thing that I'm missing, let's make the ForeColor 'White'.
Now that I have those items, under the label, let me add a break. Then, down here, I'm going to add all the text. I'm going to copy this text from another location and drop it here on the page. That's the text that I have so far. Let's go ahead and save. I'm going to right click on the page and try to view that in the browser. Page loads and it should give me a label, here's the label, here is the content inside. So all this is the Panel. If I click here, nothing is happening so I cannot do anything yet. Let me go ahead and close the window and come back to my page. Underneath the panel, by the way these can be tied by TargetControlID's, so it doesn't matter if you put it underneath or above, underneath the Panel I'm going to drop a DragPanelExtender. Let's go ahead and look at our control toolkit and look for the DragPanelExtender. There's the DragPanelExtender, drop that on the page. DragPanelExtender with its properties, as we always do. What links them together is the TargetControlID. Who's the target? It's the Panel, not the label, the Panel is the target control because that's the one that I want to drag around. I already have the ID for the DragPanelExtender and Runat="server", you don't want to mess with that, and I have the TargetControlID, I still have the drag handle because the DragHandleID is the handle I'm going to use, as the name implies, to move or drag my Panel around. What is that? This is the label that I added up here. 'Label1' would be the ID of the drag handle. Let's go ahead and save. Now that I added my DragPanelExtender let's preview that in the browser. By previewing that, now I can click on the label and now I'm able to move the Panel around. As you can see, I'm able to drag it around because of the DragPanelExtender that I just added. That's how the DragPanelExtender actually works.
Now let's go ahead and move to the drop shadow and see how that works. The second item I would like to talk about is the DropShadowlExtender. We know what a drop shadow is, we can do a lot of that with CSS, but since it's provided with the toolkit, it's a good thing we can apply on a control, for example, on a Panel. I'll right click on the website again, add new item, and in this case it's a "DropShadowExample". Click add. Now I have an empty page. I'm going to take the Panel that I had from the previous video and drop that on the page, it's the same type of Panel that I had earlier so I'm going to drop that here with some text. Right now it's 'Panel1' and if I save and preview that in the browser, I have a simple Panel with nothing on it, with the text.
As we always do, and if you forget you will end up with an error message, you need to add the ToolkitScriptManager on the page. After the ToolkitScriptManager, I'm going to work with the DropShadowlExtender. Here's the ToolkitScriptManager, underneath it I can add the DropShadowlExtender. Before the Panel, to show the difference between where the Panel starts and where the rest of the text is so it doesn't show up right on top of the page let's type something like, "Here is an example of drop shadow." Then I'm going to put a HR here and now I'm going to have the DropShadowExtender. Let's go ahead and come over to the left side, look for the DropShadowlExtender, and drop that on the page. With the simple properties that we have, we need to add a few more. The first thing that we like to add is the TargetControlID. My target control is the Panel, 'Panel1', 'Panel1' over here. The second thing is how you want the opacity to be. The opacity, fully opaque or not, we choose something like 0.7, of course it's a value, in this case between 0 and 1, so we chose 0.7. The other thing is whether you want it rounded or not, Rounded equal to 'True'. And one more thing, TrackPosition, if you want you can add the track position and set that equal to 'True'. By setting those properties for the DropShadowlExtender, having the Opacity, and the Rounded value, if I right click on the page and try to view that in the browser, now I have the following. Notice I put a the, the tags on the top with the HR, that's part of the first section, and here is my Panel, there's nothing on the left side on the top, but only on the right and the bottom. This is the drop shadow that we've added, and also we have the opacity and the rounded corners for that Panel.
That's basically how we can use the drop shadow. It's very handy in this case. Again, I could have, instead of using the DropShadowlExtender like you see here, I could have come to the top HEAD section, add the style in here, and set the property type equal "text/css". I could do a lot of drop shadow here using those styles, and then put that in a class, for example, and add that to my Panel, by saying CSSClass equal the class that I chose up here. It is my choice, I could have added these styles on the top using CSS, or I could use the DropShadowlExtender to do that for me with the properties that I have available here. That's how I work with the drop shadow extender. Also, we discussed the DragPanel, how we can drag the Panel around using a handle, in that case the handle would be a label, and how we tie them together using the DragHandleID here, and everything is tied together here between the actual controls on the page and the toolkit control using the TargetControlID.
These are the two items that I'd like to discuss for today. There's still more discussions coming for the rest of the controls, for example, I'm going to talk about the hover menu with a rounded corner. I'd also like to talk about the MultiHandleSlider. One more thing is the PasswordStrength and the TabPanel, in addition to a couple more that I'd like to show you in the upcoming videos. So please stay tuned, there's more to come. Thank you very much for listening. I'm Ayad Boudiab, and you take care.