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
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
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
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
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.