Wednesday, March 28, 2012

Extenders briefly appearing on a page load

Hi there

I am using the modalpopup and calender extenders from the toolkit in my ASP.NET code.

The page they are on is a content page (I am using master pages).

They both work. However, when the page initially loads the extender(happens on both) flickers on the screen and then hides itself!?!?!

Does anyone have any ideas?

Many thanks

Mike

Hi Mike,

It seems a full postback is occurring according to your description. Please make sure the targetControlid is properly set the button that triggers a full postback.


Hi there

Thanks for the help. I have set the control IDs correctly.

The calender popup I have working, I had to set the visibility to false in the style.

However, for the modal popup I tried this and it doesn't show up at all.

Any more ideas I can try to stop the modal popup from flickering initially??

Cheers

Mike


Try setting the style as... style="display: none;"


Can you post a stripped sample?


Hi

I tried that also and it stops my popup from being displayed at all. (However, on a side note, when I do do this, as well as not showing my poopup it seems to keep adding "invisible" stuff to the side of my page, makes my scroll bars appear and the page keeps getting wider and wider!!! Very very strange and freaky!!!)

The code for my modalpopup is:


 <asp:Button runat="server" ID="testbut" text="popup test" OnClick="testbut_Click" CssClass="hiddenbutton"/> <asp:Panel ID="Panel1" runat="server"> <asp:Panel ID="Panel3" runat="server" CssClass="modalPopup"> <div> <p class="title">AudioPC Navigator</p> <br /> <p> AudioPC Navigator will launch each Audiosoft component into a new window, but supports tabbed browsing if your browser is configured to do so. </p> <br /> <p> For details on how to set your system to tabbed browsing <a onclick="help('TabbedBrowsing');return false;">click here</a> </p> <br /> <p> <input type="checkbox" name="check" id="InitialHelpCheckbox" /> <label for="InitialHelpCheckbox" class="sampleStyleC" style="padding: 3px;">Do not show this message again</label> </p> <br /> <p style="text-align: center;"> <asp:Button ID="OkButton" runat="server" Text="OK" /> </p> </div> </asp:Panel> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="InitialHelpModalPopup" runat="server" PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton" OnOkScript="onOk()" DropShadow="true" Drag="true" PopupDragHandleControlID="Panel3" TargetControlID="testbut"/>

<asp:Button runat="server" ID="testbut" text="popup test" OnClick="testbut_Click" CssClass="hiddenbutton"/>

<asp:Panel ID="Panel1" runat="server">
<asp:Panel ID="Panel3" runat="server" CssClass="modalPopup">
<div>
<p class="title">AudioPC Navigator</p>
<br />
<p>
AudioPC Navigator will launch each Audiosoft component into a new window, but supports tabbed browsing if your browser is configured to do so.
</p>
<br />
<p>
For details on how to set your system to tabbed browsing <a onclick="help('TabbedBrowsing');return false;">click here</a>
</p>
<br />

<p>
<input type="checkbox" name="check" id="InitialHelpCheckbox" />
<label for="InitialHelpCheckbox" class="sampleStyleC"
style="padding: 3px;">Do not show this message again</label>
</p>
<br />
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
</p>
</div>
</asp:Panel>
</asp:Panel>


<ajaxToolkit:ModalPopupExtender ID="InitialHelpModalPopup" runat="server"
PopupControlID="Panel1"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk()"
DropShadow="true"
Drag="true"
PopupDragHandleControlID="Panel3"
TargetControlID="testbut"/>

And the style for the popup is:

.modalPopup {
background-color:#e4e4e4;
border-width:1px;
border-style:solid;
border-color:Black;
padding:1px;
width:350px;
}

Any more ideas?

Thanks in advance

Mike


Why I can't see the flicker thing ? My code:

<%@. 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"> protected void testbut_Click(object sender, EventArgs e) { }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <style type="text/css"> .modalPopup { background-color:#e4e4e4; border-width:1px; border-style:solid; border-color:Black; padding:1px; width:350px;} </style></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Button runat="server" ID="testbut" text="popup test" OnClick="testbut_Click" CssClass="hiddenbutton"/> <asp:Panel ID="Panel1" runat="server"> <asp:Panel ID="Panel3" runat="server" CssClass="modalPopup"> <div> <p class="title">AudioPC Navigator</p> <br /> <p> AudioPC Navigator will launch each Audiosoft component into a new window, but supports tabbed browsing if your browser is configured to do so. </p> <br /> <p> For details on how to set your system to tabbed browsing <a onclick="help('TabbedBrowsing');return false;">click here</a> </p> <br /> <p> <input type="checkbox" name="check" id="InitialHelpCheckbox" /> <label for="InitialHelpCheckbox" class="sampleStyleC" style="padding: 3px;">Do not show this message again</label> </p> <br /> <p style="text-align: center;"> <asp:Button ID="OkButton" runat="server" Text="OK" /> </p> </div> </asp:Panel> </asp:Panel> <ajaxToolkit:ModalPopupExtender ID="InitialHelpModalPopup" runat="server" PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton" OnOkScript="onOk()" DropShadow="true" Drag="true" PopupDragHandleControlID="Panel3" TargetControlID="testbut"/> </div> </form> </body></html>

extenders arent working at all

Hi. I have installed libarary and control toolkit, and I have the following code:

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TaskCenter.WebForm1" EnableEventValidation="true" %><%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %><%@dotnet.itags.org. Register Assembly="Microsoft.Web.Extensions" Namespace="Microsoft.Web.UI" TagPrefix="aj" %><%@dotnet.itags.org. Register Assembly="Microsoft.Web.Extensions" Namespace="Microsoft.Web.UI.Controls" TagPrefix="aj" %><!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></head><body> <form id="form1" runat="server"> <div> <aj:ScriptManager ID="sm" EnablePartialRendering="True" runat="Server" /> <asp:Label ID="test" runat="Server">test</asp:Label> <asp:Panel ID="panel1" runat="server" Enabled="true">testtttt</asp:Panel><ajax:DropDownExtender runat="server" ID="DDE" TargetControlID="test" DropDownControlID="panel1" OnResolveControlID="DDE_ResolveControlID" /> </div> </form></body></html>

Problem is, it doesn't work. The app builds without any problem, and when I open the page i see two text labels - test and testtt, no extender, no dropdown.

How do I fix it?

Look in the web.config for the SampleWebsite. Make sure you have the sections under httpHandlers and httpModules in your web.config.

Extenders and windowed control problem

Hi,

we are using a couple of extenders such as the Calendar extender, Autocomplete extender etc...

The problem with those is when the form contains windowed controls such as the select box just below them... in that case, the usual "problem" of seeing the select through the extender div happens.

Before today, we were building our forms by keeping that in mind... making sure to avoid such positions. But now, our system should allow external people to define forms; which has quickly led to the above problem...

There is a workaround to this problem, using an empty iframe positioned right below the div; but is there any way to have extenders do the same to avoid the problem ? (as this problem is quite common, we think it is weird that it is not part of the extender functionality)

Thanks

/Tharn

ok, issue closed. They actually do it; but it does not work anymore as soon as controls are in relatively positioned elements.

I'll better report that to the codeplex project.

/t

ExtenderControlProperty expression without quotes

How do I create an extender control property that will refer to a client function handler (or client object, or any client expression)?

If I create an extender propety as string (eg. string Property1), it will be rendered in client control creation as a quoted string:

$created(myComponent,{"Property1" : "value in quotes", ...

However I want it to be passed as client-side expression like that:

$create(myComponent,{"Property1": value without quotes, ...

I need something similar to ExtenderControlEvent attribute, which references a client-side handler, but it can only reference the ajax handler like MyFunction(EventArgs), and not any function with custom parameters, nor any custom client object).

In your client-side setter for the property, you can use: "this._expression = eval(value);".
I would suggest that, in your server-side setter, you make sure to check to make sure the developer doesn't try to use any parameters and to remove "()" from the value. If you don't, the above expression will execute the function and set this._expression to the return value of that function instead of setting this._expression to the function itself.

Hope that helps.

Extender with inclusion of JS files in particular order.

Right now I'm working on an extender that needs to include numerous .js files I'd like to register for inclusion on a page.

I've added:

[assembly: System.Web.UI.

WebResource("first.js","text/javascript")]

[assembly: System.Web.UI.

WebResource("second.js","text/javascript")]

In the root of the Extender.cs class... as well as...

[ClientScriptResource("first","first.js")]

[

ClientScriptResource("second","second.js")]

Seems like if it were just one of the scripts by itslef it seems to do an ok job... but for scrips that rely on eachother, the straight up fail. Is the extender model only destined to have one script file period? If not, are scripts loaded and rendered in the order I add the ClientScriptResource attributes?

Is there another way I SHOULD be doing this? The .js files are being bundled in as Embedded Resource which is desired functionality, however the js variables that are now supposed to be present at the document scope simply arent. Somethign strange about which scripts are being loaded, or what order they are being loaded in.

Any advice would be greatly appreciated. Thanks

ClientScriptResource also takes named parameters, of which there is a LoadOrder and you can specify a load order. I found this to be the solution to my problem. Couple small little hurdles and I should be on my way.

Extender web service method is called differently

For a reason i do not understand, i have a web service which the the signature corresponds to what it is supposed to be (I see the signature everywhere) and this extender calls a completly different web method signature...

The extender is the cascading drop down list extender, it is supposed to call :

Public

Function GetDropDownContents(ByVal knownCategoryValuesAsString,ByVal categoryAsString)As AjaxControlToolkit.CascadingDropDownNameValue()

But instead it calls :

Public

Function GetDropDownContents()As AjaxControlToolkit.CascadingDropDownNameValue()

What this does is that it prevents me from knowing what values where already selected. Usually, this could be done by parsing the knownCategoryValues but since i don't get this param anymore, i'm a bit clueless at how to do this.

Can anyone help me understand this problem?

Hi,

I think ASP.NET AJAX will actually fail if it can't find a matching signature (this includes correctly cased parameter names). I'm guessing something else is the culprit here. You might want to take a look at your CascadingDropDown declaration to make sure it's calling the web service you're expecting (and when in doubt, compare against the sample website).

Thanks,
Ted
The problem is not the source or the function being called cause if you read what i said again, it is triggering something in the right web service, it's just not triggering the right function... and to fix the error 500 i had earlier i have to create a parameter less web method which is completly useless in this case...

Extender TargetControlId not sufficient enough to reference controls not in NamingContaine

Through reflection i see OnPreRender searches for a TargetProperty's TargetControl via its TargetControlID.
It only searches in NamingContainer of the Control this Extender is contained in.
I need ExtenderProperty to take both a NamingContainer and a TargetControlID so I can extend objects directly
on the page when this Extender may appear in a subcontrol.
Are ther plans to support extending Controls outside of the parent's NamingContainer space?
protectedoverridevoidOnPreRender(EventArgs e){base.OnPreRender(e);if ((this.._page;" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=4">_page ==null) && (this.Page !=null)) {this.._page;" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=6">_page =newPageWrapper(this.Page); }ScriptManagermanager1 =ScriptManager.GetCurrent(this.._page;" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=12">_page);if (manager1 ==null) {thrownewInvalidOperationException("You must have a ScriptManager to use an ExtenderControl."); }Controlcontrol1 =this.NamingContainer;using (" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=16">IEnumerator<T>enumerator1=this. Microsoft.Web.UI.ExtenderControl.TargetProperties { ... }" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=17">TargetProperties. System.Collections.ObjectModel.Collection.GetEnumerator();" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=18">GetEnumerator()) {while ( enumerator1 // Local Variable">enumerator1.MoveNext()) {Tlocal1 = enumerator1 // Local Variable">enumerator1..get_Current();" href="http://links.10026.com/?link=http://www.aisto.com/roeder/dotnet/Default.aspx?Object=20">get_Current();Controlcontrol2 =control1.FindControl(local1.TargetControlID);if (control2 !=null) {IScriptControlcontrol3 =manager1.RegisterControl(control2);control3.RegisterBehavior(this);continue; }thrownewInvalidOperationException(string.Format(CultureInfo.InvariantCulture,"Target control with ID '{0}' could not be found for extender '{1}'.",newobject[] {local1.TargetControlID,this.ID })); } }}

The Toolkit doesn't actually run this code - we have an override that will also search for controls at the page level.

Even if the extenders took a NamingContainer property, it doesn't fix the problem. NamingContainers can be nested, so you could end up in the same situation where you can't find the naming container.

In the May 4th release of the Toolkit, we added a "ResolveTargetControlID" event that you can handle to do these types of resolutions yourself. The if the extender can't locate the Control referenced by TargetID, this event will fire and you can return the control instance.