Wednesday, March 28, 2012

dynamic AnimationExtender

I have a list of users in a database and I want to return the list of users to an aspx page with a user icon. I then want to have an ajaxToolkit:AnimationExtender attached to each icon. I have the ajaxToolkit:AnimationExtender working for a single image on a page with all of the script code in the markup. How do I at runtime set a ajaxToolkit:AnimationExtender for each icon.

Thanks

OK,

I have been playing with the toolkit sample code to try and make it OO to some degree. Here is what I have:

3 functions

1 to make the flyout panel,1 to make the onclick open animation and 1 to make the onclick close animation.

I can make the the first to work but I am having trouble with the last one becuase the sample code uses a asp:linkbutton to close the animation. When I try and build it from code/html it is not being converted into a control and the close animation can't find it's targetcontrol id.

here is the flyout panel:

publicstring BuildAnimationPopup(string inPopUpHTML ,outstring flyout,outstring info,outstring btnCloseParent,outstring close)

{

System.Text.StringBuilder sb =new System.Text.StringBuilder();

flyout ="flyout" +DateTime.Now.Millisecond.ToString(); //just to make it unique

info ="info" +DateTime.Now.Millisecond.ToString(); //just to make it unique

btnCloseParent ="btnCloseParent" +DateTime.Now.Millisecond.ToString(); //just to make it unique

close ="btnClose" +DateTime.Now.Millisecond.ToString(); //just to make it unique

//<!-- "Wire frame" div used to transition from the button to the info panel -->

sb.Append("<div id='"+ flyout +"' style='display: none; overflow: hidden; z-index: 2; background-color: #FFFFFF; border: solid 1px #D0D0D0;'></div>");

//<!-- Info panel to be displayed as a flyout when the button is clicked -->

sb.Append("<div id='"+info+"' style='display: none; ; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; padding: 5px;'>");

sb.Append("<div id='"+btnCloseParent+"' style='float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);'>");

//sb.Append("<asp:LinkButton id='"+close +"' runat='server' OnClientClick='return false;' Text='X' ToolTip='Close' Style='background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;' />");

sb.Append("<a onclick='return false;' runat='server' id='"+close+"' title='Close' style='background-color: #666666; color: #FFFFFF; text-align: center; font-weight: bold; text-decoration: none; border: outset thin #FFFFFF; padding: 5px;'>X</a>");

sb.Append("</div>");

sb.Append("<div>");

sb.Append(inPopUpHTML);

sb.Append("</div>");

sb.Append("</div>");

return sb.ToString();

}

As you can see I have tried it both ways, using an asp:linkbutton and a plain old <a> with the runat=server tag but the Ajax control still can't find it.

Any thoughts?

No comments:

Post a Comment