Duration: 17 minutes
Summary: In this video, we are going to talk about the collapsible extender control. The target of this control is a panel. As the name implies, this control helps us expand and collapse a certain content that we have in a panel. There are many properties that we can set on this control. But to start, we will create a panel and fill it out with content.
Then, we will drop a CollapsiblePanelExtender control on the page and manipulate the properties. We need to make sure that the TargetControlId is the Panel (in this case Panel1). We will also point to the buttons that we can use to expand and collapse the panel. The expand direction can be vertical or horizontal. There is also a label that we can place on the page to tell us the status.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: ASP.NET Ajax and Visual Studio 2010
Keyword: ASP.NET 4, Visual Studio 2010, Ajax, Button, Panel, ToolkitScriptManager, CollapsiblePanelExtender, TargetControlID, CollapsedSize, ExpandedSize, Collapsed, ExpandControlID, CollapseControlID, AutoCollapse, AutoExpand, ScrollContents, TextLabelID, CollapsedText, ExpandedText, ExpandDirection.
Welcome back, everyone. This is Ayad Boudiab. I'm a senior .net application developer and I'm continuing some of the examples we've been talking about as far as AjaxControlToolkit.
If you recall from previous videos, we discussed Ajax on the client side, on the server side. Right? On the client side we've been looking at the toolkit and we see all the different controls that we have there and we're able to use them and experiment with them. In order to do that of course I had to download the DLL, which is the AjaxControlToolkit DLL and I was able to, if you notice on here on the left-hand side, create a tab. I named it "Ajax Control Toolkit," you can name it anything you want, by clicking "Add Tab". Right? And when we did this I was able to right click anywhere on the tab and be able to add all those controls.
Now, how would I know what those controls are? That's part of the DLL. So when I right clicked and I chose item I was able to select that DLL and that DLL contains all the controls that I needed. Right? And we were able to drag those controls and drop them on the page to work with them. That's what we've been able to do as far as the AjaxControlToolkit.
Now, there are a few controls that I'd like to still talk about before we wrap up this course. In today's video I'd like to specifically talk about the CollapsiblePanel control. As the name implies, when we say CollapsiblePanel control we are expecting some type of Panel that we can have on the page and we can have this control, which is, of course, an extender in this case, to be able to collapse and expand that Panel. So we need to have that type of flexibility. For this I'll create of course a Panel with some text on it and be able to work with this control and see what properties it provides us.
So to do that, let's go ahead and create a page and experiment with that control. Scroll up, right click on the project, add a new item. And that's, of course, a web form. We'll call this "CollapsiblePanelExample." Okay? Let's click Add. We end up with an empty page. Now, as we all know, from the time we started experimenting with the AjaxControlToolkit, we know that the first thing we need to make sure is we have ToolkitScriptManager on the page. If we don't we'll get an error message. So this Script Manager needs to exist in order for the ASP.NET to know that we are working with the Toolkit.
So here's the ToolkitScriptManager on the page and then we will add the Panel. Okay, I don't want the file. No, I don't want to replace it. Add that to all. Sometimes this error's showing up, but it should be able to create that control and drop it on the page. I end up with a ToolkitScriptManager. So that's the first thing that I want to add. Right?
The second thing is I'd like to add a Panel. Before I add the Panel let's just add a little bit of text so we can see the Panel. We can differentiate with some type of horizontal rule in between. So we can see the Panel clearly on the page.
I'm going to start a new paragraph. Within that paragraph I'm going to add the DateTime on the page. It's not that I need the DateTime, it's just some type of content. DateTime.Now.ToLongDateString(). Okay? So that's the first thing I'm going to add. And then underneath this I'm going to put an HR. And then under the HR I'm going to add a Panel and then an HR and then a paragraph at the end. Okay? So, just again, to show this clearly on the page here's a Panel, under the Panel I'm going to add another HR and then another paragraph with some text. Maybe something like, "Please read the terms and conditions." Something like that. Okay? So, now, I end up with something like this.
Right now I have the DateTime on the top and then in between in here I would have the Panel. Okay? Now let's go ahead and work with the Panel and see what type of content I would like to add to that Panel. The Panel is of course by default it's ID 'Panel1'. Okay? And inside the Panel, I would like to add some text. Now considering I need some text I don't want to go ahead and type them. I just grab some text from Mr. Bool website that talks about a previous video that I had. Okay? So just some text with some paragraph that just splits the text again into separate paragraphs.
Right now the Panel would look like this. DateTime, horizontal rule, some text and a Panel and then horizontal rule and then some text at the bottom. So the Panel is in between those two HRs. All right, so far so good then. I have a Panel on the page. Now how can I make that collapse?
Let's go ahead and add the CollapsiblePanelExtender. I already have the ToolkitScriptManager already on the page. So let's go ahead and add the CollapsiblePanelExtender, and see what properties we can change within that. Underneath the Panel I'm going to add, I mean in this case it doesn't matter because I'm going to link them by the TargetControlID, but I chose to put it underneath the Panel. You can put it at any other location on the page.
Let's scroll down and get to the CollapsiblePanelExtender, Because these items are not in alphabetical order, sometimes it's hard to find them. Here's the CollapsiblePanelExtender and I drop that on the page and here it is. Now I need to change some of its properties like we normally do.
So the first thing that I'd like to add is, of course, my target because I need to know what control I am targeting. So TargetControlID will be equal to the 'Panel1' that you see up there. Right? That's the Panel, 'Panel1'. That's the ID. That's the one I'm targeting. Now the next thing is how do you want the size to be when it's collapsed and when it's expanded? That's your choice. For example, the CollapsedSize I'm going to set that to '0'. So when it's collapsed it will be '0'. Then I'm going to select the ExpandedSize. I'm going to set that to, for example, '350'. Okay? So this is the size that I have when it's collapsed and when it is expanded. Now when it first loads do you want it to be collapsed or do you want it to be expanded? That's when you set the Collapsed property to 'True' or 'False'.
In this case I'm going to make it Collapsed when it first shows. The second thing is the ExpandControlID and the CollapseControlID because you need to point to, for example, two controls in this case. In my case, I'm going to make them a button that makes this control expand or collapse. Okay? You can show it as a link button. It's your choice. In my case I chose a button. But in this property I want to set what the ExpandControlID is and what the CollapseControlID is. So ExpandControlID equals something. I'm going to set that shortly. And then the CollapseControlID equals something.
Let's go ahead and know what those are before we proceed. Underneath the Panel in here I'm going to start a new paragraph and add a couple of buttons because, as I mentioned, these are the ones I want to use to collapse and expand my control. So scroll up here. Look for the buttons. Here's the Button. That's the first one and here is the second Button. Now that I have the two buttons on the screen, let's give them some text.
So, the first one, let's call this one "btnExpand" and let's call the text "Expand" and let's call this one "btnCollapse" and the text will be "Collapse" Okay? So these are the two controls that I want to make the Panel collapse and expand. Well, of course, these need to be linked to the CollapsiblePanelExtender so I have to choose the button for collapsing, which the collapse button is here. Right? And then I'm going to choose the button for, I'm sorry I chose the wrong button here. The one for expand goes for expand and the one for collapse goes for collapse. So right now I specified the buttons that make this Panel collapse and expand.
Now, you also have the option to make it AutoCollapse when you hover over it and AutoExpand when you hover over it. Well, I don't want this flexibility right now. I don't want to change the Panel when somebody hovers over it. I just need to do that myself using the buttons. So AutoCollapse I'm going to set that equal to 'False' and I'm going to make AutoExpand I'm going to also set that to 'False'.
Now, do you want to scroll the content? Because I have some text in there so I'm going to make the ScrollContent equal 'True'. The other item that I'd like to set is the TextLabelID. What text that would show on the screen to show whether something is collapsed or hidden. I'm going to show you that when we display the Panel, but for now let's go ahead and drop a label on the page and we'll give it some text down here. So I'm not going to set the property yet. Let me go ahead and drop a label on the page and that label let me put it right underneath maybe the buttons. Okay? So, let me put that label under the buttons in here. Here's the label. It has 'Label1' and the text 'Label'. I'm not worried about that right now.
But what I want to do down here in the properties I'm going to set the TextLabelID to be equal to that label. Again, I will show you momentarily when we display that what it means. So that's the TextLabelID. And then for the collapsed text and the expand text what do you want to show? For the CollapsedText I'm going to show "Show Content..." and then for the ExpandedText I'm going to show the "Hide Content". The other thing that I have left is the ExpandDirection. How do you want to expand? Horizontally or vertically? In my case, I'm going to set it right now first to expand vertically. These are the properties that I'd like to set for now.
Of course, I can remove this and close the control over there and then remove this one. That's my choice. Right? I can do that by setting the properties. And now I have pretty much what I need in order to get this CollapsiblePanelExtender to work. Let's go ahead and give it a shot and see what we have so far.
It gave me the actual content and then here is the Expand and Collapse button. As we specified in the control, the Expand button is the one that makes the Panel expand and the Collapse is the one that makes it collapse. Notice the label that I was telling you about. The label says right now, "Show content..." Right? Because there's nothing in there. Let me go ahead and expand. It shows me the content. It's scrollable as I specified. Now look at the label what it says. It says, "Hide content" So these are the ones that I set in the control in here by saying "Show Content" and "Hide Content". You notice those? These are the ones that I set where I specified the TextLabelID be 'Label1'.
So that label is going to hint to the user, in addition to the Collapse and Expand buttons, what's going on. So collapse, expand and scrollable. Right? And the label that actually shows what's going on right now. I want to hide them right now. When I say collapse it says show the content. I can show it right now. So this is very handy when you're working with a page that has a lot of content and you don't want the user to be scrolling up and down all the time. You can take this and make the content collapsible so the user can be able to basically expand it whenever they want to.
One more thing that I'd like to change. As I mentioned earlier, the ExpandDirection is 'Vertical'. Again, I can make that 'Horizontal'. Now let's try to preview it. It says expand and collapse like usual and you notice now how it's showing. So, it was going vertically now it's going horizontally in terms of the expand and collapse. Again, same property, but it shows me all the content in that case. So these scrolling left and right and up and down are not active. Okay? So you have the power of changing those properties the way that suits your needs, but at least we know that we can target a specific Panel in this case and be able to collapse and expand that content.
I hope this discussion has been helpful to you. Please let us know if you have any questions on Mr. Bool website. Thank you very much for listening. I am Ayad Boudiab, and you have a good day.