All the examples demonstrate how to build really cool extensions to existing html controls using mostly declarative methods. Will there be examples on how to do this programmatically? I'm building a web app that uses the Microsoft Virtual Earth map control.
The user will be able to add push pins dynamically, but I want to assign extender/behaviors to these pushpins on the fly. In otherwords, the pushpins will be created dynamically, and so there will be a need to attach extender/behaviours on the fly. Any ideas
or examples? Thanks.
Yes, you can definitely use the toolkit controls programmatically. The actual functionality is not tied to the control extenders - the extenders are just used to make it very easy to wire up the functionality in Visual Studio. How you go
about wiring things up dynamically depends on whether or not you want to add the behavior on the server or client side. If you're doing it on the server, then I'd recommend you still use the extender. The following example dynamically sets a HoverMenuExtender:
If you have to do it on the client side in script, then you'll want to create the behavior and add it to the Sys.UI.Control.get_behaviors() collection. The following example adds a new HoverMenuBehavior:
<script language="javascript">
function onAddBehavior()
{
// Create the behavior
var link = new Sys.UI.Control($('Link1'));
var hoverBehavior = new AtlasControlToolkit.HoverMenuBehavior();
hoverBehavior.set_PopupControlID('Panel1');
hoverBehavior.set_PopupPosition('Right');
// Attach the behavior
link.get_behaviors().add(hoverBehavior);
hoverBehavior.initialize();
}
</script>
Doing it on the client side is a little trickier though. You'll need to manually include the
HoverMenuBehavior.js file, and any behaviors you wire up won't be persisted on postbacks. This should get you started in the right direction though.
Thanks,
Ted
This posting is provided "AS IS" with no warranties, and confers no rights.
Thanks for the sample above. I'm most interested in the server-side creation. I've created an example where I've added HoverMenuProperties dynamically.
Here's the problem though: you have to already have created on the page the HME. What I need to do is to create the HME dynamically as well since I won't know until runtime how many HMEs I'll need to create. I've written the code to do so like the following:
But when the above is executed ... I get a runtime error "Target control with ID 'ImageTest1' could not be found for extender 'hme1'.".
ImageTest1 definitely exists.
I’m having a similar problem, it seams that the extender only looks for the TargetControl among it’s siblings in the Controls collection of it's parent control, when I create the target control
programatically and add it to the same Controls collection that the extender belongs to it works just fine, the difference with your implementation is that I’m creating the extender and the target control in the OnLoad event of my control, instead of the Load
event of the page, you could try creating the target control programmatically and see if it works that way.
Another thing I have notice is that when your control implements the INamingContainer interface sometimes the extender can’t find the target control in the client, this happens when the target control
gets an id with “$” instead of “_” as the separator, example: the parent control id is “Parent” the target control id is “Child” the unique id of the target control could be “Parent_Child” or “Parent$Child”(in my experience), in the first case the extender
has no problem finding the target control, in the second you get an error that says Could not find an HTML element with ID “Parent_Child” for control type “Sys.UI.Control”, it seams that the extender only looks for the id “Parent_Child” and misses “Parent$Child”,
I have solved this problem for the moment not implementing INamingContainer, but this could come back later and create more trouble.
If this post helped you please remember to set it as Answer so it can help others.
Yes - this is due to how control naming works in ASP.NET. The base ExtenderControl (in Atlas proper, not the Toolkit) calls NamingContainer.FindControl(TargetControlID) to locate the control that's being extended. If that comes back null, you'll get that
exception.
The $ or _ issue is due to a naming change in ASP.NET 2.0, but both should work. The code in Control respects both.
What needs to happen is that the extender needs to find "Parent", then walk into to find "Child", but it needs to be a the proper naming scope so it can resolve "Parent"
Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
Thanks for the response, I’m still looking into this, I made another test and used an ASP label as the target control, and the extender works fine, the label gets an id with “_” as the separator,
if I change the label for one of my own controls it gets an id with “$” and I receive the error(again if I don’t implement INamingContainer it works), both the label and my control are created in the same naming scope, it still seams to me that the difference
is the “_” or the “$”.
If this post helped you please remember to set it as Answer so it can help others.
I'm working on a cleaned up sample that works with a single pre-declared HME that you dynamically add properties to. That works great (with out-of-band help from Shawn).
But the Parenting/Scoping issue is pretty (very very) confusing to me. If I have the hard-coded HME that is only parent'd by the <form/>, what I would think of as the "Page" ... I can add properties. But if I don't pre-declare the HME and add it to the page
in the OnLoad method, it doesn't.
I've promised to create two zip files and send them to Shawn -- one that works and another that fails.
The fact that I can add the properties dynamically to a pre-declared HME solves my original problem and I've been pushing ahead on what I was trying to originally solve before circling back and posting the sample that fails.
----
A couple of other things that I've found:
* I have to use asp:Image rather than IMG. I understand why. But it would be nice to be able to do server-side extenders to valid elements/controls in the DOM.
* The inability to share an HME panel between distinct controls. It's fine to have a hover menu extender panel be dynamically generated for a couple of items. And it's easy enough to do this in a declrative or dynamic ItemTemplate ... but since there can
be only one hover menu extender in operation at any one time it sure would be nice to be able to programmatically reuse them to cut down on bloated page sizes. NOTE: You can dynamically add multiple HoverMenuProperties to the extender that map the same control
to different target controls. But the resulting behaviour in IE7 (what I'm testing with so far) ... is pretty odd and certainly not what you'd expect.
* The fact that a hover menu panel will dismiss itself (right term?) when the mouse is dragged out of the region that represented the original control -- not the panel that the mouse is over.
This last point deserves more explanation: I've got a dynamic table with images. The images have HME properties that cause a panel to popup. The panel itself contains an atlas:UpdatePanel. The update panel works fine! Excellent. However the underlying image
is 100x100 -- the popup panel is 500x500. However, when I move the mouse beyond the original (underlying) box (in a dropdownlist that is on the panel) the panel dismisses iteself
Your last point sounds odd to me - my intention was to make the popup panel show as long as the mouse was inside the hover target OR the popup pane. Something we'll look into - it shouldn't do that. It might be possible that we're getting a mouse out when
you move over one of the elemnets in the panel and confusing that for "exiting" the panel. If you have some repro XHTML you could put here that would be helpful.
Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
Oh - on second thought, can you see if this repros if you don't pop the 500x500 panel over the top of the original panel (set the PopupPosition to "Left" or something). I wonder if we're getting a mouse-leave on the hover target and that's what's triggering
the dismissal.
Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.
Dim hme As New AtlasControlToolkit.HoverMenuExtender
Dim hmep As New AtlasControlToolkit.HoverMenuProperties
hmep.PopupControlID = "pnlHover"
hmep.PopupPosition = AtlasControlToolkit.HoverMenuPopupPosition.Bottom
hmep.TargetControlID = "imgSubject"
hme.TargetProperties.Add(hmep)
Me.Label1.Text = Now
For each image in my datalist, I am expecting to display the panel with a time as I hover over them. This is not happening. What am I doing wrong?
Thanks
I love computers because: MY WISH IS THEIR COMMAND :)
petehbourne
Member
300 Points
60 Posts
Creating Atlas Controls
Apr 16, 2006 05:29 PM|LINK
All the examples demonstrate how to build really cool extensions to existing html controls using mostly declarative methods. Will there be examples on how to do this programmatically? I'm building a web app that uses the Microsoft Virtual Earth map control. The user will be able to add push pins dynamically, but I want to assign extender/behaviors to these pushpins on the fly. In otherwords, the pushpins will be created dynamically, and so there will be a need to attach extender/behaviours on the fly. Any ideas or examples? Thanks.
Ted Glaza [M...
Contributor
4198 Points
847 Posts
Microsoft
Re: Creating Atlas Controls
Apr 17, 2006 03:04 PM|LINK
Hi petehbourne,
Yes, you can definitely use the toolkit controls programmatically. The actual functionality is not tied to the control extenders - the extenders are just used to make it very easy to wire up the functionality in Visual Studio. How you go about wiring things up dynamically depends on whether or not you want to add the behavior on the server or client side. If you're doing it on the server, then I'd recommend you still use the extender. The following example dynamically sets a HoverMenuExtender:
If you have to do it on the client side in script, then you'll want to create the behavior and add it to the Sys.UI.Control.get_behaviors() collection. The following example adds a new HoverMenuBehavior:
Doing it on the client side is a little trickier though. You'll need to manually include the HoverMenuBehavior.js file, and any behaviors you wire up won't be persisted on postbacks. This should get you started in the right direction though.
Thanks,
Ted
pstanhope
Member
130 Points
26 Posts
Re: Creating Atlas Controls
Apr 19, 2006 02:35 AM|LINK
Thanks for the sample above. I'm most interested in the server-side creation. I've created an example where I've added HoverMenuProperties dynamically.
Here's the problem though: you have to already have created on the page the HME. What I need to do is to create the HME dynamically as well since I won't know until runtime how many HMEs I'll need to create. I've written the code to do so like the following:
protected void Page_Load(object sender, EventArgs e)
{
...
AtlasControlToolkit.HoverMenuExtender hme1 = new AtlasControlToolkit.HoverMenuExtender();
hme1.ID = "hme1";
Controls.Add(hme1);
AtlasControlToolkit.HoverMenuProperties hme1Props = new AtlasControlToolkit.HoverMenuProperties();
hme1Props.HoverCssClass = "imageHover";
hme1Props.PopupControlID = "ImageHoverPanel1";
hme1Props.TargetControlID = "ImageTest1";
hme1Props.PopupPosition = AtlasControlToolkit.HoverMenuPopupPosition.Center;
hme1Props.PopDelay = 25;
hme1.TargetProperties.Add(hme1Props);
}
But when the above is executed ... I get a runtime error "Target control with ID 'ImageTest1' could not be found for extender 'hme1'.". ImageTest1 definitely exists.
Thanks in advance for any and all help.
-phil
mrmercury
Star
8760 Points
1291 Posts
Re: Creating Atlas Controls
Apr 19, 2006 05:28 PM|LINK
Hi pstanhope,
I’m having a similar problem, it seams that the extender only looks for the TargetControl among it’s siblings in the Controls collection of it's parent control, when I create the target control programatically and add it to the same Controls collection that the extender belongs to it works just fine, the difference with your implementation is that I’m creating the extender and the target control in the OnLoad event of my control, instead of the Load event of the page, you could try creating the target control programmatically and see if it works that way.
Another thing I have notice is that when your control implements the INamingContainer interface sometimes the extender can’t find the target control in the client, this happens when the target control gets an id with “$” instead of “_” as the separator, example: the parent control id is “Parent” the target control id is “Child” the unique id of the target control could be “Parent_Child” or “Parent$Child”(in my experience), in the first case the extender has no problem finding the target control, in the second you get an error that says Could not find an HTML element with ID “Parent_Child” for control type “Sys.UI.Control”, it seams that the extender only looks for the id “Parent_Child” and misses “Parent$Child”, I have solved this problem for the moment not implementing INamingContainer, but this could come back later and create more trouble.
sburke_msft
Contributor
4396 Points
770 Posts
Microsoft
Re: Creating Atlas Controls
Apr 19, 2006 06:31 PM|LINK
Yes - this is due to how control naming works in ASP.NET. The base ExtenderControl (in Atlas proper, not the Toolkit) calls NamingContainer.FindControl(TargetControlID) to locate the control that's being extended. If that comes back null, you'll get that exception.
The $ or _ issue is due to a naming change in ASP.NET 2.0, but both should work. The code in Control respects both.
What needs to happen is that the extender needs to find "Parent", then walk into to find "Child", but it needs to be a the proper naming scope so it can resolve "Parent"
mrmercury
Star
8760 Points
1291 Posts
Re: Creating Atlas Controls
Apr 19, 2006 08:50 PM|LINK
Thanks for the response, I’m still looking into this, I made another test and used an ASP label as the target control, and the extender works fine, the label gets an id with “_” as the separator, if I change the label for one of my own controls it gets an id with “$” and I receive the error(again if I don’t implement INamingContainer it works), both the label and my control are created in the same naming scope, it still seams to me that the difference is the “_” or the “$”.
pstanhope
Member
130 Points
26 Posts
Re: Creating Atlas Controls
Apr 21, 2006 01:47 PM|LINK
I'm working on a cleaned up sample that works with a single pre-declared HME that you dynamically add properties to. That works great (with out-of-band help from Shawn).
But the Parenting/Scoping issue is pretty (very very) confusing to me. If I have the hard-coded HME that is only parent'd by the <form/>, what I would think of as the "Page" ... I can add properties. But if I don't pre-declare the HME and add it to the page in the OnLoad method, it doesn't.
I've promised to create two zip files and send them to Shawn -- one that works and another that fails.
The fact that I can add the properties dynamically to a pre-declared HME solves my original problem and I've been pushing ahead on what I was trying to originally solve before circling back and posting the sample that fails.
----
A couple of other things that I've found:
* I have to use asp:Image rather than IMG. I understand why. But it would be nice to be able to do server-side extenders to valid elements/controls in the DOM.
* The inability to share an HME panel between distinct controls. It's fine to have a hover menu extender panel be dynamically generated for a couple of items. And it's easy enough to do this in a declrative or dynamic ItemTemplate ... but since there can be only one hover menu extender in operation at any one time it sure would be nice to be able to programmatically reuse them to cut down on bloated page sizes. NOTE: You can dynamically add multiple HoverMenuProperties to the extender that map the same control to different target controls. But the resulting behaviour in IE7 (what I'm testing with so far) ... is pretty odd and certainly not what you'd expect.
* The fact that a hover menu panel will dismiss itself (right term?) when the mouse is dragged out of the region that represented the original control -- not the panel that the mouse is over.
This last point deserves more explanation: I've got a dynamic table with images. The images have HME properties that cause a panel to popup. The panel itself contains an atlas:UpdatePanel. The update panel works fine! Excellent. However the underlying image is 100x100 -- the popup panel is 500x500. However, when I move the mouse beyond the original (underlying) box (in a dropdownlist that is on the panel) the panel dismisses iteself
sburke_msft
Contributor
4396 Points
770 Posts
Microsoft
Re: Creating Atlas Controls
Apr 21, 2006 06:34 PM|LINK
sburke_msft
Contributor
4396 Points
770 Posts
Microsoft
Re: Creating Atlas Controls
Apr 21, 2006 06:37 PM|LINK
yaip
Contributor
4785 Points
1229 Posts
Re: Creating Atlas Controls
May 08, 2006 09:00 PM|LINK
<asp:Panel ID="pnlHover" runat="server">
<asp:Label ID="Label1" runat="server" ></asp:Label>
</asp:Panel>
In my DataList_ItemDataBound event, I have:
Dim hme As New AtlasControlToolkit.HoverMenuExtender
Dim hmep As New AtlasControlToolkit.HoverMenuProperties
hmep.PopupControlID = "pnlHover"
hmep.PopupPosition = AtlasControlToolkit.HoverMenuPopupPosition.Bottom
hmep.TargetControlID = "imgSubject"
hme.TargetProperties.Add(hmep)
Me.Label1.Text = Now
For each image in my datalist, I am expecting to display the panel with a time as I hover over them. This is not happening. What am I doing wrong?
I love computers because: MY WISH IS THEIR COMMAND :)
<Website>
<Gadget>