Transparent Popcontrol extender problems

Hi, I am having an odd problem. I have about the simplest test case of a popupcontrol exenter I can think of below. I added a combo box below the extended textbox to illustrate the problem. The issue is that when I click on the textbox to display the radiobutton list, the back ground of the radion button list is transparent. How come? It doesn't matter what control is underneath the textbox. The radiobutton list is always displayed with a transparent background. What is the magic dust I am missing?

Thanks ... Ed

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<br />
<asp:TextBox ID="textbox1" runat="server" Width="200"></asp:TextBox><br />
<asp:DropDownList ID="DropDownList1" runat="server" Width="216px">
<asp:ListItem>Item1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:DropDownList>
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" CommitProperty="value"
CommitScript="e.value += ' - do not forget!';" PopupControlID="Panel1" Position="Bottom"
TargetControlID="textbox1">
</ajaxToolkit:PopupControlExtender>

</div>
<asp:Panel ID="Panel1" runat="server" >
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
<asp:ListItem Text="Walk dog"></asp:ListItem>
<asp:ListItem Text="Feed dog"></asp:ListItem>
<asp:ListItem Text="Feed cat"></asp:ListItem>
<asp:ListItem Text="Feed fish"></asp:ListItem>
<asp:ListItem Text="Cancel" Value=""></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>

The default value of background-color style is transparent, so you will get transparent radio button lists. You can specify a color explicitly to make this work.

Thanks so much. That was it. Although it raises a question. I set the background color of the underlying panel to white. How come the what was under the panel showed through the panel and through the radiobuttonlist?

Thanks ... Ed

Treeview and HoverMenuExtender

Is there any way to use the HoverMenuExtender with the Treeview? I tried overriding RenderPostText of the treenode and stuffing the extender in, but there's no control collection to stuff it into.

Thanks!

Hi bjpierron,

Unfortunately, I think the answer is no. I was able to get a very, very hacky version to run, but I don't think you'd be able to use it for any real scenarios. I don't think thatTreeView, and specificallyTreeNode, are extensible enough for you to add this support on top. With some really creative CSS you might be able to get the effect you're looking for using theHoverNodeStyle, but that's bout all I can suggest.

If you were interested, here's how I kind of got it not quite working... I created my ownHoverMenuTreeNode class that inherited offTreeNode. I added aPopupControlID property and variable toHoverMenuTreeNode to store the ID of the control to hover. In itsRenderPreText method I then 1) got a reference to the current page viaHttpContext.Current.CurrentHandler as Page, 2) checked the page's controls recursively to make sure a HoverMenuExtender was included (this ensures the necessary script is downloaded to the client) or I throw an exception that you need aHoverMenuExtender on the page when usingHoverMenuTreeNode, 3) got a reference to thepopupControl usingPage.FindControl and thePopupControlID variable, 4) used theHtmlTextWriter to write the start of adiv tag including a random id (I just used a GUID), 5) created a script that when executed did the exact same things as the JavaScript inthis post after a 1000 ms timeout (using the randomly generated ID and thepopupControl.ClientID), and 6) registered the script as a startup script with the page. Then in theRenderPostText I wrote out the end tag of thediv. What we're essentially doing is wrapping theTreeNodein adiv and dynamically hooking up theHoverMenuBehavior to it. This whole thing looks a lot messier than just adding controls to the page, but I couldn't find a way to do that usingTreeNode (as it's not aControl). The reason that this will never work reliably in practice is that we can't run our code to wireup the behavior until the "Atlas" scripts and our HoverMenuBehavior.js have run. This is why I added the timeout on the script to prevent it from running for a second to see if I could get it working... but it's not a safe thing to do in practice. Here's the code:

// WARNING: THIS IS VERY BAD. IT IS PRESENTED FOR LEARNING PURPOSES ONLY.// PLEASE DO NOT USE THIS CODE IN ANY APPLICATION YOU WRITEusing System;using System.Collections.Generic;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.HtmlControls;using AtlasControlToolkit;namespace ToolkitDemo{/// <summary> /// The HoverMenuTreeNode provides HoverMenu support on top of a standard /// TreeNode. You must have a TreeNode extender on your page for this to work. /// </summary>public class HoverMenuTreeNode : TreeNode {/// <summary> /// ID of the control that will display when this node is hovered /// </summary>private string _popupControlID =null;/// <summary> /// ID of the control that will display when this node is hovered /// </summary> [IDReferenceProperty(typeof(Control))]public string PopupControlID {get {return _popupControlID; }set { _popupControlID =value; } }/// <summary> /// Wrap the TreeNode in a div and write a startup script to wireup /// a HoverMenuBehavior to that div to display our the PopupControl /// </summary> /// <param name="writer">Html Writer</param>protected override void RenderPreText(HtmlTextWriter writer) {// Get a reference to the current page Page page = HttpContext.Current.CurrentHandleras Page;if (page ==null)throw new NotSupportedException("HoverMenuTreeNode can only be used in System.Web.UI.Page");// Recursively check to ensure the page contains a hovermenucontrolbool foundExtender =false; Queue controls =new Queue(); controls.Enqueue(page);while (controls.Count > 0) { Control current = controls.Dequeue(); foundExtender = currentis HoverMenuExtender;if (foundExtender)break;foreach (Control ctrlin current.Controls) controls.Enqueue(ctrl); } controls.Clear();if (!foundExtender)throw new NotSupportedException("HoverMenuTreeNode requires a HoverMenuExtender present on the Page");// Get a reference to the PopupControl Control popupControl = page.FindControl(_popupControlID);if (popupControl ==null)throw new NotSupportedException("HoverMenuTreeNode could not find a control with id \"" + _popupControlID + "\"");// Write out the start of the div that wraps the TreeNodestring id = Guid.NewGuid().ToString(); writer.WriteBeginTag("div"); writer.WriteAttribute("id", id); writer.Write(">");// Create a script that dynamically associates a new HoverMenuBehavior // with the id of our new div and the ClientID of the popupControl and // register it as a startup scriptstring script =// Wrap everything in a function to keep things uncluttered"<script>(function() { " +// Wrap the wireup in a function to execute on a timeout"var f = function() {" +"var ctrl = new Sys.UI.Control($('" + id +"')); " +"var behavior = new AtlasControlToolkit.HoverMenuBehavior(); " +"behavior.set_PopupControlID('" + popupControl.ClientID +"'); " +"behavior.set_PopupPosition('Right'); " +"ctrl.get_behaviors().add(behavior); " +"behavior.initialize(); " +"}; " +// Wait 1 second before running the function"window.setTimeout(f, 1000); " +"})();</script>"; page.RegisterStartupScript(id, script);// Write out the TreeNodebase.RenderPreText(writer); }/// <summary> /// Write the end of the div that wraps the TreeNode /// </summary> /// <param name="writer">Html Writer</param>protected override void RenderPostText(HtmlTextWriter writer) {base.RenderPostText(writer); writer.WriteEndTag("div"); } }}

Thanks,
Ted

Could most of this plumbing work be handled in an Adapter (ala the CSSAdapters)? Then you could change the way the actual TreeNode is rendered and then implement HoverTreeView class as a derivative of the normal TreeView which could be targetted by the normal extender stuff.

Hi IDisposable,

Yep, a lot of the plumbing goes away if you inherit from a TreeView. I don't even think you'd need to use an adapter. You could dynamically add theHoverMenuExtender to itsControls collection, etc. I believe you'd still be stuck with the problem of wiring up theTargetControlID of theHoverMenuProperties because it needs to be a server control. Not to mention the larger issue of associating any of the content in yourHoverMenu with a givenTreeNodefor any real functionality, etc. Aside from hacking something very specific together, I doubt you'd be able to make a solid, general purpose solution.

Thanks,
Ted

Has anyone come up with a workable way to do this yet? I played around with adding a HoverMenuExtender to a TreeNode programmatically but quickly found out that the TreeNode does not have an ID that I could access. So, therefore, I didn't have anything to poke into the TargetID property of the HoverMenuExtender.

Treeview in modal dialog

I have a modal dialog extender that displays a panel when a button is clicked on the screen. There is a treeview in the panel that has 1...n nodes in it. The panel gets visible just fine, Ok and Cancel buttons work right, but I have a problem with the treeview. When I click on a node in the treeview, modal dialog dissapears from the screen. I've added the treeview to update panel but that didn't work, eighter. Does anyone have had this same problem?

Hello,

I believe treeviews have there own ajax like behaviors and you may be experiencing a postback when the node is clicked.

Can you try to set the property below on your treeview?

EnableClientScript ="False"

Also, is the treeview causing a postback whne you click it? If so, you may need to show the modal dialog extender again after the postback.

Good luck,

Louis

Trouble Adding Toolkit Controls

When I attempt to add a toolkit control, my site crashes. I have non-toolkit ajax controls working just fine, but as soon as I add an extender(always visible) my site crashes.

If I preview it on my developing machine, it works fine, but then I get the following on the production machine:

Unable to cast object of type 'System.Web.Configuration.ScriptingScriptResourceHandlerSection' to type 'System.Web.Configuration.ScriptingScriptResourceHandlerSection'.

Description:An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details:System.InvalidCastException: Unable to cast object of type 'System.Web.Configuration.ScriptingScriptResourceHandlerSection' to type 'System.Web.Configuration.ScriptingScriptResourceHandlerSection'.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[InvalidCastException: Unable to cast object of type 'System.Web.Configuration.ScriptingScriptResourceHandlerSection' to type 'System.Web.Configuration.ScriptingScriptResourceHandlerSection'.] System.Web.Configuration.ApplicationSettings.EnsureSectionLoaded() +70 System.Web.Handlers.ScriptResourceHandler.IsCompressionEnabled(HttpContext context) +7 System.Web.Handlers.RuntimeScriptResourceHandler.System.Web.Handlers.IScriptResourceHandler.GetScriptResourceUrl(Assembly assembly, String resourceName, CultureInfo culture, Boolean zip, Boolean notifyScriptLoaded) +30 System.Web.UI.ScriptReference.GetUrlFromName(ScriptManager scriptManager, IControl scriptManagerControl, Boolean zip) +293 System.Web.UI.ScriptReference.GetUrl(ScriptManager scriptManager, IControl scriptManagerControl, Boolean zip) +237 System.Web.UI.ScriptManager.RegisterScripts() +507 System.Web.UI.ScriptManager.OnPagePreRenderComplete(Object sender, EventArgs e) +111 System.EventHandler.Invoke(Object sender, EventArgs e) +0 System.Web.UI.Page.OnPreRenderComplete(EventArgs e) +2052172 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2247

---

Version Information: Microsoft .NET Framework Version:2.0.50727.1378; ASP.NET Version:2.0.50727.1378

As always, thanks again for all of your help

I'm thinking it has something to do with IIS. If I preview it though VS2008's development server, it works fine, but when I run it through IIS is when my heartaches begin...

Trying to Combine Behaviors

Hey Everyone,

I'm trying to combine two behaviors into one extender, and I'm having some trouble understanding how exactly to get this done. I've sucessfully created a new extender, which I've named DelayedTextChanged based off one of Garbin's posts here:http://aspadvice.com/blogs/garbin/archive/2006/02/25/15360.aspx
and that works fine, but when I try to create an extender that implements this extender, I'm running into problems.

I'm getting hung up around how exactly to apply the delayedtextchanged behavior to my control(a textbox) using my new extender.

all i really want is this new extender to create the xml script to apply my new behaviors to my controls. something like:

<textBox id="textbox1">
<behaviors>
<atlascontroltoolkit:delayedTextChangedBehavior timeout="500" />
<atlascontroltoolkit:someotherBehavior someOtherProperty="whatever" />
</behaviors>
</textBox
can anyone help me out?

thanks in advance...

jaredHi,

you cannot mix xml-script and extenders in this way because extenders are server controls.

What I suggest is extending the TextBox class to implement the IScriptControl interface. By overriding the RenderScript() method you can inject the desired xml in the Page.
let me first say thank you for your contributions to this community. you are a great help!

but, i'm not sure i understand your explanation. extenders can and do create the xml-script to associate controls with behaviors. the problem is that all of the examples i have seen only associate one behavior with a control. i am trying to understand if it's possible for an extender to associate two or more behaviors in the xml-script...

thanks,

jared
Hi,

jaredmeade:

extenders can and do create the xml-script to associate controls with behaviors

thank you very much. Sorry, looking at your code (too quickly) it seemed to me that you were mixing server controls with xml-script.

jaredmeade:

the problem is that all of the examples i have seen only associate one behavior with a control. i am trying to understand if it's possible for an extender to associate two or more behaviors in the xml-script

I don't want to make wrong assumptions, but I think that the extender model provided by the Atlas Control Toolkit is highly coupled with an (one) "associated" behavior. But again, don't quote me on that. On the other hand, I think that using the general extender model provided by the framework (the ExtenderControl and TargetControlProperties classes found in the Atlas assembly... btw are you using the Control Toolkit extender model?) should do the trick. And finally, it can surely be done by implementing the IScriptControl interface.
Big G,

thanks for the advice. I was able to adapt some of your earlier posts in order to create an extender which overrides RenderScript to produce the xml-script, and it works great!

thanks again,

jared

Actually there is another way to do this, and that's to create a "wrapper" behavior that instantiates and hooks up the other behaviors via code.

So you could have:

Extender1 (C#)/Behavior1(JS)

Extender2 (C#)/Behavior2(JS)

Then you could create a third extender:

[RequiredScript(typeof(Extender1)]

[RequiredScript(typeof(Extender2)]

public class Extender3 { ... }

and in JS:

this.initialize = function() {

// call base

var b1 = new MyNamespace.Behavior1();

var b2 = new MyNamespace.Behavior2();

this.control.get_behaviors().add(b1);

this.control.get_behaviors().add(b2);

b1.initialize();

b2.initialize();
}

Hey Shawn,

That was going to be my second approach if I couldn't figureout how to generate the xml-script.
I'm wondering though, which way is the "recommended" way? Iguess when you think about it, the xml-script is enabling Atlas to create theabove javascript, anyways, right? would creating the javascript like youdemonstrated above be more efficient?

thanks,

jared

Hi Jared -

Well one of the goals of the Toolkit is to prevent the need for people to use XML Script at all.

I took a look at the XML generation code in the ExtenderBase and I didn't see an easy way to get it to generate multiple hookups like that.

Another idea is that you could have one extender create and hookup another.

public class Extender1

void OnLoad() {

Extender2 ext2 = new Extender2();

foreach(TargetProperties tp in TargetProperties) {

Extender2Properties ex2Props = new ();

ex2Props.TargetControlID = tp.TargetControlID;

this.Controls.Add(ext2);
}
}

It depends on how closely releated the behaviors are. If they're always in pair, consider combining them into one. If they're discrete, I'd recommend doing it in Javascript since that's the easiest to maintain and most flexible.

SB

two-way property synching not working...

I have an ajax extender that was created using the AjaxControlToolkit "ASP.Net AJAX Extender Control" wizard. My extender derives from AjaxControlToolkit.ExtenderControlBase.

My class has a bunch of properties that have the ExtenderControlProperty and ClientPropertyName attributes. These properties sync just fine from server to client, but I can't seem to get them to sync from client to server. Using this.set_ClientState("xyz") on the client gives me a value that is readable in the ClientState property on the server, but that is cheating since it uses a hidden input element.

Yes, I call this.raisePropertyChanged("MyValue") in the client JS when the property changes, and I have ensured that raisePropertyChanged is actually be called (via debugger).

Any ideas?

Nobody has any suggestions?