ajax timercontrols: animation

Monday, March 26, 2012

Treeview programatically populated with webservice

I'm trying to display a loading animation and background color while a treeview is populated by a webservice. I'm implementing the ajax incremental display pattern by just loading a div for a menu and the Loading animation in it's own div at the start. The java script calls a ajax web service to programmatically populate a treeview which I want to display in the menu div. The only thing I don't know how to do is get the populated Treeview control from the webservice to the actual website.

Here is my javascript located in the head of the menu.aspx page:

<script type="text/javascript" language="JavaScript">
<!--
 function pageLoad() {
 MenuService.LoadMenu(OnComplete,OnTimeOut,OnError);
 } function OnComplete(result){
 document.getElementById("menuLoad").style.display="none";//erases loading Message
 }
 function OnTimeOut(result){
 alert("Timeout")
 }
 function OnError(result){
 alert("Error")
 }
 // --></script>

 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
 <Services>
 <asp:ServiceReference Path="MenuService.asmx" />
 </Services>
 </asp:ScriptManager>
 <div id="menuLoad"><IMG src="Resources/Images/ajax-loader-Menu.gif" /> Loading Menu...</div>
 <div id="menu">
 </div>
 </form>

Can anyone help with my problem? I doubt it is too complex, I'm just very new at using Ajax and web services. Should me web service return the treeview? or what? Is there a better way to do what I'm intending?

Thanks for the help in advance class='cmt'>//erases loading Message } function OnTimeOut(result){ alert("Timeout") } function OnError(result){ alert("Error") }// -->

I found any easier way to do this which out having to use a webservice, It initially loads a Page that Contains the Loading message and graphic and then using javascript to load the actual menu which is a completely different aspx page. The new page just loads the nodes of the treeview in the code behind.

MenuLoading.aspx:

<head runat="server"> <title>Menu</title> <link href="Resources/Css/Site.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" language="JavaScript"><!-- function pageLoad() { document.location.href="Menu.aspx" } // --></script></head><body onload="pageLoad()"> <form id="form1" runat="server"> <div id="menuLoad"><IMG src="Resources/Images/ajax-loader-Menu.gif" /> Loading Menu...</div> </form></body>

menu.aspx:

 <head runat="server"> <title>Menu</title> <link href="Resources/Css/Site.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <div id="menu"> <asp:TreeView ID="TreeView1" runat="server" ExpandDepth="1" ImageSet="XPFileExplorer" ShowLines="True" NodeIndent="5" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged"> <HoverNodeStyle ForeColor="White" BackColor="#47678E" /> <LeafNodeStyle ImageUrl="Resources/Images/Grid.bmp" HorizontalPadding="2px" /> <NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black"/> </asp:TreeView> </div> </form></body>
 Hopefully I clearly explained my solution.

Trigger Animation

Like most of the ToolkitExtensions the AnimationExtension is connected to a TargetId, mostly a button.
But how could I trigger an animation in my codebehind. Say I check the text in a TextBox. How could I then start the animation. I triedRegisterStartupScript, but I can't get it right.

protectedvoid Button1_Click(object sender,EventArgs e)
{
if (TextBox1.Text == "")
{
//Show my animation
}
}

Seconded!!

Yes, god please, someone tell me how this is done.

Alternatively, tell us how to get the IDs of server controls into ConditionScript.

Hi Marinus/Mattias,

I think the best thing to do, as Mattias suggests, is to use theConditionAnimation. This will let you decide whether or not to play the animation by running a little bit of JavaScript. Assuming yourTextBox has anID="TextBox1" (and isn't in anaming container - but if it is, then itsClientID, which is the munged ID of your server control when written to the client, will look something likectl00_MyPanel1_TextBox1), you could define your animation as:
.
.
.
<Animations>
<OnClick>
<%-- Compared TextBox1.value to 2 single quote signs, not a double quote, to see if it's empty --%>
<Condition ConditionScript="$('TextBox1').value == ''">
.
. <%-- Original animation markup here --%>
.
</Condition>
</OnClick>
</Animations>
.
.
.

If you really do want to invoke the animation from the server, then you could emit code server side to interact with the Toolkit (as discussed inthis post) that will play the animation (as discussedhere - and each animation, likeOnClick,OnMouseOver, etc., has it's own function you can call to invoke it). If this doesn't answer your question, please keep posting.

Thanks,
Ted

Thanks for your answer Ted, I will read the posts and try it out.

Ted,
In the post about the ModalPopupExtender you wrote:
"Again, we're looking at making this a LOT easier with updates in our next release."
And yes, in the next release of the toolkit it was much easier. Now you just could write in your code behind:

ModalPopupProperties popup = MyModalExtender.GetTargetProperties(Target);
popup.Show();

Great!
Does the AnimationExtender has something alike?

Hi Marinus,

TheAnimationExtender doesn't have support for playing animations from the server (mostly because they're meant to be triggered from the client and it's a little weird to suggest that while the page was posting back your mouse hovered over a certain control). Another route you might look into iscreating the OnLoad animation on the server because that will automatically play once you post back.

Thanks,
Ted

Hi Ted,

I'm not 100% sure I understand your answer. Will the code below work if the TextBox is in a naming container (and therefore has that long munged ClientID) or not? If not, how do I make it work, because TextBoxes are almost always in naming containers in any reasonably complex application. I havent figured out how the heck to get the ClientID into theConditionScriptattribute of theConditiontag.

/Mattias

Ted Glaza [MSFT]:

Hi Marinus/Mattias,

Thanks,
Ted

Hi Mattias,

No, the code example you were quoting wouldn't work if you had aTextBox in anINamingContainer. We'd like to make some improvements for scenarios like this in the future, but for now there is a workaround available. You can programatically modify the animations on the server like this:

<%@. Page Language="C#" %>
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
 protected override void OnLoad(EventArgs e)
 {
 base.OnLoad(e); // Set the ConditionScript property of the OnClick Animation
 MyAnimations.OnClick.Properties["ConditionScript"] = string.Format("( $('{0}').value == '' )", txtName.ClientID);
 // Set the AnimationTarget property of the OnClick Animation's first child
 MyAnimations.OnClick.Children[0].Properties["AnimationTarget"] = txtName.ClientID;
 }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server"><title>Test Page</title></head>
<body><form runat="server"><div>
 <atlas:ScriptManager id="ScriptManager" runat="server" />
 Name: <asp:TextBox ID="txtName" runat="server" /><br />
 <asp:Button ID="btnValidate" runat="server" Text="Animate If Empty" OnClientClick="return false;" /
 <atlasToolkit:AnimationExtender ID="MyExtender" runat="server">
 <atlasToolkit:AnimationProperties ID="MyAnimations" TargetControlID="btnValidate">
 <Animations>
 <OnClick>
 <Condition ConditionScript="/* To be filled in by the server - we'll default to false */ false">
 <Color Duration="1" StartValue="#FFFFFF" EndValue="#FF0000"
 Property="style" PropertyKey="backgroundColor" />
 </Condition>
 </OnClick>
 </Animations>
 </atlasToolkit:AnimationProperties>
 </atlasToolkit:AnimationExtender>
</div></form></body>
</html>

Thanks,
Ted

Monday, March 26, 2012

Treeview programatically populated with webservice

Trigger Animation

ajax timercontrols

Blog Archive

About Me