Extending CascadingDropDown to update other controls

My idea:

I have a basketball stats website that I'm trying to migrate to AJAX due to its no-postback. I have an "Add Game" page, in which I want to have the user select a team from a drop down list, but then I want to populate a control other than a drop down list (perhaps just a list of some sort, so the user can see all the options). The CascadingDropDown control in the AJAX toolkit accomplishes this for drop down lists, but I'm wondering if it could be extended to other controls?

I hope all of this makes sense. I'm open to more questions if it's unclear.

Thanks.

Tony

Hi,Tony

I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.

To troubleshoot this issue, we really need more source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Thank you.

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.

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 not working after partial page postback in Beta 2

Hi

I have a custom extender that worked fine under Beta 1 but has problems withUpdatePanels and partial page postbacks under Beta 2.

It appears that the behavior.js script resource associated with the extender is not send to the client after a partial page postback. The 'initialize' function on the behavior is not called after the partial page postback. The 'dispose' function is call the first time the partial page postback is execute so I would assume that the 'initialize' function should be called after the partial page postback has completed in order for the event handlers to be hooked up again.

The extender works perfectly when used outside of anUpdatePanel.

Any suggestions would be appreciated.

Cheers

I have the same problem with the collapseable panel. Did you find a solution?

I'm getting extremely annoyed, I've been searching and trying things for three days straight related to this. It seems that with Beta 2 your custom extender registers the $create() statement fine and is intialized properly within an update panel, but when you do a partial postback of this updatepanel the dispose method is never called, and the initialize is never recalled, so while you have the appropriate HTML Dom elements you no longer have anything hooked up to your client extender. I have seen SEVERAL posts about this in all the forums and not one response from microsoft. THis is the biggest issue keeping us from moving forward with our development. I at least want someone to acknowledge it's a problem. PLEASE MICROSOFT I'M BEGGING YOU TELL ME WHY MY CONTROLS WON'T DISPOSE FOR THE LOVE OF PETE.... okay I feel better now, but only slightly because my controls still don't work.

I also noticed this is a problem with any of the tookit extenders, I threw a watermark extender in anupdate panel and it works fine on the initial load, but fails to after a partial postback.

I have a sample app ready to go, very simple and it clearly identifies the problem, one page with an updatepanel a scriptmanager and a watermark extender and a button inside the update panel. When the page loads, the extenderhas the watermark text in it, when you hit the test button performing a partialpostback, no more watermark. Problem is I can't include it, anyone know how?

hello.

can you put it somewhere and send us the link?

I don't really have a public site I can put it to. I tried to attach it to the thread but it said I didn't have permission. Any ideas, if not send me a private reply and I'll send it to you if you have a place you can put it. Luckily it's a real simple website with only one page but it doe show the problem.

hello.

send it to my mail (get it from the profile) and refer the thread id on the mail message.

Thanks to Luis doing some work this weekend he figured out that in the simple example all that was needed was to change the enableeventvalidation to true and this caused the extender to work properly. However, now that I flip that in my main application I'm getting this error.

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@.Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the
data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

So the pain continues. Luis did make a point I agree with, whether or not EnableEventValidation="true" should not hinder these controls from working, specifically when to get the cascadingdropdown to work it needs to be set to false as I've seen in other posts. I'm opening a bug in codeplex this morning, but if anyone has been able to get their custom controls to work within an update panel please let me know. These bugs or incosistencies or whatever they are, are killing us. Everything was working great till this Beta release.

I've entered this as a bug

http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=5795

reading this post 2 days agou would have saved me 2 days of debugging (if only it would have been posted 2 days ago)

Anyway, I totally confirm this issue and I am voting it now on codeplex (http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=5795)

Thank god I no longer feel alone :) I've been trying everything for about 5 days straight now, our development has totally come to a crawl. I have a workaround in ming I am going to try this week, it'll be a temporary hack but I'll pst it when I'm done if it works.

zuke004:

Thank god I no longer feel alone :) I've been trying everything for about 5 days straight now, our development has totally come to a crawl. I have a workaround in ming I am going to try this week, it'll be a temporary hack but I'll pst it when I'm done if it works.

:)

You are not alone mate! My last 2 days were hell because of this issue. would you mind to share the temporary hack you had in mind?

And I am getting all my friends and colleagues that I've dragged with me into this issue trying to spot the problem to vote the bug you've logged on codeplex so that it gets prioritized

hello.

well, unfortunatelt, this seems to be an internal error which is very difficult to debug, i've found where the problem, but i still haven't understood why the code was written like that. the problem lies in the renderformcallback method of the pagerequestmanager class.

here's the code that is responsible:

if (this._owner.IPage.EnableEventValidation)
{
HtmlTextWriter writer2 = new HtmlTextWriter(TextWriter.Null);
foreach (Control control1 in containerControl.Controls)
{
control1.RenderControl(writer2);
}
}
rendering the control is necessary for the watermark extender to add the necessary scripts into the page (they'll ony be added if the render method of the scriptmanager control renders itself, ie, if its render method is called and this will only happen when EnableEventValidation is true as you can see from the previous code).

since this is a private auxiliary class used by scriptmanager, there's not much that can be done for now...

Hi Luis and thank you very much for your answer.

Could you recommend any partial/temporary solution that we could use for the moment (sorry for being lazy and asking such questions :)

Extender fails after partial postback in IE7 only

I have a simple extender which sets focus to a textbox when the page loads. In IE after a partial postback this control doesn't reset the focus. It does work on page load however and it works every time in FireFox. Any suggestions? Below is the JS for the extender:

Type.registerNamespace('AjaxFocus');

AjaxFocus.AjaxFocusBehavior = function(element)
{
AjaxFocus.AjaxFocusBehavior.initializeBase(this, [element]);
}

AjaxFocus.AjaxFocusBehavior.prototype =
{
initialize : function()
{
AjaxFocus.AjaxFocusBehavior.callBaseMethod(this, 'initialize');

var e = this.get_element();

if (e != null)
e.focus();
},

dispose : function()
{
AjaxFocus.AjaxFocusBehavior.callBaseMethod(this, 'dispose');
}
}

AjaxFocus.AjaxFocusBehavior.registerClass('AjaxFocus.AjaxFocusBehavior', AjaxControlToolkit.BehaviorBase);

Is the Extender inside of the update panel?

Extender controls may not be registered before PreRender.

Anytime I insert a calendar extendar control or any other control from the Ajax toolkit in gridview or detailsview template. I get the page exception error. "Extender controls may not be registered before PreRender". I am using the latest Atlas DLL's.

I noticed other posts about the same subject but no clear or detailed answer to the solution. Any help will be greatly appreciated. Preferebly in vb.net please.

Hi,

by "latest Atlas DLL" do you mean ASP.NET AJAX 1.0 ?

Yes,

I meant ASP.NET AJAX 1.0 Garbin. Thanks for the offer to help. I did eventually found the fix for this problem by trial and error. I simply took the ScriptManager out of the Detailsview Control -Insertview section and placed it on the page I had the Detailsview control and Walla! problem resolved. I am sure this is probably cheating but hey it worked. If anybody has any insight as to why this happens and what is the right fix for it please enlight us all.

Once again to recreate the problem try the following steps.

1. Drag and drop a detailsview control on your page.
2. Bind the detailsview control to any datasource.
3. In Detailsview Insert mode drag and drop a textbox then any drag and drop any Atlas control ( I tried Calendar Extendar) right inside the Detailsview insert item template.
4. Bind Calendar extender to the Textbox.
5. Preview your page on your web browser and you will see the ugly exception "Extender controls may not be registered before PreRender."

Hi,

I'm not sure why it's happening, but the ScriptManager control should always be declared in the page (or in the Master Page) rather than in a control's template.

Thanks man! This fixed my problem.

I ran into this problem after I added a Login Control on my Master Page. I had to move my script manager from my "inner page" into my Master Page and that fixed the problem.

Cheers!

Extender control

Hi,

Can someone explain how the extender concept works? I like the fact that you can drop an extender on a page for a particular type and all types on the page will extend a couple of properties.

I would like to apply this to some other scenarios but I dont necessarily want to use ajax to do it.

How does this work?

Is the source code available to find out?

Regards

hello.

extenders will only wrap client side behaviors so that it's easier to associate them with page controls. in my opinion, you should only use them if you're using client behaviors and you want to define its properties from the server side.

I find the use for extenders limited / tedious though. Remember that one extender is required per control you want to extend.

If you want to extend the behaviour of the whole type without adding any controls, you should look into control adapters.

Ooops, forgot the URL to the atlas control toolkit. This is the best way (IMHO) to learn about the mechanics: http://www.codeplex.com/Project/FileDownload.aspx?ProjectName=AtlasControlToolkit&DownloadId=4059

I will investigate this further, thanks for the feedback!!!

Thanks, I will check it out.

Exposing Web Services from an ASPX page does not work

Hi All,

I am working with ATLAS technology. i am trying to imitatehttp://atlas.asp.net/quickstart/atlas/doc/services/default.aspx#webpage
"Exposing Web Services from an ASPX page"

i am having an aspx page which is inherited from our own Page class not from System.Web.UI.Page.

public partial class MainSearchPage : some namespace.MyPage

but this example does not work in this context.because in javascript, function OnWebRequestComplete1(result) returns null as result.

please help me in this issue.

thanks
Jaideep

hello.

well, i think that it should work. here's an example:

pypage.cs
namespace Test
{
public class MyPage:Page
{
[WebMethod]
public string HelloWorld(string s)
{
return "Hello '" + s + "'";
}
}
}

now, the aspx page:

Untitled Page

function handle()
{
PageMethods.HelloWorld( "Luis", handleComplete );
}

function handleComplete( res )
{
alert( res );
}

here everything is working properly...

Yes, this should work. To debug your issue, I would try:

Check on the server whether your method gets called at all.

yes, my server side code in code behind of aspx is not getting called.
in javascript side:

function handle()

{

PageMethods.HelloWorld("jaideep", handleComplete );

}

function handleComplete( res )

{

debug.dump(res,"Result",true);

alert( res );

}

in debugger, result is null.also my aspx is having one user control also.i tried to put debug in my code behind.but function HelloWorld is not getting called.

any clue as to what is happening.
thanks

jaideep

after viewing request/response in Fiddler ,i got a message indicating a corrupted viewstate.
same is the problem in following post:
http://forums.asp.net/1205269/ShowPost.aspx "ViewState and Atlas ".
and as per the instruction given , i removed "type =="hidden" condition from file
Atlas.js on line 3495.and now it is working!! but this approach is correct or not?
please let me know about this.
Thanks

JAideep

Copying my reply from the other thread:

I tried a few things, but was not able to repro. Could you give this a try with the March CTP to see if it still happens?

thanks,
David

Exporting gridview to excel and Ajax page get an error

hello I trying to export a gridview to excel in my project, but I got this error:

"Sys.WebForms.PageRequestManagerParserErrorException:The message received from the server could not be parsed. Common causesfor this error are when the response is modified by calls toResponse.Write(), response filters, HttpModules, or server trace isenabled."

is there a way to export this without response.write or to solve this issue with ajax

I solve the problem like this:

protectedvoid Page_Init()

{

PostBackTrigger trigger =newPostBackTrigger();

trigger.ControlID = ((Button)pnGridViewProcess.FindControl("btnExcel")).UniqueID.ToString();

((System.Web.UI.UpdatePanel)Page.Controls[0].FindControl("UpdatePanel1")).Triggers.Add(trigger);

}

Explorer Error: Sys is not defined

Hi,

I'm trying to create a profile to mantain the position of one panel. When this user open the web page this panel should be in the same position as before. I read the Atlas reference and copied the code of the examples, but the explorer returns me this error:

'Sys' is not defined.

Here is the code of my web.config file:

<microsoft.web>

<profileService enabled="true"

setProperties="PanelRelogTop;PanelRelogWidth"

getProperties="PanelRelogTop;PanelRelogWidth" />

</microsoft.web>

And here is the code I use:

<atlas:ProfileScriptService ID="pss1" runat="server"></atlas:ProfileScriptService>

<script type="text/javascript" language="JavaScript">

var PanelReloj = $("PanelReloj");

//This will load the profile data into the various HTML elements

//when the page loads.

function OnPageLoad() {

//Turn off automatic saving of the profile back to the server each time

//a profile property changes.

Sys.Profile.set_autoSave(false);

//Assign an event handler that runs once the profile has been loaded from the server

Sys.Profile.loaded.add(onProfileLoadComplete);

//Assign an event handler that runs once the profile has been successfully saved on the server

Sys.Profile.saved.add(onProfileSaveComplete);

//Load the profile from the server. As with all web service calls in "Atlas", the load

//occurs asynchronously.

Sys.Profile.load();

}

//Called when the profile data has been loaded from the server

function onProfileLoadComplete()

{

PanelReloj.top = Sys.Profile.properties.PanelRelogTop;

PanelReloj.width = Sys.Profile.properties.PanelRelogWidth;

}

function OnUpdateProfile()

{

Sys.Profile.properties.PanelRelogTop = PanelReloj.top;

Sys.Profile.properties.PanelRelogWidth = PanelReloj.width;

//Saves the profile on the server. The save occurs asynchronously.

Sys.Profile.save();

}

function onProfileSaveComplete() {

alert('The profile has been saved.');

}

</script>

Does anybody know if I'm doing something wrong or do I need to do something else?

Thanks!!!

When does OnPageLoad function gets called? Is it after Atlas has finished loading or when the window or body onload is fired? If it is the later case try removing the event handler and putting it in a javascript function called pageLoad (which gets fired when Atlas is loaded).

function pageLoad()
{
OnPageLoad();
}

It does on bdy onload event.

<body onload="OnPageLoad()">

Hi!

Instead of making your initial function call in <body onload=''> you should use the following snippet in the document:

 <script type="text/javascript"> function OnApplicationLoad() { MyFunc(); return false; } </script>

This is because the Ajax framework takes some time to initialize and your call is being made before the Sys object is created. The "OnApplicationLoad" is raised from Ajax when initialization is done.

--
Mattias Lindsj? | Fivestarday Sweden | www.fivestarday.se |

I think I solve the problem, I have to use Web object instead of Sys object. It's something I discover looking at the Atlas scripts or the object Browser on the Atlas reference.

Now, I do profile on web controls but only while the user is in the page. If the explorer is closed and then the user loads the same web page, there isn't values for the profile. I suppose after reading the documentation that these values are saved in some way and returned when the page is loaded again. How I do this using client code? And, what is the funcionality of the ProfileScriptService control?

hello.

if you're still using the Web namespace (instead of the Sys), then that means that you're running an old version of ATLAS (the March CTP is the latest release).

I've updated the new Atlas version and works fine with Sys object. Thanks for this point Luis.

Mattias, thanks for this code. It works with your suggestion and on the Load event of the body with the new version of Atlas.

Someone of you know how I can keep the profile for maintain configuration of pages?

I suggest starting a new thread with a descriptive title to focus on this. It's general best to limit one thread to a single issue, so that others can simply look at the title and know what it's about.

thanks,
David

Expandable Side Menu like in Excel.

Hello all,

I have a treeview on my menu on the left side of the page. Right now the width is fixed. If a name of a hyperlink is too long, the user has to use the horizontal scroll to be able to read the whole name. I remember that in the MSDN Download page, the left side menu is expandable via a drag (horizontal not vertical). Or you can use Excel as an example; you can expand the the header column horizontally as wide as you want.

Is there a sample code somewhere so I can have this behavior on my page?

The closes one i can think of is the AjaxControlToolkit:CollapsiblePanel ... combine with the Slider ... and then use javascript to update the width of the Panel while the slider is being drag ... hihihihi oh man, ... there gotta be a simplier way ... any help here? Oh, one more thing, my left side menu is collapsible via JavaScript ... not the AJax stuff. that's why CollapsiblePanel comes in mind.

By the way, can the CollapsiblePanel collapse horizontally? I don't see any option for that. ... Any input would be sweet ... thanks all.

WishStar99:

By the way, can the CollapsiblePanel collapse horizontally? I don't see any option for that. ... Any input would be sweet ... thanks all.

definitely you can make the collapsiblepanel collapse horizontally.

there is an attribute property calledExpandDirection

you're right, there is ... thanks ...

Hi,WishStar99

I'm also seeking for what you want,I did what you do last year in one of my projects.

Have you found anything that works great?

Thanks

I have not implement it yet. However, I think whatever is in my mind should be able to work. =)

If I ever accomplish it, i'll post the URL here so all can see.

Expand/Collapse a group of CollapsiblePanelExtenders

I have a page with a group of CollapsiblePanelExtender controls I want to write a javascript function to expand or collapse all panels together at the same time. Is this possible and please how?

Thanks in advance

You can put your group of CollapsiblePanelExtender inside adiv/paneland have the collapse/expand controlid use thediv/panel.Its like a nested CollapsiblePanelExtender .

Hi Jessy ,

I have convered the EXACT SAME scenario on my blog over as an example of :

How to : Perform Operations on all instances of a Ajax Control Extender on a page

Hope this helps

Thanks Phanatic this is exactly what I need

Execution of Atlas initialization phase

Is there a way to let the init phase of atlas run earlier than when *all* content of a page has been downloaded?

On our site we have content (images, iframes) from other sites. It seems the init phase will not run before all content (thus also content from out of our site, but also our own images) is downloaded. Which gives the user the illusion that our site is slow, but thats not the case, of course ... ;)

Thanks.

hello.

hum...i guess that you'll only have this problem if you're using xml-script. currently, i think that it only is processed on the window.load event...

Any news on this? Will atlas be able to runs its init phase earlier than the window.load event?

I am planning to call the Sys.Runtime.Initialize myself at the end of the HTML instead waiting for the window.onload event to eventually call it.

Does anyone see a downside for this?

I had the same idea, the problem is even when u place the code at the end of the document and call init() yourself u can't ensure that all scripts have been loaded. For example the following script block causes normally an exception saying the WebService.Method isn't aviable.

<script type="text/javascript"> Sys.Runtime.initialize(); WebService.Method( CallBack );</script>

Is there anyway to know when all (webservice)references are loaded and ready? I need to call a function before the window onload but after all atlas ref's are fully loaded.

What we did was doing *all* javascripts include ourselves.
We do not use the scriptreferences of atlas anymore. We even dont let atlas include his own js files...

With Page.ClientScript.RegisterClientScriptInclude we include the atlas.js and his friends. ;)
The services are included as "xxxservice.asmx/js".
This way *all* javascript files are included at the very top of the HTML,
then its save call the service like you were intended to.
The reason why we also register atlas js files is about the order of the include file in the HTML.
When we dont do it ourselfs, the atlas.js may be included to late in the HTML.

HTH

Yesterday I was thinking to mail the atlas team about this "self registerclientscriptinclude" instead of using the scriptreferences
for the very purpose you are describing. Now seeing your post I will definately mail them today! :)

Qty:

The services are included as "xxxservice.asmx/js"

I tryed this myself but i ended up getting requests like "/undefined?mn=MehodName" - i think this has something to do with the appPath var?

Perhaps you can include script that set the path & apppath

RegisterStartupScript "XXXService.path = 'http://website/XXXService.asmx'; XXXService.appPath = 'http://website/'"

HTH

Didn't know the .path var - thx a lot!

Execute UpdateProgress after page load

I have UpdatePanel, Grid and UpdateProgress controls, all working together using Ajax. When user does any action with the grid, Updateprogress shows nice animated gif "Loading adata...".

However, when the page loads, it takes 5 minutes to load data to the grid. There is no message, nothing, so the user may think he has Internet connection problems... How can I make Updateprogres to show the animated gif, when the page is initially loading data to the grid?

I was thinking maybe there is some event after the page loads, in this case I could load the data, after the page loads... Is it possible? What is the standard way to do it? Thanks

Hi rfurdzik,

When you want to have influence in the partial rendering of your page take a look at this:

http://ajax.asp.net/docs/overview/PageRequestManagerOverview.aspx

The PageRequestManager is the place to be to customize your partial rendering.

Regards,

In your case i would suggest to take a look at the: PageLoading event

"The pageLoading event is raised after the response from the server to an asynchronous postback is received but before any content on the page is updated. You can use this event to provide a custom transition effect for updated content."

Regards,

Hi I am not sure if that is what I need, I looked briefly at the link you gave me, but it seemsit points to PostBacks... I have no postback, this is the first time grid is loading. No user interaction occured yet, no postbacks. With postback works fine, just the initial load of data to the grid needs animation.

I am little bit lost in the info you gave me, would you guide me what event needs to be coded exactly and how to show the animation (I placed it in ProgressPanel)? Here is my scenario:

1) Page Loads

2) Animation shows "Loading data", grid is not visible yet

3) Data is loaded to the grid

4) Animation disappears

As I said earlier this is the initial load, first visit to the page, no postback yet...

There are two solutions:

The first you hide the gridview till the page completely loads and show only a progress image as shown below:

--------

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sales Details</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="Progress"><img alt="Loading..." src="indicator.gif" /> Loading... </div>
<div id="GridContainer" style="display:none">
<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString%>" SelectCommand="SELECT TOP (10000) SalesOrderID, SalesOrderDetailID, CarrierTrackingNumber, OrderQty, ProductID, SpecialOfferID, UnitPrice, UnitPriceDiscount, LineTotal, rowguid, ModifiedDate FROM Sales.SalesOrderDetail"></asp:SqlDataSource>
</div>
</form>
<script type="text/javascript">
Sys.Application.add_init(function() {
$get("GridContainer").style.display = "";
$get("Progress").style.display = "none";
});
</script>
</body>
</html>

----------

The second solution is to induce a postback in load. In the sample below it is done by using a Timer control in the UpdatePanel. The GridView is not set to visible when the Page is not in PostBack and as soon as the timer starts a postback is done causing a partial page update which eventually causes UpdateProgress to be shown:

<%@. Page Language="C#" AutoEventWireup="true" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { GridView1.Visible = IsPostBack; Timer1.Enabled = !IsPostBack; }</script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Sales Details</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdateProgress ID="Progress" runat="server"> <ProgressTemplate> <div> <img alt="Loading..." src="indicator.gif" />Loading...</div> </ProgressTemplate> </asp:UpdateProgress> <asp:UpdatePanel ID="GridContainer" runat="server"> <ContentTemplate> <div id="Div1"> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString%>" SelectCommand="SELECT TOP (10000) SalesOrderID, SalesOrderDetailID, CarrierTrackingNumber, OrderQty, ProductID, SpecialOfferID, UnitPrice, UnitPriceDiscount, LineTotal, rowguid, ModifiedDate FROM Sales.SalesOrderDetail"> </asp:SqlDataSource> </div> <asp:Timer ID="Timer1" runat="server" Interval="100"> </asp:Timer> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> </form></body></html>

I think what youare reffering to is custom transition effect after postback. I have this functionality already done using Update panel and UpdateProgress controls. It all works.

What I need is to have the animation (under UpdateProgress) to be displayed during the INITIAL load of the page.

I was thinking maube no Ajax is needed in this case, maybe this can handled by standard ASP.NET code. Something like this (I am not sure what exactly events are):

1) Page load event - display animation (visble property = true), make grid invisible

2) Page loaded (?) - load data, (make grid visible, hide animation)

3) Postback - since I am changing the code now, not sure how the existing Ajax controls will behave (UpdatePanel + UpdateProgress...)

Hi rfurdzik,

Sorry that i didn't understand your question right. The option here above could give you a solution.

Regards,

yes, yes, your code makes sense. Thanks a lot!!! At least you understood what I need!

Dear Rama,

I like the second solution, it is very elegant. I do not fully understand the first one, but it is OK. I think your second solution needs to be modified in my case little bit. I am thinking to do this:

protected void Page_Load(object sender, EventArgs e)
{

if (IsPostback) {

LoadGridData();

}

GridView1.Visible = IsPostBack;

Timer1.Enabled = !IsPostBack;
}

As you see I have added additional if statement for loading the data to the grid, as showing the grid is not enough. Maybe that is why I was confused by the first example... Because I was thinking that even if youhide the grid,data load will occur, which will slow down my page load anyway... Maybe there is something I do not understand there...

However second solution seems will work for me...

Do you guys have some librarries with code? How do you find this? Do you organize your favorities in IE? That new IE is killing me, in version 7 it is so difficult to browse/bookmark anything if you have so many favorities. the reason is that it is all expended by deafault...

Oh, it is OK, your intention is the most important. You wanted to help! I may have not communicated well what I needed:) Thanks anyway for great info.

I have realized that the proposed second solution may also need to be changed more. This is the code I have in Page_Load:

if ((!Page.IsPostBack))

{

LoadData(15);

ViewState[

"CurrentTab"] ="0";// display the grid

}

As you can see I already check for Postback, I only load the data when it is first time load. This is of course for optimization purpose.

So now if I add timer code, we want the load of data to occur in THE FIRST POSTBACK ONLY. Not the first time the form is loading, but the first time postback is generated (by timer control). How would I acomplish this? I was thinking maybe setup a flag? I try this code, but it does not complie (I think some C# syntax issues, I am new to C#:))

m_DataLoaded = ((

Boolean)Session["m_DataLoaded"])=null ?true :false;

if ((Page.IsPostBack) & !(m_DataLoaded))

{

LoadData(15);

ViewState[

"CurrentTab"] ="0";

m_DataLoaded =

true;// display the grid

}

Session[

"m_DataLoaded"] = m_DataLoaded;

grdMyGrid.Visible = IsPostBack;

Timer1.Enabled = !IsPostBack;

What is wrong here? Something with casting I think... Please help.

Hirfurdzik ,

I used SqlDataSource control to bind to the grid which automatically binds the data provided the Grid is visible. So no penalty will be incurred.

Yes, I understand now. I can't figure this out what is wrong with my code, it compiles now, but getting error: m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false; if ((Page.IsPostBack) & !(m_DataLoaded)) { LoadData(15); ViewState["CurrentTab"] = "0"; m_DataLoaded = true; // display the grid } Session["m_DataLoaded"] = m_DataLoaded; grdMyGrid.Visible = IsPostBack; Timer1.Enabled = !IsPostBack;This is the error:Object reference not set to an instance of an object. 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.NullReferenceException: Object reference not set to an instance of an object.Source Error: Line 96: m_dvInv = (DataView)(Session["m_dvInv"]);Line 97: Line 98: m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;Line 99: Line 100: if ((Page.IsPostBack) & !(m_DataLoaded))

Just changed editor back, beacuse the other one does not format. This one has some delay when typing, so many misstakes...

Yes, I understand now. I can't figure this out what is wrong with my code, it compiles now, but getting error:

m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;

if ((Page.IsPostBack) & !(m_DataLoaded))
{
LoadData(15);
ViewState["CurrentTab"] = "0";

m_DataLoaded = true;
// display the grid
}

Session["m_DataLoaded"] = m_DataLoaded;

grdMyGrid.Visible = IsPostBack;
Timer1.Enabled = !IsPostBack;

This is the error:

Object reference not set to an instance of an object.
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.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 96: m_dvInv = (DataView)(Session["m_dvInv"]);
Line 97:
Line 98: m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;
Line 99:
Line 100: if ((Page.IsPostBack) & !(m_DataLoaded))

m_DataLoaded = ((Boolean)Session["m_DataLoaded"])==null ? true : false;

should be

m_DataLoaded = Session["m_DataLoaded"] ==null ? true : false

Thank you Rama Khrishna, it compiles fine and runs fine now. However the grid is not visible. So eighter the timer did not start, or something wrong with the logic. I will debug it now...

execute function on page load

hi,

I've a javascript function that uses a webservice to fill a dropdown box. I want to call this method when my page is loaded (ie <body onload="..."> but when I do this, Atlas never finds the javascript object that represents my webservice.
I guess this is because this object gets initialized a little later. Does anyone have an idea how I could solve this?

Thanks a lot, Hannes.

Hi Hannes

You can set the load property on the atlas xml-script section to specify you javascript function to execute when the page load. For example:

<script type="text/javascript">
function onLoad(){
alert("Hello, run your code here!");
}
</script>

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<application load="onLoad">
</application>
</components>
</page>
</script>

Take a look athttp://blogs.msdn.com/jhawk/archive/2006/01/20/515590.aspx for the complete example.

thanks
-jhawk

ah, that's exactly what I was looking for. Thanks a lot, jhawk.

Execute a JavaScript on AJAX Update

I tried submitting this once, but it did not show so I will try again.

I have a page with multiple UpdatePanels on it and when one of those panels is updated I want to fire a javascript to track the action. For exapmple I have a Slideshow panel, a panel containing paged comments, and a panel that allows someone to add a comment. If they click the next button on the slideshow panel I want to execute a Javascript command like "TrackAction('photoView')" when the panel updates with the new photo or if they add a comment and it is validated by the server I want to execute a Javascript command like "TrackAction('commentAdded')".

Atlas used to reload the scripts in the head everytime a panel was updated so I culd modify them before they were executed, but it appears that was "fixed" in MS AJAX. Any ideas on how to accomplish this?

You could use the events exposed in the client library class called PageRequestManager.

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

Basically, after the response comes back from the server from an async postback you can see all the panels that are updated, created, or deleted. You can then take action based on that. The last example on this page:http://ajax.asp.net/docs/tutorials/UpdatePanelClientScripting.aspx has a animation example that shows how to base a simple animation on what button was clicked on a page and using the pageLoaded event of the PageRequestManager.

Thanks. I think I may be able to modify that to work. It may be tricky because some panels cause other panels to update (like the "Add Comment" would also refresh the "Comment List" panel, but I think it may work. It would be nice to be able to do it from the code behind to be sure of exactly what just happened, but you have to work with what you are given.

exclude events

hi...

Is there anyway to exclude events from page life cycle when callBack events is occur, and include those events when postBack occur?

thank you...

Hi,

no, but you can use the IsInAsyncPostBack property of the ScriptManager to determine if a partial postback or a regular postback is running and take different actions.

hi...

thank you for your answer...

First of all, the script manager that i use plcaed in master page. so, can i say, all evets that server side controls within any update panel(in masterPage or content page) will raise, cause to IsInAsyncPostBack property to be true? and, all evets that server side controls that out of any update panel(in masterPage or content page) will raise, or, cotrols that progrematically raise callBack events will cause to IsInAsyncPostBack property to be false?

thank you...

Hi,

yes, unless the controls outside the UpdatePanel are triggers for it (in this case, IsInAsyncPostBack = true),

Exception: Either Path or Type must be set on a ServiceReference

I am getting an exception with the script manager on my page. I just would like some basic troubleshooting steps to elimate this problem.

Maybe what it means, what I should look for, etc.

StackTrace:

[InvalidOperationException: Either Path or Type must be set on a ServiceReference]
Microsoft.Web.UI.ServiceReference.GetProxyPath(Control control) +217
Microsoft.Web.UI.ScriptManager.GetScriptReferences() +847
Microsoft.Web.UI.ScriptManager.RenderXmlScript(TextWriter writer) +43
Microsoft.Web.UI.ScriptManager.OnPagePreRenderComplete(Object sender, EventArgs e) +402
System.EventHandler.Invoke(Object sender, EventArgs e) +0
System.Web.UI.Page.OnPreRenderComplete(EventArgs e) +75
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +6198

Hi Bill,

What does your <atlas:ServiceReference> look like? As the error message explains, it must have either a Path or Type attribute (in most cases, you want 'Path'). You may want to look through the quickstart for examples. e.g.here.

thanks,
David

I was manually creating my ServiceReference because it was wrapped inside a Custom Server Control. I just needed to set the Path attribute. I forgot all about that when I moved it from a page level declaration to a code level declaration.

Thanks for pointing that out!

bill

Exception when using public attributes of user control containing UpdatePanel

I have a page that utilizes a user control. This control is compiled in using a web deployment project. The project is not set to allow the precompiled site to be updatable.

This user control has a number of attributes that set/access child control properties.

My problem is that within my user control, no child control within the UpdatePanel is instantiated when the page attributes are being processed. When I try to declare attributes for my user control within the .aspx, I get a null reference exception. The generated code that sets these attributes appears to run too early. If I set the attributes programmatically at Page_Init or Page_Load, everything works okay.

On error, the flow of execution is this:

1) Page's Page_Init

2) Exception (attempt to set attribute of null control)

(Not called: Control's Page_PreInit, Control's Page_Init)

I have tried calling EnsureChildControls() for both the page and the user control, but it does not make any difference.

It looks something like this:

ASPX file:

<asp:Content ID="thePage" ContentPlaceHolderID="MainContentPlaceHolder" Runat="Server"> <MyControls:theControl id="WebLinksControl" runat="server" CssClass="Content_FullPage" ListTitleText="my text" /></asp:Content>

ASCX file:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="False" UpdateMode="Conditional" > <ContentTemplate> <div class="ListTitle"> <asp:Label ID="lblListTitle" runat="server" Text="Replace Me"> </asp:Label> </div></ContentTemplate></asp:UpdatePanel>

The accessor:

/// <summary> /// Get/set the text of the label: List title /// </summary>public string ListTitleText {get {// Retrieve object propertyreturn lblListTitle.Text; }set {// Override null with empty stringif (value ==null)value = String.Empty;// Set object property lblListTitle.Text =value; } }

I'm currently experiencing this problem myself. Has anyone been able to solve this?

Me too. Has anyone been able to resolve this?

Edmund

Hi, I'm having the same issue. Anyone found a solution yet?

As you mentioned, I can get around it by setting the attributes programmatically but this isn't really desirable

Try this solution it worked for me:

Create a private variable to temporarily store the value of the property. Override the render method of the user control to assign the property to the textbox.

Private _maxLengthAsInteger

PublicProperty MaxLength()AsInteger
Get
Return txtValue.MaxLength
EndGet
Set(ByVal valueAsInteger)
_maxLength = value
End Set
EndPropertyOverridesSub Render(ByVal writerAs System.Web.UI.HtmlTextWriter)
txtValue.MaxLength = _maxLength
MyBase.Render(writer)
EndSub

Good luck, Hanan Schwartzberg
--------
Custom programming and web design
http://www.lionsden.co.il

Has a solution been found to this problem?

As for the temporary variable in the property suggestion, wouldn't that have a problem for any property accessed before the render occurred ie the set value is in the temp but the get is pointing to the actual child control. Seems like this causes an out of sync issue with the property values until the render method occurs.

Is there any way to ensure that the child controls exist before a property tries to get set without having to change a usercontrol into a custom control?

I believe you are correct about the problem with loading the temporary values into the controls being in the render method. The solution is, in my example, to move

txtValue.MaxLength = _maxLength

into the Page.Load method.

Hanan