Duration: 18 minutes
Summary: When developing web applications you might feel the need for a menu that pops up and allows the user to take actions. This hover menu could be the answer. You can create a panel that wraps any set of controls that meet your needs. Then, the hover menu extender can target that panel. When the user hovers over the panel, the menu will show up. In our case, we will create a menu that contains radio buttons of colors. The user can select the color he/she likes and the text on the panel will change color based on the selection. While we are at it, we added a rounded corner extender that rounds the corners for the pop-up menu. This is a flexible control because you can specify the multi slider targets you want. In our case, we will create two targets. This control is time saver because you have control over the values the user can choose from. Thus you do not need to create validation rules to determine whether the user typed the values you are expecting.
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, ToolkitScriptManager, Panel, RadioButtonList, AutoPostBack, ListItem, onselectedindexchanged, TargetControlID, RoundedCornersExtender, PopupControlID, PopupPosition, TextBox, MultiHandleSliderExtender, MultiHandleSliderTargets, Enabled, ShowHandleDragStyle, ShowInnerRail, HandleAnimationDuration, Maximum, Minimum, TargetControlID, Length.
Welcome back everyone. This is Ayad Boudiab, I'm a senior dot.net application developer, and we are continuing our discussion of AJAX control tool kit. I just covered in the previous video the dragged panel and the dropped shadow, and we saw how those worked. In this video, I'd like to talk about the hover menu, with the rounded corner, and probably the multi- handle slider, if I have time for it, and most likely, I would. So, these are the two items that I'll be covering and we'll create pages for those and see how they can be working.
Let's go ahead and get started, and create first a page for the hover menu. I had to click on the website, add a new item. That's the 'HoverMenuExample'. Click add. We have the page. And now on the page, I want to drop the first thing to start with, is the 'ToolkitScriptManager'. After the 'ToolkitScriptManager', I'd like to add a panel and then the 'HoverMenuExtender'. Now, as the name implies, it's a hover menu, right? So, I'm expecting this control, that when I hover over some type of control, it would show up. OK. As a menu. And then I should be able to take action on that menu, and see what I can do with it.
But now that I'm done with the toolkit script manager, I should be able to proceed with the rest.
First of all, I'm going to create a simple panel, like the one you've seen in the previous video. In this case I'm not concerned about the content, it's just a simple, some simple text that I'm going to display on the panel. But I'm concerned about the rest of the code that can be using that panel. So I'm going to drop in here, a panel one, right, and then a runat="server" with some text inside of it. Right now, when I view that in the browser, yes I want to save my changes, I should be able to see just simple panel with text in it, nothing to do with anything. Right clicks, left click, nothing happens. Then I click in here, just simple browser stuff, nothing fancy. and when I hover over the text, nothing happens. OK? So far, so good. I have my panel and the script manager. Now, I'd like to see what I can do with the, with that panel.
So I want to have some type of hover menu extender. The idea here is that I will create another panel. On that panel, I have a radio button list. So, list of radio buttons that are part of that panel, and that would represent the menu that I'm interested in. OK. Let's see how we can do that. Come to the simple, standard controls that you see up here. And then I need a radio button list, but before that, I want a panel. So I drop a panel. 'Panel2', OK. and then, inside that panel, I'm going to drop a 'RadioButtonList'. The RadioButtonList, I'm going to change some of the properties. I'm going to give it a BackColor of 'Gray'. And there's a couple things I'm going to do, but I will do that shortly. First of all, let me add some items into this radio button list. So, list item. I need three of those guys. So, copy and paste.
These represent colors, so the idea here is I have the radio button list, when I select a radio button, the background of the panel will change depending on the color that I chose. So in this case, I will go with Red, Green, and Blue. Just as a simple example, of colors. Those colors are not good design colors. At least, not in this context. But these are good to go with right now. Now I have my radio button list, and I also have my panel, right, and then I have another panel named 'Panel2' that wraps around that RadioButtonList. OK. Now, what else can I do? The other thing that I'd like to do is associate this, this RadioButtonList with a code- behind. So when the user selects one of those items, I want something to happen. And this is of course a selected index change on this RadioButtonList.
Now, in order for this to happen, when the user selects something, I want it to be auto post-back. Right. So, post-back to the server and trigger something. So I'm going to set 'AutoPostBack' property to true on this control. And as you see, right now in the design, if i click on the design tab, I should be able to see a RadioButtonList inside the panel. So it looks like I have some text inside Panel1, Panel2 has RadioButtonList. OK. Now, for this radio button, if you notice on the right hand side, I have some events associated with it. OK. So let's go ahead and look at those events. Scroll up. I want the "Events". 'SelectedIndexChanged'. That's the one that I'm interested in. So if I double click inside that box, it should associate event for me. And it took me back to the code-behind, and this is what I can add, the action that I want to happen. Now what I want in this case is foreground of the Panel1 to be changed depending on my selection. So I'm going to save Panel1.ForeColor, that's a foreground color, that's equal whatever I selected from the radio button.
Well this is usually RadioButtonList1.SelectedItem.Text. But of course, I need to make some type of color out of this, right? So this is why. In this case, I'm going to use the System.Drawing.Color.FromName. As the name implies, I want the color from the name I just provided. So if I provide you a Red, give me a color out of that name. Green, the same thing. Blue, the same thing. So, read the user selection, make a color object out of it, set that to the Panel1 foreground color when the user selects that from the menu. OK. So far, so good. Let me go back to that source tab in here, and you notice that I already have, onselectedindexchanged, has been associated with that code-behind.
The next thing that I'd like to do, as I promised you at the beginning, is that I want to have a HoverMenuExtender. So let's scroll down here and add a HoverMenuExtender. I'm going to go to the toolkit and look for HoverMenuExtender. Here it is. And drop that on the page. Now that I have my HoverMenuExtender, with the ID and runat equal to server, of course there are a couple other properties I want to change. first of all is the TargetControlID. The TargetControlID would be equal to the RadioButtonList1. Right? So, this is the target, RadioButtonList1, would be the target of that HoverMenuExtender. OK. And the, I'm sorry, I made a mistake in here. The target is actually the panel, not the radio button. I want the menu to show up when I hover over a panel, not when I hover over the RadioButtonList. My bad. So, I need to that to be panel1 . That would be my TargetControlID. And then for the PopupControlID, that would be the panel2. That's what I want to have popup when I am hovering over panel1. What I want to see pop-up is panel2. Of course, what does panel2 contain?
it contains the RadioButtonList. So when I hover over panel1, the action will take place, a menu would show up. Now what type of menu? Whatever is in panel2. What does panel2 have? A RadioButtonList. Now, the second question that we will be asking ourselves is "Where will this show up?". So this is the PopupPosition. You have a list of items where you want that to show. In our case, that is select bottom. So I want it to show at the bottom of that panel. OK. So let's right click and view that in the browser. It should give me a panel. When I hover over it, I see the menu showing up at the bottom. Now the menu, when I select Red, it turns the text red. If I select Green, it turns the text green. Select Blue, it turns the text blue. I'm sorry, I must have thought earlier that I'm setting the background color. Actually, it should be the foreground color of the text, if I mentioned that. Sorry I just, it's the foreground color that I'm changing, not the background color. But any way, I mean, just a minor change in the code. So that would be, when I hover the panel, you notice that when I'm outside, there's no menu. Hover over the panel, I get the menu. Select the option, I get the post-back, and it changes the color based on my selection.
Let me do one more thing. If, considering that I used the HoverMenuExtender, let's see if we can use the RoundedCornerExtender, so we can apply that on the menu to round the corner as the name implies. So here's the RoundedCornerExtender. The RoundedCornerExtender also has some properties. Of course, it has the ID and the runat equal to server as we normally do, but in here, the TargetControlID for this one would be actually the RadioButtonList, because that's the one I'm rounding the corner for. So that would be, the RadioButtonList1. And then I can specify the radius. Let's make the value in here 6 for the rounded corner. And the corners would be the value of, I'm sorry, not color, corner, the value would be All in this case. So rounded, round all corners. The corners, not corner. So, round all the corners for this RadioButtonList. So now that I saved, I can right click and view in browser. And here's the menu, and you notice that the menu right now has rounded corner instead of sharp corners like I already had earlier. So that's how I can work with the RoundedCornerExtender, and the HoverMenuExtender. Go ahead and close that.
Now the other thing that I could talk about is also the multi-handle slider. Now the multi-handle slider, is a slider, right? So, you expect a slider to show up, but that slider we have multi-handle, in this case, we are covering two handles for that slider, and we'll see how that would work. Let's click on the page, add a new item, and let's call this one "MultiHandleSliderExample". MultiHandleSliderExample. Click Add. Gives me an empty page. Now on that page, I want to start with, of course, the toolkit first of all, make insure that the toolkit script manager is on the page. And then what I'm going to do is add some buttons underneath that. I'm sorry, some textboxes, not buttons. I'm going to add TextBox1, TextBox2, and TextBox3. So, I have three textboxes that show up, and we'll see the purpose of that. But for TextBox1, let's add a couple of breaks after that. OK. So a couple breaks, and then I have the other two textboxes. Now inside, underneath the textboxes in here, I'm going to add my MultiHandleSliderExtender. Let me go over to the control tool kit and look for MultiHandleSliderExtender. Here it is. Drop that on the page. I'd like to change some of the properties for this extender. First of all, I'm going to set that Enabled equal to true. And then, I'm going to ShowHandleDragStyle equal also to true. I want to show the handles for dragging. OK.
Then, ShowInnerRail, also to true. And I will show you what that means when we're looking at it, when we look at it. That's the inner rails. And then, I'm going to also handle the animation duration to be .1, so we can have some type of animation in there. Handle animation duration equal 0.1. And I also want to give a Maximum and Minimum value. The Maximum value, in this case, would be 100, and the Minimum value would be 0. I also need, of course, to set my TargetControlID. TargetControlID, in this case, is 'TextBox1'. One of those textboxes will be my target, the other one will be displaying the values. The length of this should be equal to about 200 pixels. OK. Close that here. Now that we set the properties on this MultiHandleSliderExtender, inside that control, I need to drop the targets, OK. Because, in here, this is when you, what the multi-handle slider means.
How many targets would you like to have? Let me drop some code in here. I'm going to have MultiHandleSliderTargets, which is the first target will be 'TextBox2', the second one is 'TextBox3'. So I set some properties on the slider itself, and then inside of that I specify how many targets I got. Let's go ahead and save that, and right click, and view in browser. You notice I have the slider, I have two textboxes. The first, the target of first one was the actual textbox. You'll notice the inner rails, how they're set. And you'll notice the styles that I've been setting. Now you see that there are two sliders. The first slider covers the bigger textbox, the second slider covers the smaller textbox. This is handy, because in that case, you don't have other textboxes where the user, you know, can give you different values. In here, you have a range of values that you're interested in. The biggest one is 100, the smallest one is 0, the user can go between those two. These are the multi-handle sliders. OK. So you can also mess with those properties and change them, like the inner rails. Again, the drag style. The animation. You can mess with the animation. What pixel value, minimal value you want. All this is under your control, and these are your targets in here. One for the smaller value, and one for the bigger value. These are the ones that we have set in the multi-handle slider targets.
So that's how the MultiHandleSliderExtender works. And also, we've seen how the HoverMenuExtender works. So if you have any questions, please drop us a like at the Mr. Bool website. Thank you very much for listening, I'm Ayad Boudiab, and you take care.