Showing posts with label control. Show all posts
Showing posts with label control. Show all posts

Wednesday, March 28, 2012

UpdateProgress not showing up

I have a page which has a FormView control and when I click one of the rows I get an ModalPopup for editing the detailed information. This works, however it takes too long for ModalPopup to open. Since I haven't found any solution for speeding up the ModalPopup, I thought I might as well inform the user that the data is loading on the background. I also thought that I might give UpdateProgress-control a try. I know that this is not the best solution for this (performance) issue but so far is the best I can figure out.

My page looks like this:

<Button> (hidden)
<ModalPopupExtender>
<Panel>
<UpdatePanel>
<FormView>
</UpdatePanel>
<UpdateProgress>
</Panel>

So what I would like is that before ModalPopup is visible, user gets an message presented by UpdateProgress, that something is going on. However with this current setup, nothing happens, UpdateProgress is not activated. Any ideas why ?

The ModalPopupExtender and the popup control have to be inside the UpdatePanel for UpdateProgress to be activated.



Hi,

Here an example of how to procede with.

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional">

<ContentTemplate>

<!-- Place here your ModalPopupExtender and the popup control -->

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgressID="UpdateProgress1"DynamicLayout="false"runat="server"DisplayAfter="50">

<ProgressTemplate>

<spanstyle="font-family: Trebuchet MS; color: #ffffff;">Chargement...</span</ProgressTemplate>

</asp:UpdateProgress>

<ajaxToolkit:AlwaysVisibleControlExtenderID="AlwaysVisibleControlExtender1"runat="server"TargetControlID="UpdateProgress1"HorizontalSide="Center"VerticalSide="Middle"HorizontalOffset="0" />

Kind regards,


Ok,

Thanks both, I try to take look at this bit more today.


I tried this and it works, thanks !

One question though, why is AlwaysVisibleControlExtender needed, because the examples I have seen are done without this ? I always thought that UpdateProgress would be the only control needed here.


Happy to see that it works.

k000der:

I tried this and it works, thanks !

One question though, why is AlwaysVisibleControlExtender needed, because the examples I have seen are done without this ?

This extender is just here for managing the UpdateProgressExtender position. As you can seeHorizontalSide="Center"VerticalSide="Middle"

are for specifying the position in the screen where you would like to have the loading displayed, and even if you are scrolling up and down inside the page, you'll see that the position will always stay where you define it.

Kind regards,


Ok, now I see why it's needed. Thanks again.

Updateprogress on page_load ?

I have a long running process that might take several seconds to populate a control. Id like to show a progress indicator while this is being done. Anyone got an example of showing an updateprogress during page_load ? Maybe I can just use javascript to invoke a button click event on a non-visible button and have it start off the process ?
 here's a quick example:
var $user_updateProgress=Sys.Application.findComponent('ctl00_WorkingArea_Container_User_list1_UserLookupProgress');
 I had an UpdateProgress control named UserLookupProgress which I wanted to display. When the page loads, the control gets loaded into a javascript Sys.UI.Control.
So I needed to access it and it was driving me nuts! so I took a look at the source and figured out how they were doing it. Ultimately you need to use the findComponent method
of the Sys.Application class. The thing I could not figure out is why I had to reference the fully qualified ClientID in order to gain reference to my control.
From there I was able to show/hide the control.
 Hope this helps.
 P.S. if anyone has a better way , PLEASE chime in ;)


I want to show a updateprogress while my page loads. There is a tree that is populated with a large amount of data.

i have encounter same problem b4, that need to load a large data on the page load

but the interface will hang untill all the data was process.

i did a silly job to solve this problem

add a timer that run only once, set it to false by default, then on pageload and Ispostback=false, enable the timer run only once.

in the timer tick event bind the data.

thus, the databind is start after page load, and updateprogress working in this way too.

updateprogress position in Firefox (urghh!)

Hi,

I have an updateprogress control that displays nicely in the middle of the screen, but only in IE.

The code is...

<

atlas:UpdateProgressid="loadingProgress"runat="server"><ProgressTemplate>

<divstyle="height:40px;width:250px;position:absolute;z-index:10000;left:expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);top:expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop+58); background-repeat: repeat-x; text-align: center; vertical-align: middle; border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-image: url(Images/updateProgressBk.png);">

<

imgstyle="z-index: 109; left: 80px; position: absolute;top:22px"src="images/progressbar_microsoft.gif"/></div></ProgressTemplate></atlas:UpdateProgress> But in Firefox (dont like it myself but some users here use it), it positions on the top left of the screen.

Anyone know a fix, or does Firefox not know about "this.offsetParent.clientHeight" etc?

Thanks

Anyone know how to position the update progress control in the center of the page when viewing from Firefox?

UpdateProgress Template and the Control Toolkit

I have an

atlas:UpdateProgress Template on the same page as some cascading drop downs. I have put in a large (5 seconds) delay on the webservice populating the dropdowns but still don't see the ProgressTemplate.

Does the UpdateProgress Template work with the control toolkit or is it just for UpdatePanels?

The Toolkit controls do not natively work with Atlas's UpdateProgress control. I looked into this briefly just now and it doesn't seem like the UpdateProgress control can be used in this way. Rather, it seems to tie itself directly to the "in postback" status of the relevant page. Since there are no postbacks in the CascadingDropDown scenario, UpdateProgress doesn't seem relevant. Sorry about that!

UpdateProgress taking up space

I've placed an UpdateProgress control on my page. But it's taking up space on the form when not displayed. Is there a way to make it so that when it's not showing it won't take up any space on the page?

Never mind. I have so many panels, tables and other controls, that it realy makes it difficult to identify any problems. The UpdateProgress wasn't the issue.

UpdateProgress Renders Differently in IE7

I am using an update progress control which contains an animated gif and then some text below. The style on the DIV creates a box around it. It renders fine in IE6 but IE7 the Please Wait...shows up outside the box...any suggestions? Here is the code and css style:

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<Div class="wdeProgressIndicator">
<img src="http://pics.10026.com/?src=images/progressbar.gif" alt="Please Wait..." />
Please Wait...
</Div>
</ProgressTemplate>
</asp:UpdateProgress>

background-color: #ffffff;
margin: auto;
height: 10px;
width: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -5px;
border-right: #5d7b9d thin solid;
border-top: #5d7b9d thin solid;
border-left: #5d7b9d thin solid;
border-bottom: #5d7b9d thin solid;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 10px;

If i do the following it works fine, so there has to be more html in the page, that is manipulating something. In any case, why not make the image a background-image on the div with the css, and rmeove the image tag all together, so the image is just part of the div anyway.

<html>
<style>
.wdeProgressIndicator{
background-color: #ffffff;
margin: auto;
height: 10px;
width: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -150px;
margin-top: -5px;
border-right: #5d7b9d thin solid;
border-top: #5d7b9d thin solid;
border-left: #5d7b9d thin solid;
border-bottom: #5d7b9d thin solid;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
padding-top: 10px;
}
</style>

<body>
<Div class="wdeProgressIndicator">
<img src="http://pics.10026.com/?src=images/progressbar.gif" alt="Please Wait..." />
Please Wait...
</Div>
</body>
</html>


Good suggestion..thanks. That seems to work for now.

UpdateProgress with DropDownList Controls (or others)

I have a UpdateProgress control that works with the submit button; how do I get it to work with a dropdown list that gets populated from a web service? Thanks.

Dan

I am not sure, if i had understood your problem correctly. An UpdateProgress control is attached to an update panel. So it doesnt matter if the post back is caused by a button or a dropdownlist. Make sure you have the dropdownlist in the updatepanel for which the updateprogress is attached.

Thanks

UpdateProgress with AssociatedUpdatePanelID not showing

I have a page withe 2 updatepanels & 2 updateprogress, when I set the AssociatedUpdatePanelID for each updateprogress control, neither is displayed when its associated panel is updated but when I remove the AssociatedUpdatePanelID, they work. But I need to set it. What can I do?

Can you post your asp.net code?

<

tr><td align="right">Country</td><td><asp:DropDownListID="ddlCountry"runat="server"DataSourceID="CountriesDS"DataTextField="CountryName"DataValueField="CountryId"AutoPostBack="True"AppendDataBoundItems="True"><asp:ListItemValue="0">-- Select Country --</asp:ListItem></asp:DropDownList></td></tr><tr><tdalign="right">City</td><td><ajax:UpdatePanelID="CityPanel"runat="server"UpdateMode="Conditional"><ContentTemplate><asp:DropDownListID="ddlCity"runat="server"DataSourceID="CitiesDS"DataTextField="CityName"DataValueField="CityId"><asp:ListItemValue="0">-- Select City --</asp:ListItem></asp:DropDownList>

<

ajax:UpdateProgressID="CityLoading"runat="server"AssociatedUpdatePanelID="CityPanel"><ProgressTemplate><imgsrc="../images/spinner.gif"align="absmiddle"alt="Loading..."></ProgressTemplate></ajax:UpdateProgress></ContentTemplate><Triggers><ajax:AsyncPostBackTriggerControlID="ddlCountry"/></Triggers></ajax:UpdatePanel></td></tr>

Hi, I have the same problem. The probem is with Triggers collection of UpdatePanel. It doesn`t work together with UpdateProgress.

Put that DropDownList inside UpdatePanel control and it will work.


Thanks it worked

UpdateProgress with a Response.Redirect

I have an UpdateProgress control to activate on a postback of a button control. The button_click event is performing a Response.Redirect to pull up a Report from SQL Reporting Server. The report comes up and the UpdateProgress bar is spinning on the page with the button. However, once the user closes the report and control is returned to the page, the UpdateProgress image is still there spinning.

How can I make the UpdateProgress bar to finish and go away?

Thanks,

Paul

Could you please post your code.

Is the UpdateProgress control inside an updatepanel?

JoeWeb


The UpdateProgress is outside of the UpdatePanel.

Protected

Sub ImgButPrint_Click(ByVal senderAsObject,ByVal eAs System.Web.UI.ImageClickEventArgs)Handles ImgButPrint.Click

Response.Redirect(PrintReports.printSchedule("Schedule3", Session.Item("companyId"), Session.Item("year"), 0))EndSub

The UpdateProgress displays a spinning wheel while the response.redirect happens. The Response.Redirect is opening a report from the report server as a .pdf file. So the redirect pops up a dialog asking user either to Open, Save, or Cancel the .pdf report file. Once the user selects their option and control is returned back to the original page the UpdateProgress image is still on the screen.

UpdateProgress throws javascript error when contained in a Panel with visible = false

If you put a UpdateProgress control inside a Panel control with visible=false, you will get a javascript error that is cannot find the elements used for the update progress functionality.

Anyone, seen this before and know of a workaround?

I get the same result in a MultiView when the UpdateProgress control is contained in a view that is not the current view.

Thanks,

Ryan

When you set Visible equal to false the HTML contained therein does not get rendered at all. You shouldn't need to explicitly hide the UpdatePanel as it should hide itself unless an Atlas postback is in progress.

If you do need to hid it, set the style of the panel to "display: none" and leave it visible. That way the HTML will be rendered but not shown on screen.


Thanks for the suggestion on display: none. This will work for Panel controls, but it won't work for pages using the MultiView control. I guess I'll have to get rid of MultiView and create several separate panels wnd manually control which one is shown and which ones are diplay: none.

updates from another thread

Hi, I'm trying to get a label control to update with dynamic information when a timer does its tick event.

I can get it to update with information hard-coded into the tick event, but i can't seem to get any data from a global variable or other shared resource.

Here's what i have so far-

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 System.Threading;public partialclass _Default : System.Web.UI.Page {string temp;protected void Page_Load(object sender, EventArgs e) { }protected void Timer1_Tick(object sender, EventArgs e) { Label1.Text ="Tick at " + DateTime.Now.ToString()+"<br />";if (temp !=null) Label1.Text +="register at-"+temp; }protected void Button1_Click(object sender, EventArgs e) { Thread a =new Thread(Foo); a.Start(); }protected void Foo() {while (true) { Thread.Sleep(100); temp = DateTime.Now.Day.ToString(); } }}

(that's actually a +"<br />" at the end of the first line on the tick event)

and the markup-

<%@dotnet.itags.org. 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>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> </div> <asp:Timer ID="Timer1" runat="server" Interval="500" OnTick="Timer1_Tick"> </asp:Timer> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </form> </body></html>
the 'register at" text never fires. I've tried using Session and Cache variables in place of a global string but no luck.

I am not sure how it is not working when puting it in Session/Cache, would you mind posting the code?


Here's the code using session-

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 System.Threading;public partialclass _Default : System.Web.UI.Page {protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) Session["Store"] =null; }protected void Timer1_Tick(object sender, EventArgs e) { Label1.Text ="Tick at " + DateTime.Now.ToString()+"<br />";if (Session["Store"] !=null) Label1.Text +="register at-" + Session["Store"].ToString(); }protected void Button1_Click(object sender, EventArgs e) { Thread a =new Thread(Foo); a.Start(); }protected void Foo() {while (true) { Thread.Sleep(100); Session["Store"] = DateTime.Now.ToString(); } }}

It is not possible to access the session/request/response/cache from an different thread, also creating thread/using threadpool is not an good practise.


How should I update the label control then?

Or if using another thread is not good practice, i don't see how i'm going to be able to get the button postback to finish so i can update the label cleint side from the server during a (partial) postback


I am still not clear about your requirment, anyway here is the code snippet which will allow you to access the session from a different thread:

protected void Button1_Click(object sender, EventArgs e){ ThreadPool.QueueUserWorkItem(new WaitCallback(foo), Session);}private void foo(object state){ HttpSessionState session = (HttpSessionState)state; session["Store"] = DateTime.Now.ToString();}

Initial tests with this method provide the functionality I was after. I'll try to implament it today and let you know how it goes.


Indeed this seems to work well. I have 2 follow up questions relating to it though-

1. I went ahead and passed the session variable to other functions I use by reference...I'm guessing this is ok?

eg-

protected void Button1_Click(object sender, EventArgs e) { ThreadPool.QueueUserWorkItem(new WaitCallback(foo), Session); }private void foo(object state) { HttpSessionState session = (HttpSessionState)state; Thread.Sleep(100); session["Store"] = DateTime.Now.ToString(); Thread.Sleep(1000); foo2(ref session); }private void foo2(ref HttpSessionState session) { session["Store"] = DateTime.Now.ToString(); }

2. I notcied the application context still stays around after the browser is closed(presumably waiting for the thread to end?) should I manually be stopping the proccess somehow?


1. Yes you can pass it from the worker thread method.
2. The Thread returns to threadpool as soon as the foo2 method completes, no do not have to do anything.

Since it solved your problem, dont forget to mark it as answer.


Let's take another stab at this. You didn't really state the object of what you were trying to achieve. Why are you trying to use the variable temp? And if it truly is a shared variable, why didn't you just make it static? A Session variable certainly isn't global to the application. There's got to be a reason you're doing this and perhaps there is a much better approach.


The end result alows me to provided feekback to the cleint about a job currently being ran on the server (in psudo-real time). The timer updates the label on the client but it needs to be able to read from a variable (or somthing) that the job running on the server can write to. The session variable only needs to be global to the session (mutliple people could be using this at a time).

If there is another way to do this without using the cache or session I'd prefer too, but I havn't seen a way to do this yet...


Well there are certainly more expensive techniques such as using a Windows Service to host the job and querying it. Or using a DB entry to write the job status and querying it with a web service.

However you might be interested in this person's approach. He used a Cache object, but there is no reason it couldn't be Session (but Cache can be used if a unique identifier is set for a collection of jobs). The main difference is that his whole task is in this object, and it's public properties can be used to get it's status.

http://www.eggheadcafe.com/articles/20051223.asp


Use the Cache/ Store the Jobs status in DB as muliple user will be able to see the same result. BTW for one User you cannot use the session for storing the long running task status as the session access is always sequential.


I did try using the cache and i wasn't abe to get it to work ( see the first post). Essesntially the source looks the same as the session example except you use cache['whatever'] instead of session["whatever"].

I was under the impression that the session[] object was unique for each 'cleint session' that is, each cleint request would have it's own session object to work with. If this is the case why can't i use it for multiple users

@.wrayx1- I wanted to stay away from using a service althogh I have read some thing about how to get them to work, i think it overcompliactes the simple job I'm trying to do.

Updating a Cell (TD) in a Table

Hi all,

I am developing a webcontrol and I am also developing an AjaxExtender for these control...

Now the problem is when I register an click Event, I works fine, but I would like to replace the

value of one special cell with the result I get from Sys.Net.WebServiceProxy.invoke(),

since I am not so familiar with javaScript and all these Ajax stuff ;) I would like

to ask you guys if you have any advice for me to do that...

thanks in advance,

Omid

It depends a bit on your table structure and how you have things marked up with id's and so on. The easiest possible case is that your TD has a unique id, in which case you can easily say:

$get('idoftheelement').innerHTML = resultsOfTheInvoke;

if you don't have a unique id for it, it's somewhat more complex, but generally it's easiest if you use array notation, for example,

var table = $get('idOfthetable');

var rows = table.getElementsByTagName('TR");

var firstRow = rows[0];

var firstRowTds = firstRow.getElementsByTagName("TD");

var lastTd = firstRowTds[firstRowTds.length-1];

once you have the TD you want, you can set its innerHTML property to the texto f the result param.


hi Paul,

thank you very much for the advice...

My Table and rows and Cols have all an unique ID,

so I think $get('idoftheelement').innerHTML = resultsOfTheInvoke; fits to me...

redards Omid.

ps. I have another little question... what will happen if the ID is not Unique?? will I get an Array?


ID's have to be unique. I've honestly never tried to do them otherwise, since the spec requires them to be. I imagine you'd get different results in different browsers and depending on your doctype declaration.

one thing to watch out for when using the Id is that if your table is a server control and its inside a Master page or a User Control, then ASP.Net will munge the server-side ID to keep it unique (in case you have mulitple instances of the same control o nthe page, etc). The solution to that is to either not use the id (use some other means such as the one described) or else embed the server-generated id somewhere on the page inside a <script> block such as : var myTableId = '<%= tblMain.ClientID %>';

Updating a ContentPlaceHolder with Ajax

I am working on a project which uses a MasterPage with one ContentPlaceHolder. I have a custom menu control on the MasterPage. When an item in the menu is clicked I need the ContentPlaceHolder to be updated with the requested content. I know this can easily be done using an iframe, but I'd rather stay away from iframes and like to do this with Ajax.

Basically my question is if this is possible at all. I've been trying a couple of things but without success and I think it may have to do by the way a MasterPage works.
If not possible, is there some kind of workaround for this? (without residing to iframes)

Thanks!

Hi Rino,

I tried also the same thing as you. I had a menu on my master page and an ContentPlaceHolder in my update panel. That didn't work. I think it isn't possible what you want to do.

Regards,


Unfortunately, no. It's just not how master pages and AJAX work. I just finished a post on the topic here:http://odetocode.com/Blogs/scott/archive/2007/01/03/9682.aspx


Thanks guys for clearing this up!
Would be great as a new .Net feature though :)


You can do it right now, actually, it's not that big of a deal. You don't really need a contentplaceholder for it, just a Div that you can hook into w/ javascript (giving it an ID, for example). You have your menu item click handler fire a javascript function that calls a web service and then have the onrequest complete handler fill the div with the stuff it gets back.

paul.vencill:

You don't really need a contentplaceholder for it, just a Div that you can hook into w/ javascript (giving it an ID, for example). You have your menu item click handler fire a javascript function that calls a web service and then have the onrequest complete handler fill the div with the stuff it gets back.

Paul: Yes, but this is an entirely different approach.


Understood. I was trying to offer something that might work for his application. is there a good reason you can think of to limit his app to using contentplaceholders?

No, my goal was just to point out that updating content place holders with content from a different page isn't how the technologies work together. It seems to be a common question these days, so I'm trying to clear that up.

The right way to achieve this would be to use a solution like you proposed!


ah, ok, cool. :D

It is very easy.

See my last post about "Handling events...".

Monday, March 26, 2012

Updating a Tree Control with Ajax

I'm new to Ajax so forgive me if this is an obvious question. I have a Tree control that's populated when a form loads. It has 4 levels of nodes. When one clicks on the lowest level (the leaves) then associated data populates controls to the right of the tree view.

There has to be the ability to delete a leaf. When this is done, might the Ajax update control be used to remove the leaf from the tree, yet keep the tree positioned in the same place?

An unrelated question: Is there an ASP.Net 2.0 web control that acts like a resizable panel similar to what's available with WinForms? This sort of thing exists on MSDN: http://msdn2.microsoft.com/en-us/library/ms229335.aspx (ie. the panel on the left)

Robert W.


Hi,rmdw

What you meant "keep the tree positioned in the same place"?

I'm sorry for that I cann't understand your question.Can you provide more information?


Suppose you had a tree that looked like this:

+ A

+ B

+ C


Now suppose you open up the "B" node to reveal this:

+ A

- B

- B1

- B2

- B3

+ C

Now suppose the user wants to delete leaf "B2". What I would like is for the tree to be redrawn (refreshed) with B2 gone but still showing the user the same portion of the tree. Obviously for such a small example it probably always will be shown but imagine there were 100 parent nodes and multiple levels.

Robert


Ha Ha, I see, you wanna keep the tree like this:

+ A

- B

- B1

- B3

+ C

after you deleted leaf "B2".

But it show you this:

+ A

+ B

+ C

because the updatepanel refreshed.

I advise you using webservice or webmathod to achieve it instead using updatepanel.

Sample:

Default.aspx:

<%@. Page Language="C#" %>

<!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>Untitled Page</title>

<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
var echoElem = document.getElementById("WhichLeafToDelete");
WebService.DeletedLeaf(echoElem.value,SucceededCallback);
}
// This is the callback function that processes the Web Service return value.
function SucceededCallback(result)
{
//Do something to change the html of the tree to delete the leaf.
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>
Simple Web Service</h2>
<p>
Calling a simple service that echoes the user's input and returns the current server
time.</p>
<input id="WhichLeafToDelete" type="text" />
<input id="EchoButton" type="button" value="Echo" onclick="EchoUserInput()" />
</div>
</form>
<hr />
<div>
<span id="Results"></span>
</div>
</body>
</html>

WebService.asmx:

<%@. WebService Language="C#" Class="WebService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public string DeletedLeaf (String input)
{
//Do something to delete the leaf in the database.
}
}

For more help, You can see thesetutorials:
http://ajax.asp.net/docs/tutorials/ExposingWebServicesToAJAXTutorial.aspx.
http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

Let me know if you need more info.


Jin-Yu Yin:

I'm a bit confused. The actual display of the tree is a local matter, isn't it? As such, isn't it superfluous about whether to use a web service or code on the page?

What about the Ajax Update Panel wouldn't solve the problem I'm trying to solve?

Robert



Hi, Robert

If you don't need to do something at the server-side, e.g. deleting the leaf in the database, I mean that, If you just delete something at the client-side,you don't need to use a web service or code on the page, just use JavaScript to delete it. it's ok.

If you use an updatepanel to do this, it'll show you this:

+ A

+ B

+ C

because the updatepanel refreshed. It cann't remember what you had did before the postback

Updating Atlas

Hello,
I was developing a produciton project using Atlas July CTP and Control Toolkit.
Now I'd like to updating to last version, but I can see that ATLAS is formed by 2 components:
Atlas 1.0 beta AND Atlas CTP beta.
I was used only Updatepanel in July CTP

What I need now? Is necessary to install both 1.0 and CTP?

And fot update what I do?
Must uninstall the previous version and then Install the new one?

tnx

If you just used the updatepanel, you don't need the CTP Beta, only the AJAX.net 1.0 beta. If you used the Atlas Control Toolkit, you'll need to reinstall that too. You'll also have to update your pages to work with new new edition of the framework, but with just updatepanels, it won't be that hard.
Can some direct me to installation instructions page......please.

For install instructions, go to:

http://ajax.asp.net/docs/Overview/installing/default.aspx

For changes between ctp and beta, go to:

http://ajax.asp.net/files/AspNet_AJAX_CTP_to_Beta_Whitepaper.aspx?tabid=47

For a feature matrix of what is in each install, go to:

http://ajax.asp.net and click on Feautre Matrix in tabbed panels.

Updating control in UserControl inside of UpdatePanel

Hello,

I have a page that contains a UserControl. Most of the page (including the UserControl) is wrapped in an UpdatePanel. When an AJAX event on the page occurs, I'd like to call a method inside of the UserControl to update a label. Problem is, when I do this, the page adds a new copy of the UserControl's contents (with the updated label) at the bottom of the page rather than refreshing the existing copy. Any idea what I'm doing wrong?

Thanks.

Are you dynamically creating the controls in the user control or dynamically creating the usercontrol itself? Posting your source code would be helpful.


Nope, no dynamic loading of anything. The page just looks something like this:

<asp:ScriptManagerrunat="server"ID="ScriptManager1"></asp:ScriptManager>

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<Custom:HotelDetailsrunat="server"ID="HotelDetails1"/>

</ContentTemplate>

</asp:UpdatePanel>

And there's an event in the code-behind of the page:

ProtectedSub DateChanged(ByVal srcAsObject,ByVal eAs Infragistics.WebUI.WebSchedule.WebDateChooser.WebDateChooserEventArgs)

HotelDetails1.UpdateRooms(wdcCheckIn.Value, wdcCheckOut.Value)

EndSub

And in the UserControl, there's a public method like this:

PublicSub UpdateRooms(ByVal StartDateAs DateTime,ByVal EndDateAs DateTime)

litName.Text = StartDate.ToShortDateString()

EndSub


I split the page into two UpdatePanels...one for the even firing controls and one for the UserControls that get updated and that seems to resolve the issue.

Updating controlls outside the UpdatePanel?

Hello,

I need to update a label that is NOT within my updatepanel control..
If I just try to modify it in the codebehind call of my trigger button, nothing happens... makes sense for me because its not included to the panel.

Is there a possibility to manage this?

Thanks in advance,
Andy

If there is some reason why it isn't in the updatepanel, you could put it in its own updatepanel that is set to conditional with a trigger to that button.

Hi Andy,

You can place the label inside an another UpdatePanel and setup the button as the AsyncPostBackTrigger for both UpdatePanels.

Hope this helps,

Updating control toolkit

I have some projects with some control from Atlas control toolkit (previous version).
Now there's the new version!
Is not easy to know what i do for update the previous with the new one.
Only change the dll?
It is sure that the old project will work? ...or I must to modify some code?
And what about .net controls tool list?
thanks

Just make sure that your project references the new dll. For the toolbox, delete all the controls from your toolkit tab and then readd them all. As for breaking changes, I've not heard about any, but I've not looked hard for a list of changes / breaking code.

Updating DataGrid control with ajax

Hi,

First post here (hope it's in the right forum)-go easy on me-I'm new to ajax!

Okay, so I have a control, which populates a datagrid, given two values (from seperate controls). Basically I want to make it so that pressing the update button will reload just the function that fills the datagrid and not the whole page, if you see what I mean.

I think I need to be using an update panel but the server side end is confusing me.

Thanks

The easiest way is going to be, put your Datagrid (I think you mean gridview) and your button inside an update panel.

Wire the buttons onclick event up to to just redatabind the grid. Here's an example: This example uses an unbound gridview, because I dont have any data currently to bind one too, but you'rs would be bound and work the same.

 <asp:UpdatePanel ID="update1" runat="server" UpdateMode="conditional" ChildrenAsTriggers="true"> <ContentTemplate> <asp:GridView ID="gv1" runat="server"> </asp:GridView> <asp:Button ID="button1" runat="server" Text="Update Grid" OnClick="button1_Click" /> </ContentTemplate> </asp:UpdatePanel>

Protected Sub button1_Click(ByVal senderAs Object,ByVal eAs System.EventArgs) gv1.DataBind()End Sub
Give it a shot, if you run into problems, post back and let us know, we can help you further.


Sorry I havent replied sooner, I've been having problems populating my gridview. I'll come back and look at it once I have the function that takes the two values and returns the dataset :)

Updating DetailsView Control with AJAX

I have a ListBox, and when I click on an item in the ListBox I want to populate my DetailsView control with that item. How do I do this with AJAX?

Pretty simply actually.

You will want to put AutoPostBack="true" on your ListBox declaration.

Youll then want to wrap your DetailsView inside an UpdatePanel, set the Updatemode to conditional. Also add 1 trigger to it with the ControlID pointing to your listbox, and the eventName as SelectedIndexChanged(the event your listbox will fire when selected is change).

in your code behind you're going to have an eevent fired with the listbox has it's index changed. In that event you will do the work to populate your detailsview based on what was selected.


I'm getting an error that says 'Sys' is undefined when I run this in IE now. Here's the code that it's erroring on...

<script type="text/javascript">
<!--
Sys.Application.initialize();
// -->
</script


Can you show more of your script/markup?

Do you have extra client side functionality in your page?


Sure, here's the entire source code of the page...

<!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><title>
Untitled Page
</title></head>
<body>
<form name="form1" method="post" action="EmpOrderInfo.aspx" id="form1">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjAyNTkzODI1MQ9kFgICAw9kFgQCAw8QDxYEHg1EYXRhVGV4dEZpZWxkBQdHcm91cElkHgtfIURhdGFCb3VuZGdkEBUFBDczNzcENzM3OAQ3MzgxBDczODIENzM4ORUFBDczNzcENzM3OAQ3MzgxBDczODIENzM4ORQrAwVnZ2dnZxYAZAIFD2QWAmYPZBYCAgEPPCsADwEADxYEHwFnHgtfIUl0ZW1Db3VudAIBZBYCZg9kFiRmDw8WAh4HVmlzaWJsZWhkZAIBD2QWAgIBDw8WAh4EVGV4dAUENzM3N2RkAgIPZBYCAgEPDxYCHwQFCTIyMzA2MjY1NGRkAgMPZBYCAgEPDxYCHwQFBVdISVRFZGQCBA9kFgICAQ8PFgIfBAUHR1JFR09SWWRkAgUPZBYCAgEPDxYCHwQFATFkZAIGD2QWAgIBDw8WAh8EBQExZGQCBw9kFgICAQ8PFgIfBAUVMS8xMS8yMDA3IDEyOjAwOjAwIEFNZGQCCA9kFgICAQ8PFgIfBAUGJm5ic3A7ZGQCCQ9kFgICAQ8PFgIfBAUKMDAwMTY3OTMwNmRkAgoPZBYCAgEPDxYCHwQFCjAwMDE2NzkzMDZkZAILD2QWAgIBDw8WAh8EBQUxNS4wMGRkAgwPZBYCAgEPDxYCHwQFBTU1LjAwZGQCDQ9kFgICAQ8PFgIfBAUEMC4wMGRkAg4PZBYCAgEPDxYCHwQFBDAuMDBkZAIPD2QWAgIBDw8WAh8EBQEwZGQCEA9kFgICAQ8PFgIfBAUUMS8xLzAwMDEgMTI6MDA6MDAgQU1kZAIRDw8WAh8DaGRkGAEFEG9yZGVyRGV0YWlsc1ZpZXcPZ2SqwxUXyPNrKdRopgFCgoT+NqtULg==" />
</div
<script type="text/javascript">
<!--
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script
<script src="http://pics.10026.com/?src=/WebResource.axd?d=FpwRBZ96xZ5ud99miA75mw2&t=633202882958381326" type="text/javascript"></script
<script src="http://pics.10026.com/?src=/ScriptResource.axd?d=LdKoE2V7baQxgZi5qJWDJL19jIzUAhV9R9vHBQErnKHQwiApaevwRqa0lkzD8pUgnd1f2nCFAiPcZKH9m548d5BH2dJtnoaxfupo3UPI0DE1&t=633270221986802216" type="text/javascript"></script>
<script src="http://pics.10026.com/?src=/ScriptResource.axd?d=LdKoE2V7baQxgZi5qJWDJL19jIzUAhV9R9vHBQErnKHQwiApaevwRqa0lkzD8pUgnd1f2nCFAiPcZKH9m548d-Ek16dyKFudPIusY3WzCMCytLJROrx7r4IKoGi2fnci0&t=633270221986802216" type="text/javascript"></script>
<div>
<div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], ['orderListBox'], [], 90);
//]]>
</script
<table border="1" style="; height: 500px">
<tr>
<td style="width: 200px; height: 500px" valign="top">
<select size="4" name="orderListBox" onchange="javascript:setTimeout('__doPostBack(\'orderListBox\',\'\')', 0)" id="orderListBox" style="height:100%;width:100%;">
<option value="7377">7377</option>
<option value="7378">7378</option>
<option value="7381">7381</option>
<option value="7382">7382</option>
<option value="7389">7389</option
</select></td>
<td align="left" style="width: 400px; height: 500px" valign="top">
<div id="UpdatePanel1">

<div>
<table cellspacing="0" cellpadding="4" align="Left" border="0" id="orderDetailsView" style="color:#333333;height:100%;width:100%;border-collapse:collapse;">
<tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">GroupId</td><td>7377</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">SSN</td><td>223062654</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">LastName</td><td>WHITE</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">FirstName</td><td>GREGORY</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">OrderTypeId</td><td>1</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">IssueTypeId</td><td>1</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">IssueDate</td><td>1/11/2007 12:00:00 AM</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseName</td><td> </td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseId</td><td>0001679306</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">CaseNum</td><td>0001679306</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">WeeklyDedAmt</td><td>15.00</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">WeeklyDedPct</td><td>55.00</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">MaxMonDedAmt</td><td>0.00</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">OriginalBalance</td><td>0.00</td>
</tr><tr align="left" valign="middle" style="color:#333333;background-color:#F7F6F3;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">LifeOfOrder</td><td>0</td>
</tr><tr align="left" valign="middle" style="color:#284775;background-color:White;font-size:X-Small;white-space:nowrap;">
<td align="left" valign="middle" style="background-color:#E9ECF1;font-size:Small;font-weight:bold;width:150px;white-space:nowrap;">DedExpDate</td><td>1/1/0001 12:00:00 AM</td>
</tr>
</table>
</div>

</div>
</td>
</tr>
</table>
</div>

</div>

<div
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBwL5ica2AQLIgsfhCgKojMF/AqiM9ZQGAoPm+eMMAoPm7cYHAoPmmboBzmXMwzecNn5uwbSob2JtclG3CR8=" />
</div
<script type="text/javascript">
<!--
Sys.Application.initialize();
// -->
</script>
</form>
</body>
</html


The "Sys is undefined" error asside, does your page do what you need it to do? ASP.NET creates that section of JavaScript, so for some reason the rest of the scripts are not being loaded.

Try looking at this post - http://forums.asp.net/p/1040236/1446560.aspx they had the same issues that you have.


Looks like it's related to anonymous user access. I'm checking into it now. Thanks!


Nevermind, this was it...

<httpHandlers>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>

Now I have a problem with the 'SelectedIndexChanged' event. It's executing code that sets the DataSource of the DetailsView Control and then calls the DataBind() method again and it's not doing anything on the page. Any idea why?


I did some more research and it looks like the ListItem.Selected value isn't being set when I click on that item in the list. Why is this? The DataSource for my ListBox is an array of user-defined objects and the DataTextField is set to the name of one of the properties in the object. This is my code in the 'SelectedIndexChanged' event on the ListBox...

int index = 0;

foreach (ListItem i in orderListBox.Items) {
if (orderListBox.Items[index].Selected) {
loadDetails(index);
}
index++;
}

None of the items in the ListBox are 'Selected'.


It's working now. Not sure what I did though :)


I'm glad you got it working :)


Ok, now it stopped working and I have no idea why. The 'SelectedIndexChanged' event is firing, but none of the items in the ListBox are 'Selected' in the Item array. Help?


Do you have code that is interacting with the listbox at all? Any javascript?

Changing anything on the listbox (Clicking on an option in it or having an option chance) will invoke taht even.t


Not that I know of. Here's my code...

protected void orderListBox_SelectedIndexChanged(object sender, EventArgs e) {
int index = 0;

foreach (ListItem i in orderListBox.Items) {
if (orderListBox.Items[index].Selected && orderListBox.SelectedIndex != selectedIndex) {
loadDetails(index);
}
index++;
}
}

private void loadDetails(int listIndex) {
OrderInfo tmpOrderInfo = new OrderInfo();

try {
pdfButton.Attributes.Remove("OnClick");
pdfButton.Attributes.Add("OnClick", "javascript:window.open('OrderView.aspx?id=" + orderInfo[listIndex].OrderId.ToString() + "')");

orderDetailsView.DataSource = tmpOrderInfo.GetOrderInfo(orderInfo[listIndex]);
orderDetailsView.DataBind();
} catch (Exception ex) {
string tmp = ex.Message;
}
}