Very confused about state in my behavior-derived class

I am writing a very simple custom control extender as a first step towards building something slightly more complex. The intention of the extender at this point is just to make a panel visible in the onmouseover event of the target control. The code below is the javascript file that is registered with the control. What I'm finding is that the property I create called _panelId is set properly when the class is initialized (I can tell by the alert box I put in set method), but the property shows up as undefined when the handler for the onmouseover event fires (once again I tested this with an alert box). It's as though the class doesn't know its own properties when it gets to the _onMouseOver function.

My appologies if I'm missing something stupid, but I've been looking at this code all afternoon and can't figure it out...

Type.registerNamespace('Ballito');Ballito.HoverPanelBehavior = function(element) { Ballito.HoverPanelBehavior.initializeBase(this, [element]);// Propertiesthis._panelId =null;// Eventsthis._onmouseoverHandler =null;this._onmouseoutHandler =null;}Ballito.HoverPanelBehavior.prototype = { initialize : function() { Ballito.HoverPanelBehavior.callBaseMethod(this,'initialize');this._onmouseoverHandler = Function.createDelegate(this,this._onMouseOver);this._onmouseoutHandler = Function.createDelegate(this,this._onMouseOut); $addHandler(this.get_element(),'mouseover',this._onMouseOver); $addHandler(this.get_element(),'mouseout',this._onMouseOut);this.get_element().className =this._nohighlightCssClass; }, dispose : function() {if (this._onmouseoverHandler) { $removeHandler(this.get_element(),'mouseover',this._onmouseoverHandler);this._onmouseoverHandler =null; }if (this._onmouseoutHandler) { $removeHandler(this.get_element(),'mouseout',this._onmouseoutHandler);this._onmouseoutHandler =null; } Ballito.HoverPanelBehavior.callBaseMethod(this,'dispose'); }, _onMouseOver : function(e) { alert('_panelId = ' +this._panelId); var panel = Sys.UI.DomElement.getElementById(this._panelId);if (panel) { panel.Visible ="true"; } }, _onMouseOut : function(e) { var panel = Sys.UI.DomElement.getElementById(this._panelId);if (panel) { panel.Visible ="false"; } }, get_panelId : function() {return this._panelId; }, set_panelId : function(value) {if (this._panelId !=value) {this._panelId =value;this.raisePropertyChanged('panelId'); } alert(this._panelId); }}Ballito.HoverPanelBehavior.descriptor = { properties: [ {name:'panelId', type: String} ]}Ballito.HoverPanelBehavior.registerClass('Ballito.HoverPanelBehavior', Sys.UI.Behavior);Sys.Application.notifyScriptLoaded();

Hi,

the problem is that you are defining delegates but you're not attaching them as event handlers:

$addHandler(this.get_element(),'mouseover',this._onMouseOver);$addHandler(this.get_element(),'mouseout',this._onMouseOut);

becomes:

$addHandler(this.get_element(),'mouseover',this._onmouseoverHandler);$addHandler(this.get_element(),'mouseout',this._onmouseoutHandler);

Hi Garbin,

Thanks very much! That did take care of my state problem. Unfortunately (for me at least), it only got me one step further. Now I get the ID of the panel just fine in the mouse over event, but the call to getElementById() returns null. The documentation on this method is somewhat limited, but it seems to say that if I use the syntax I have in my code (not specifying the parent of the element), document is assumed. My assumption has been that this refers to the document that is referencing the script, i.e. the current page. Is this a valid assumption and regardless of that is this a valid way to grab an element off the page that uses my extender control? If not, is there a way to do that?

Just to make sure I'm clear, I want to set the _panelId property to the ID of a panel control on the page housing the extender control and then to get a reference to that panel using the ID in my mouse over script so I can change properties on it. Is this possible, and if so am I trying to do it the best way?

Thanks for your help,

Lee

Hi,

are you sure that the client id of the panel matches the id that you're passing to getElementById()?

Regarding the extender, I suppose that you want to get a reference to the corresponding behavior, right? If so, you should set the BehaviorID property on the extender and then use its value to get a reference to the behavior, together with the $find method:

var behavior = $find('behaviorID');

Hi Garbin,

Thanks for your response. To answer your question, yes, I am very certain the ID of the panel matches the ID being passed to the getElementById() method. I check the value passed with the alert box immediately preceding the call to getElementById() and it definitely does match the ID of the desired panel on the page where the extender control is defined.

Regarding the second part of your post, I'm not sure exactly where your going. Do I need a reference to the behavior in the script? I was thinking that once I got the reference to the panel from getElementById(), I'd be able to directly set its properties and that that's pretty much all it would take at this point. Is this wrong? Sorry if I'm missing something obvious, just trying to get started here.

Thanks,

Lee

Hi,

sorry, I didn't want to confuse you. If you need a reference to the DOM element (the panel) then getElementById (or $get, a shortcut to access the same method) is the way to go. At this point, since you're getting an error, could you post a simple example that reproduces the problem?

 Hi Garbin,

 Here's the source for a simple page that duplicates the problem:

First, the C# class that derives from ExtenderControl and defines my little "HoverPanel" control:

using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using Microsoft.Web.UI;using System.Collections.Generic;namespace Ballito.CS{ [TargetControlType(typeof(Control))]public class HoverPanel : ExtenderControl {private string _panelId;public string PanelId {get {return _panelId; }set { _panelId =value; } }protected override void OnPreRender(EventArgs e) {base.OnPreRender(e);// Test for ScriptManager and register if it exists ScriptManager sm = Microsoft.Web.UI.ScriptManager.GetCurrent(Page);if (sm ==null)throw new HttpException("A ScriptManager control must exist on the current page."); sm.RegisterExtenderControl(this, FindControl(this.TargetControlID)); }protected override IEnumerable GetScriptReferences() { ScriptReference reference =new ScriptReference(); reference.Path = ResolveClientUrl("HoverPanel.js");return new ScriptReference[] { reference }; }protected override IEnumerable GetScriptDescriptors(Control targetControl) { ScriptBehaviorDescriptor descriptor =new ScriptBehaviorDescriptor("Ballito.HoverPanelBehavior", targetControl.ClientID); descriptor.AddProperty("panelId",this.PanelId);return new ScriptDescriptor[] { descriptor }; } }}

Next, the script file used by the control (largely the same one as in my original post):

// JScript FileType.registerNamespace('Ballito');Ballito.HoverPanelBehavior = function(element) { Ballito.HoverPanelBehavior.initializeBase(this, [element]);// Propertiesthis._panelId =null;// Eventsthis._onmouseoverHandler =null;this._onmouseoutHandler =null;}Ballito.HoverPanelBehavior.prototype = { initialize : function() { Ballito.HoverPanelBehavior.callBaseMethod(this,'initialize');this._onmouseoverHandler = Function.createDelegate(this,this._onMouseOver);this._onmouseoutHandler = Function.createDelegate(this,this._onMouseOut); $addHandler(this.get_element(),'mouseover',this._onmouseoverHandler); $addHandler(this.get_element(),'mouseout',this._onmouseoutHandler); }, dispose : function() {if (this._onmouseoverHandler) { $removeHandler(this.get_element(),'mouseover',this._onmouseoverHandler);this._onmouseoverHandler =null; }if (this._onmouseoutHandler) { $removeHandler(this.get_element(),'mouseout',this._onmouseoutHandler);this._onmouseoutHandler =null; } Ballito.HoverPanelBehavior.callBaseMethod(this,'dispose'); }, _onMouseOver : function(e) { alert(this._panelId); var panel = Sys.UI.DomElement.getElementById(this._panelId); alert(panel);if (panel) { panel.Visible ="true"; } }, _onMouseOut : function(e) { var panel = Sys.UI.DomElement.getElementById(this._panelId);if (panel) { panel.Visible ="false"; } }, get_panelId : function() {return this._panelId; }, set_panelId : function(value) {if (this._panelId !=value) {this._panelId =value;this.raisePropertyChanged('panelId'); } }}Ballito.HoverPanelBehavior.descriptor = { properties: [ {name:'panelId', type: String} ]}Ballito.HoverPanelBehavior.registerClass('Ballito.HoverPanelBehavior', Sys.UI.Behavior);Sys.Application.notifyScriptLoaded();

Finally, the markup for a simple page that uses the control:

<%@. Page Language="C#" %><%@. Register Namespace="Ballito.CS" TagPrefix="ballito" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>ASP.NET AJAX Behavior Sample</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:Panel ID="Panel1" runat="server" BackColor="Cyan" Height="50px" Width="125px" Visible="False"> </asp:Panel> <asp:Button runat="server" ID="SampleButton" Text="Submit Form" /> <ballito:HoverPanel ID="hoverPanel1" runat="server" TargetControlID="SampleButton" PanelId="Panel1" /> </div> </form></body></html>

The behavior I find is that when I run the page and mouse over the button, I can tell the onmouseover event in my control does fire since the alert box in it is displayed. This is the alert box right before the call to getElementById(). As I said in the last post, the alert box shows the value of the _panelId property properly ("Panel1" in this case). The problem is that the alert box that fires right after the getElementById() call shows that the value returned by getElementById() is null instead of [object].

Thanks for the help,

Lee

Hi,

you are setting the Visible attribute of the Panel to false. This means that the Panel won't be rendered on the page and this is the reason why you are getting a null reference.

If you want to hide the panel, you could style the Panel using display:none or visibility:hidden

Hi Garbin,

Well this finally got me going down the road. I'm finding there is still a lot for me to figure out, but I'm starting to get things to work in some sort of expected manner and that's usually what it takes for me to get movement when learning something new. Thanks for all your help.

Lee

Visual verification extender

Hi,

Are there any plans for a visual verification extender that would be linked to a textbox control and that would show an obscured code that has to be entered by the user to protect against automated registrations?

Would be a nice control for the toolkit.

Thanks,

Jason

As far as I know there is currently no one working on a CAPTCHA extender, but we do have the NoBot extender which is designed to prevent many cases of automated posting that a turing test like CAPTCHA is supposed to block. Take a look athttp://ajax.asp.net/ajaxtoolkit/NoBot/NoBot.aspx

Cool...that should do the trick. Thanks.

VS 2008 - Add extender helper icon on controls

I have downloaded and installed VS 2008, .NET 3.5 and current Ajax Control Toolkit. I have added the toolkit to the VS Toolbox.

The little 'helper' arrow, as described in the video linked below (around the 7 min mark), does not appear for me. I add a button to a page, highlight it in design mode and it doesn't show the helper arrow. I can drag and drop an extender from the Toolbox, but it would be nice to have this added functionality as described.

http://asp.net/learn/3.5-videos/video-224.aspx

Am I missing something?

Thanks,
Tim

I have the same problem.

FYI, in addition to the installation process described in the Toolkit instructions I also tried installing them the same way Joe Stagner described in the video you referenced with no success. Joe suggests copying all files/dir in the Ajax Control Toolkit's SampleWebSite\bin directory into the toolkit's Binaries subdirectory, then adding them to the Visual Studio Toolbox from there.

More info:
http://forums.asp.net/t/1184181.aspx

But no solution?

Hi,

Please try the following steps:

1. Download the source code of ajax controltoolkit

2. Open in Visual Studio

3. Open property page for AjaxControlToolkit project

4. Click Assembly Information

5. Change Assembly Version from 3.5.11119.* to 3.5.0.0

6. Rebuild the project and use this assembly in your project

I downloaded the source. When I try to open the AjaxControlToolkit.sln in VS 2008, I get the error "[file path]\AjaxControlToolkit.csproj cannot be opened because its project type (.csproj) is not supported by this version of Visual Studio. To open it, please use a version that supports this type of project."

I cannot open in VS 2005 either. I don't have any other versions of VS.

Am I doing something wrong?

Thanks
Tim

Hi Tim,

Which version of Visual Studio are you using?

Please useVisual C# 2008 Express edition (which is free )or higher (e.g., professional version).

VS 2008 RTM AJAX Toolkit 3.5 Autocomplete extender has issues

I just installed VS 2008 RTM and the autocomplete has issues. I created a new page added the scriptmanager and set it up to enablepagemethod so that I could use my local database to supply the autocomplete strings.

I dropped a textbox on the page then I dropped the extender onto the control. It appeared in the properties list of the textbox as expected. I changed some properties and set the ServiceMethod.

The extender did not alter the source. All the property changes were lost. I tied this several times and always the same result. The properties could be changed in the properties window but these are not updated in the source aspx page. So when you switch to source view from design the changes are simply lost.

For those who would like to implement a pagemethod rather than a webservice call, I found two good sources:

http://allwrong.wordpress.com/2007/03/13/ms-ajax-autocomplete-extender-using-a-page-method/

http://fredrik.nsquared2.com/viewpost.aspx?PostID=393

From my codebehind page:
<* The autocomplete extender is designed to use a web service to supply the items for the list box. Sometimes this
* is certainly an over-kill or the data may be accessable directly from the application's database connection. A
* web service is an un-needed layer for these times. So here is how to call a "page method" to supply that data.
*
* 1 - add: using System.Web.Services;
* 2 - In the html, modify the ScriptManager with the EnablePageMethods set to true.
* ex: <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True"></asp:ScriptManager>
* 3 - add a declaration for the page method: [WebMethod]
* 4 - add: public static string[] methodNameHERE(string prefixText, int count)
*
*/

///<summary>
/// ServiceMethod - The method to be called. The signature of this method must match EXACTLY as below.
///</summary>
///<param name="prefixText"></param>
///<param name="count"></param>
///<returns>string array</returns>
[WebMethod]
publicstaticstring[] getCompanyNames(string prefixText,int count)
{
bbCMScore bb =newbbCMScore();
string[] s = bb.getGroupingUsingUserCompanyNameSource(prefixText, count).ToArray();
return s;
}

The ASPX code looks like this:

<asp:TextBoxID="tbGrouping"runat="server"></asp:TextBox>
<cc1:AutoCompleteExtenderID="tbGrouping_AutoCompleteExtender"runat="server"EnableCaching="true" CompletionSetCount="20" CompletionListCssClass="autocomplete_completionListElement" CompletionListItemCssClass="autocomplete_listItem"CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" MinimumPrefixLength="2" TargetControlID="tbGrouping" ServiceMethod="getCompanyNames">
</cc1:AutoCompleteExtender>

The above works as it should. The problem is the properties are not updating. This causes VS 2008 RTM to error with a "souce code not available" error which certainly doesn't point to the real problem. You thought you set the properties and really they were not set.

Larry Aultman

Hi Larry,

Your problem is such weird issue. Can you modify or add extra code to your page? We suggest that you should check which version of AJAX Control Toolkit that you are using now. Please upgrade it to V11119. Also, you should check the .NET Framework version and AJAX Control Toolkit version. So do the web.config settings. AJAX Control Toolkit are divided into two versions for supporting .NET Framework 2.0 and 3.5.

Best regards,

Jonathan

Jonathan,

During the upgrade to RTM from Beta 2, I uninstalled everything Beta2. I uninstalled all projects from my machine, and deleted all traces of my development environment. I installed the RTM, downloaded the latest versions of AJAX toolkit. I created an new project.

I did verify that all my versions are for 3.5. My work around is to just not use the properties window for the control. However this control has other isses that are show-stoppers. I have commented on them in this forum under the "onClientItemSelected" event that will not fire. I can make it autocomplete but I can't get an event fired so it isn't much use to me. Thus for the moment I can't use it in production.

Thanks for the reply. I hope that someone is able to find the problem as it would be useful to users.

Larry Aultman

Hi Larry,

wph101larrya:

My work around is to just not use the properties window for the control.

Only for AJAX Contol Toolkit's Controls or all the Controls?

If the former, please do this and have a test.

We suggest that you should download a sample fromhttp://www.asp.net/learn/ajax-videos/ and have a test. Please make sure Javascript is not forbidded in you machine.

Best regards,

Jonathan

VSHTMLGenericElement minor issue

Not a major issue but is very easy to produce. For example, if you add a textbox watermark extender and link it to a textbox then delete the extender. The textbox will only be displayed as a "VSHTMLGenericElement" without any properties. The fix is to save your page. Then close and reopen the ASPX page you are working on. Then the textbox will be labeled as a textbox again.

Like I said not a major issue but seems like something doesn't get reset after the delete.

Yes.This is not a major issue for web application development.You should save current web files when you make some changes to them.Otherwise maybe you will get some issues for not saving them.

want collapsiblePanel in user control to remember its state

Hi,

I am using the ajax collapsible panel extender. Is there a way to remember the state of the collapsible panels?...

basically i am using it as part of a side navigation, the sidenavigation is a user control and is used on every webpage of the site. when i click the hyperlinks (contained within the panels that extend) the page navigates to the new page and all the panels collapse. i can see how this can get frustrating to users. so is there a way that it can remember what state it is in??

thanks

Hi,

According to your description, you want to maintain the state of collapsible panels between different pages, isn't it?

In order to implement this, you need to save the state in a place out of the scope of a page, so that it can't be shared among different pages. Cookie, Session, or Profile will be good choices for you.

By default, the state is saved in ViewState or some additional HiddenField. The problem with them is that they are inside a page, and are always transfered to the server with POST http request. When it's redirected to a new page with GET request, those values will not be available in the new page. So, storages that doesn't rely on a specific page should be used.

yes i want it to remember the state across different webpages.

Can you guide me further with what i may need to do?...can i do this by assigning something to a session variable? if so what must i assign?and what must i do to open the new page with the newly assigned state?

thanks

You can save the state in session. For example, Session["cp1State"] = ture; // indicates collapsibelPanel1 is expanded.

Another thing you need to do is use javascript to invoke a web service to save current state in session. This javascript will work as the expanded and collapsed event handler for the corresponding CollapsiblePanelBehavior.

Hello Raymond,

Please can you give further details with the web service i need. i dont really know about web services...are there any examples used in conjunction with collapsiblePanel?

thanks

Here is a sample:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">[System.Web.Services.WebMethod] public static void SaveState(string state) { HttpSessionState session = HttpContext.Current.Session; session["State"] = state; } protected void Page_Load(object sender, EventArgs e) { string script = @."function pageLoad(sender, args) { {0} $find('cpe2Behavior').add_collapsed(onCollapsed); $find('cpe2Behavior').add_expanded(onExpanded); }"; if (Session["State"] != null && Session["State"].ToString() == "expanded") { script = script.Replace("{0}", "$find('" + CollapsiblePanelExtender2.BehaviorID + "').expandPanel();"); } else { script = script.Replace("{0}", ""); } ScriptManager.RegisterStartupScript(this, this.GetType(), "expand", script, true); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"> </asp:ScriptManager> <asp:Panel ID="panel4" runat="server" > <asp:LinkButton ID="lnk2" runat="server" Text="Show Details"/> </asp:Panel>  <!--Content to show--> <asp:Panel id="panel3" runat="server"> Content </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender SuppressPostBack="true" ID="CollapsiblePanelExtender2" BehaviorID="cpe2Behavior" runat="server" TargetControlID="panel3" ExpandControlID="panel4" CollapseControlID="Panel4" Collapsed="True" TextLabelID="lnk2" CollapsedText="Show Details.." ExpandedText="Hide Details.." > </ajaxToolkit:CollapsiblePanelExtender> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default3.aspx">Redirect to me</asp:HyperLink></div> <script type="text/javascript"> function pageLoad(sender, args) { $find("cpe2Behavior").add_collapsed(onCollapsed); $find("cpe2Behavior").add_expanded(onExpanded); } function onCollapsed(sender, args) { PageMethods.SaveState("collpased"); } function onExpanded(sender, args) { PageMethods.SaveState("expanded"); } </script> </form></body></html>

Watermark + Textbox Issue

I have a web form with a text box with an associated watermarktextbox extender and a button. The goal is to have the user input a name into the the textbox and then use that value when the button is clicked as parameter to a new web page. This works if i remove the watermarktextbox extender. Any assistance would be appreciated.

Do you want a watermark? What exactly do you want to do? Are you receiving errors?

Sorry for the vague original post. Yes, the goal is to have a watermarked textbox. The user enters data into the textbox and I want to use that data as a parameter to a redirection to a new webpage. The problem is that when I use the watermarked textbox the textbox text is not captured (i.e., my parameter is empty). If I use a standard textbox, I'm able to retrieve the textbox text and use it as I intend. I receive no errors I just get an empty value. I'm guessing I need to change the way I get the value of the textbox (client-side script?) but I have no idea how to do this.

Thanks.

OK. Post the script that your using.

Hi,

It's hard to tell without knowing how do you pass value? Are you using queryString? Or PostBackURL?

Please be more specific, a simple repro is preferred.

Watermark Extender Validation error

I have a textbox with an ajax watermark extender attached to it. As well as a required feild validator. One button on my page is "CauseValidation = true". Before i applyed the watermark extender the validation check worked perfectly, but now the validation check doesnt work as i think it see`s the watermarktext as text in the textbox, is there any way around this? si!

Hi blink18jew,

Would you mind posting your simple source code here?

sure its like this :

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TestBox" ErrorMessage="ERROR"></asp:RequiredFieldValidator>
<asp:TextBox ID="TestBox" runat="server"></asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TestBox" WatermarkText="Watermarked..." WatermarkCssClass="water" runat="server">
</ajaxToolkit:TextBoxWatermarkExtender>

the watermark seems to ruin the validation checks...si!

Hi blink18jew,

I'm afraid that I cannot reproduce your problem.Here is my test sampe based on yours. It works fine locally.

Aspx:

<%@. Page Language="VB" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Water Mark</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TestBox" ErrorMessage="ERROR"></asp:RequiredFieldValidator> <asp:TextBox ID="TestBox" runat="server" CausesValidation="true"></asp:TextBox> <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" TargetControlID="TestBox" WatermarkText="Watermarked..." WatermarkCssClass="water" runat="server"> </ajaxToolkit:TextBoxWatermarkExtender> <asp:Button ID="Button1" runat="server" Text="Button" /> </form></body></html>

So would you give us more details including source code or error information? If you can help us reproducing your problem step by step, it will be greatly appreciated.

By the way, did you use your Validator in a UpdatePanel? If yes, maybe you can benefit from this thread: http://forums.asp.net/t/1066821.aspx

Hope it helps.

no worries it was only to get it looking a bit more professional im just not guna use it, but thanks for your time! si!

Hi blink18jew,

Would you do a test with my sample code to find out the exact root cause for this problem ? If we can find the solution, our community members will benefit from our work then.Thanks,

it worked... lol, i duno what was going on cos i tryed my olde code and that still didnt work... haha, oh well, ill mark it as answer! thanks.

Watermark extender type function on a dropdown?

Hi there,

I have 5 textboxes all using the watermark extender to tell the user that these fields are required and has some colour formatting. I would also like to do the same type of thing to a dropdown but it doesn't work, can anyone suggest a method I can use?

Thank you for your time

Here's just one suggestion:

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><%@. Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function ddlChange(ddl) { if (ddl.selectedIndex == 0) { ddl.style.backgroundColor = 'Yellow'; ddl.options[0].innerText = 'Please select...'; } else { ddl.style.backgroundColor = ''; ddl.options[0].innerText = ''; } } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:DropDownList ID="DropDownList1" runat="server" style="background-color:Yellow;" onchange="ddlChange(this)"> <asp:ListItem Value="">Please select...</asp:ListItem> <asp:ListItem>Option A</asp:ListItem> <asp:ListItem>Option B</asp:ListItem> <asp:ListItem>Option C</asp:ListItem> </asp:DropDownList> </div> </form></body></html>

Thats cool thank you for that! one question, can css be used in place of hardcoding the color?

Thanks again

Pretty simply really, use the same javascript example as above

Create a new Required style for the dropdown e.g background-color:red; have that as the dropdown list's default css then using this piece of javascript be able to swap between the 2 based on Item value

function ddlChange(ddl)

{
if (ddl.selectedIndex == 0)
{
ddl.className ='RequiredCSS'
}
else
{
ddl.className ='SelectedCSS';
}
}

Hope this helps you out.

awesome thank you

Boy, diverdan, I do all the hard typing and you get all the credit!

Just kidding.

Happy Holidays, all...

Sorry!!!! I thought I had clicked the both of you!

Thank you for your help! have a great holiday!

Watermark extender interferes with trigger

I'm playing around with a demo page where I have a number of extenderson the same page. There appears to be an incompatibility currently ifyou have a watermark extender on the same page as the always visibleextender. I'm basically duplicating the 2 samples, just putting themon the same page. If I have a watermark extender on the page and tryto change the position of the always visible clock, the first postbackworks (sometimes) and after that the update panel does not trigger apostback when a different selection is made in the position dropdown.

Iwas able to reproduce the behavior with a very simple page containingthe code for the watermark and the code for the always visible extendertaken directly from the samples. happens in IE 6 and Firefox both. When I remove the watermark extender from the page, the trigger firessuccessfully every time the dropdown selected index changes as expected.

CurtisTed was looking at an issue very much like this yesterday. The UpdatePanel was behaving in a way that was arguably a bug. I think he worked around it by putting the TBW in the same UpdatePanel. I'll let him share the details (he's sick today).
I am having a similar issue with the watermark extender. In my case, I have a watermark textbox in one panel and an atlas update panel that contains a gridview with edit enabled. When I do editing in the gridview, I can see the watermark textbox somehow gets involved, which I have no idea why.

watermark extender and javascript?

Hi, i have a textbox on the page. When the user clicks on a username in the list to the right i use this javascript to insert their username into the textbox.

function

setTextBoxText(text)
{
var textbox = window.document.getElementById("<%=touser.ClientID%>");
textbox.value ='';
textbox.value = text;
textbox.focus();
}

This works perfectly.

Then i tried to add a TextboxWatermarkExtender and now it does not work anymore, the initial text in the textbox (set by the watermark extender) gets erased, but the username does not show up, it just turns blank and focus is set on the textbox. Is there anyway to fix that?

Patrick

any idea?

I tested this out yesterday and found out that when you use WaterMarked on your textbox, all of the changes to the textbox through javascript will be written to watermarked's layer.

e.g. you have a textbox with onchange or onfocus command to call a javascript function; and the textbox also has a watermarked "Enter Name Here"

Your JavaScript function will insert the user's name into the textbox.

document.getElementById('" & Me.textbox1.ClientID & "').value = 'John Smith';

Problem: What happen is, "Enter Name Here" will be replaced with "John Smith", and the textbox is still empty.

Question, is this a bug or is it as design?

Watermark Extender and Calendar extender do not work together?

Hi,

I'm wondering if anyone has come up with a solution for this problem. I have a textbox with a Watermark Extender attached to it. I also have a calendar extender attached to that same textbox.

When the page loads the watermark is there as it should. When I click on the textbox the watermark disappears and the calendar launches. So far so good. It seems as though when I click on a calendar date it flashes the date in the textbox then goes back to the watermark.

Are these two controls not able to work together?

Thank you

Vear

We have a bug tracking changes in textbox watermark so that it plays well with other extenders like calendar, masked edit and validators. This should be fixed when that issue is resolved.

Thanks kirtid,

I look forward to the update. I thought I was perhaps doing something wrong.

Vear