Programatically Create Tab Container and Tab Panels

Hi,

How can I create a tab container and subsequent tab panels within it using C# in the code behind?

Any help would be much appreciated.

Hello,

You can you the PlaceHolder Control to add the TabContainer on the page, like so: make sure to add the reference at the top - using AjaxControlToolkit;

 TabContainer container =new TabContainer(); TabPanel panel1 =new TabPanel(); TabPanel panel2 =new TabPanel(); TextBox txtOne =new TextBox(); txtOne.ID ="txtOne"; txtOne.Text ="Example Text"; panel1.HeaderText ="This is Header 1 Text"; panel1.Controls.Add(txtOne); panel2.HeaderText =" This is Header 2 Text"; container.Tabs.Add(panel1); container.Tabs.Add(panel2); PlaceHolder1.Controls.Add(container);

Hope this helps. 

Yep that was perfect...thanks for this!

Programmatically Create AnimationExtender

I have not found any previous posts addressing this issue. I need to create an AnimationExtender programmatically from the code behind. Does anyone know how to do this? For instance using the example provided on the Toolkit page:

1<ajaxToolkit:AnimationExtender id="ace" runat="server" TargetControlID="btnHelp">2 <Animations>3 <OnLoad><OpacityAction AnimationTarget="info" Opacity="0" /></OnLoad>4 <OnClick>5 <Sequence>6 <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/>7 <Parallel AnimationTarget="flyout" Duration=".3" Fps="25">8 <Move Horizontal="150" Vertical="-50" />9 <Resize Width="260" Height="280" />10 <Color AnimationTarget="flyout" StartValue="#AAAAAA" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" />11 </Parallel>12 <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" />13 <StyleAction AnimationTarget="info" Attribute="display" Value="block"/>14 <FadeIn AnimationTarget="info" Duration=".2"/>15 <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/>16 <StyleAction AnimationTarget="info" Attribute="height" value="auto" />17 <Parallel Duration=".5">18 <Color AnimationTarget="info" StartValue="#666666" EndValue="#FF0000" Property="style" PropertyKey="color" />19 <Color AnimationTarget="info" StartValue="#666666" EndValue="#FF0000" Property="style" PropertyKey="borderColor" />20 </Parallel>21 <Parallel Duration=".5">22 <Color AnimationTarget="info" StartValue="#FF0000" EndValue="#666666" Property="style" PropertyKey="color" />23 <Color AnimationTarget="info" StartValue="#FF0000" EndValue="#666666" Property="style" PropertyKey="borderColor" />24 <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" />25 </Parallel>26 </Sequence>27 </OnClick>28 </Animations>29 </ajaxToolkit:AnimationExtender>30 <ajaxToolkit:AnimationExtender id="AnimationExtender1" runat="server" TargetControlID="btnClose">31 <Animations>32 <OnClick>33 <Sequence>34 <StyleAction AnimationTarget="info" Attribute="overflow" Value="hidden"/>35 <Parallel AnimationTarget="info" Duration=".3" Fps="15">36 <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />37 <FadeOut />38 </Parallel>39 <StyleAction AnimationTarget="info" Attribute="display" Value="none"/>40 <StyleAction AnimationTarget="info" Attribute="width" Value="250px"/>41 <StyleAction AnimationTarget="info" Attribute="height" Value=""/>42 <StyleAction AnimationTarget="info" Attribute="fontSize" Value="12px"/>43 <StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" />44 <StyleAction AnimationTarget="btnCloseParent" Attribute="filter" value="alpha(opacity=0)" />4546 </Sequence>47 </OnClick>48 <OnMouseOver>49 <Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" />50 </OnMouseOver>51 <OnMouseOut>52 <Color Duration=".2" EndValue="#FFFFFF" StartValue="#FF0000" Property="style" PropertyKey="color" />53 </OnMouseOut>54 </Animations>55 </ajaxToolkit:AnimationExtender>

How would you create this AnimationExtender from a code behind? I am using VB.NET, but generally I have no problem reading and converting C# code.

You can add the Animation Extender programmatically like this

<script runat="server">
void Page_Load()
{
AjaxControlToolkit.AnimationExtender ace = new AjaxControlToolkit.AnimationExtender();
ace.TargetControlID = 'control id'

ace.Animations = 'the actual animation that has to appear'

Page.Controls.AddAt(0,ace);
}
</script>

For more information please look at this url

http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=7408

Sorry for the lateness of this reply. I figured out how to do it through the code behind. You basically just write the XML for the behaviors into a string builder then create a new Animation Extender and assing the XML to the .Animations property.

if possible, can you share the code?

thanks

It has been a while since I did this. I got it to work, but did not end up using it as you can only have a few on a page before it starts to really affect the load time of the page. Just to make things a little clearer, and please remeber I am pulling this from memory, sbScript contains the JS for positioning the popup. sbOpen contains the XML for the opening animation. I did not include the closing since it is a little redundant.

1Protected Sub Page_PreRender(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.PreRender2Dim _aeOpenAs New AjaxControlToolkit.AnimationExtender3Dim sbOpenAs New StringBuilder4Dim sbScriptAs New StringBuilder5Dim _ibHelpAs New ImageButton67 sbScript.AppendLine("<script type=""text/javascript"" language=""javascript"">")8 sbScript.AppendLine(" function Cover(bottom, top, ignoreSize) {")9 sbScript.AppendLine(" var location = Sys.UI.DomElement.getLocation(bottom);")10 sbScript.AppendLine(" top.style.position ='absolute';")11 sbScript.AppendLine(" top.style.top = location.y +'px';")12 sbScript.AppendLine(" top.style.left = location.x +'px';")13 sbScript.AppendLine(" if (!ignoreSize) {")14 sbScript.AppendLine(" top.style.height = bottom.offsetHeight +'px';")15 sbScript.AppendLine(" top.style.width = bottom.offsetWidth +'px';")16 sbScript.AppendLine(" }")17 sbScript.AppendLine(" }")18 sbScript.AppendLine("</script>")19 Response.Write(sbScript.ToString)2021 _ibHelp.ID = "ibHelp"22 _ibHelp.OnClientClick = "return false;"23 _ibHelp.ImageUrl = "/admin/images/buttons/help.png"24 _ibHelp.ToolTip = "ClickFor Help"25 phAnimation.Controls.Add(_ibHelp)2627 sbOpen.Append("<OnLoad><OpacityAction AnimationTarget=""info")28 sbOpen.Append(Me.ID)29 sbOpen.AppendLine(""" Opacity=""0"" /></OnLoad>")3031 sbOpen.AppendLine("<OnClick>")32 sbOpen.AppendLine("<Sequence>")3334 sbOpen.Append("<ScriptAction Script=""Cover($get('")35 sbOpen.Append(_ibHelp.ClientID)36 sbOpen.Append("'), $get('flyout")37 sbOpen.Append(Me.ID)38 sbOpen.AppendLine("'));"" />")394041 sbOpen.Append("<StyleAction AnimationTarget=""flyout")42 sbOpen.Append(Me.ID)43 sbOpen.AppendLine(""" Attribute=""display"" Value=""block""/>")4445 sbOpen.Append("<Parallel AnimationTarget=""flyout")46 sbOpen.Append(Me.ID)47 sbOpen.AppendLine(""" Duration="".3"" Fps=""25"">")4849 sbOpen.AppendLine("<Move Horizontal=""150"" Vertical=""-50"" />")50 sbOpen.Append("<Resize Width300"" Height=""300"" />")5152'sbOpen.Append("<Color AnimationTarget=""flyout")53 'sbOpen.Append(Me.ID)54 'sbOpen.AppendLine(""" StartValue=""#AAAAAA"" EndValue=""#FFFFFF"" Property=""style"" PropertyKey=""backgroundColor"" />")55 'sbOpen.AppendLine("</Parallel>")5657 sbOpen.Append("<ScriptAction Script=""Cover($get('flyout")58 sbOpen.Append(Me.ID)59 sbOpen.Append("'), $get('info")60 sbOpen.Append(Me.ID)61 sbOpen.AppendLine("'), true);"" />")6263 sbOpen.Append("<StyleAction AnimationTarget=""info")64 sbOpen.Append(Me.ID)65 sbOpen.AppendLine(""" Attribute=""display"" Value=""block""/>")666768 sbOpen.Append("<FadeIn AnimationTarget=""info")69 sbOpen.Append(Me.ID)70 sbOpen.AppendLine(""" Duration="".2""/>")7172 sbOpen.Append("<StyleAction AnimationTarget=""flyout")73 sbOpen.Append(Me.ID)74 sbOpen.AppendLine(""" Attribute=""display"" Value=""none"" />")7576 sbOpen.Append("<StyleAction AnimationTarget=""info")77 sbOpen.Append(Me.ID)78 sbOpen.AppendLine(""" Attribute=""height"" Value=""auto""/>")7980 sbOpen.AppendLine("<Parallel Duration="".5"">")81 sbOpen.Append("<Color AnimationTarget=""info")82 sbOpen.Append(Me.ID)83 sbOpen.AppendLine(""" StartValue=""#666666"" EndValue=""#FF0000"" Property=""style"" PropertyKey=""color""/>")84 sbOpen.Append("<Color AnimationTarget=""info")85 sbOpen.Append(Me.ID)86 sbOpen.AppendLine(""" StartValue=""#666666"" EndValue=""#FF0000"" Property=""style"" PropertyKey=""borderColor""/>")87 sbOpen.AppendLine("</Parallel>")888990 sbOpen.AppendLine("<Parallel Duration="".5"">")91 sbOpen.Append("<Color AnimationTarget=""info")92 sbOpen.Append(Me.ID)93 sbOpen.AppendLine(""" StartValue=""#FF0000"" EndValue=""#666666"" Property=""style"" PropertyKey=""color""/>")94 sbOpen.Append("<Color AnimationTarget=""info")95 sbOpen.Append(Me.ID)96 sbOpen.AppendLine(""" StartValue=""#FF0000"" EndValue=""#666666"" Property=""style"" PropertyKey=""borderColor""/>")97 sbOpen.Append("<FadeIn AnimationTarget=""btnCloseParent")98 sbOpen.Append(Me.ID)99 sbOpen.AppendLine(""" MaximumOpacity="".9"" />")100 sbOpen.AppendLine("</Parallel>")101102 sbOpen.AppendLine("</Sequence>")103 sbOpen.AppendLine("</OnClick>")104105 _aeOpen.ID = "aeOpen"106 _aeOpen.TargetControlID = "ibHelp"107 _aeOpen.Animations = sbOpen.ToString108109 phAnimation.Controls.Add(_aeOpen)110End Sub

crLord, thanks for your reply.

here is what i have in my .ascx html code

ps: i want to put everything on the codebehind but not sure if that possible to do, can you please see my code and give your feedback?

thanks

here is my code:

<%@. Control Language="C#" AutoEventWireup="true" CodeFile="AJAXPopUp.ascx.cs" Inherits="usercontrols_AJAXPublicInfo" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><div style="width: 200px"><!-- Button used to launch the animation--> <asp:ImageButton ID="btnInfo" runat="server" OnClientClick="return false;" ImageUrl="~/images/popup_info.gif" AlternateText="Show Detail Information..." /> <div id="flyout" style="display: none; overflow: hidden; z-index: 2; background-color: #ffff66; border: solid 1px #D0D0D0;"></div><!-- Info panel to be displayed as a flyout when the button is clicked --> <div id="info" style="display: none; z-index: 2; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); font-size: 12px; background-color: #ffffcc; padding: 5px; border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid;"> <div id="btnCloseParent" style="float: right; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);"> <asp:LinkButton ID="btnClose" 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;" /> </div> <div style="width: 300px"><!-- BEGIN: Here you can place your content. --> <table id="tblPublicInfo" border="1" style="width: 320px; background-color: AntiqueWhite"> <tr> <td> <b> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </b> </td> </tr> </table><!-- END: of the content. --> </div> </div> <script type="text/javascript" language="javascript"> // Move an element directly on top of another element (and optionally // make it the same size). // The location of the popup can be set in here. function Cover(bottom, top, ignoreSize) { var location = Sys.UI.DomElement.getLocation(bottom); top.style.position = 'absolute'; top.style.top = location.y + 'px'; top.style.left = location.x + 'px'; if (!ignoreSize) { top.style.height = bottom.offsetHeight + 'px'; top.style.width = bottom.offsetWidth + 'px'; } } </script> <ajaxToolkit:AnimationExtender ID="OpenAnimation" runat="server" TargetControlID="btnInfo"> <Animations> <OnClick> <Sequence> <%-- Disable the button so it can't be clicked again --%> <EnableAction Enabled="false" /> <%-- Position the wire frame on top of the button and show it --%> <ScriptAction Script="Cover($get('AJAXPopUp1_btnInfo'), $get('flyout'));" /> <StyleAction AnimationTarget="flyout" Attribute="display" Value="block"/> <%-- Move the wire frame from the button's bounds to the info panel's bounds --%> <Parallel AnimationTarget="flyout" Duration=".3" Fps="25"> <Move Horizontal="150" Vertical="-10" /> <Resize Width="300" /> <Color PropertyKey="backgroundColor" StartValue="#AAAAAA" EndValue="#FFFFFF" /> </Parallel> <%-- Move the info panel on top of the wire frame, fade it in, and hide the frame --%> <ScriptAction Script="Cover($get('flyout'), $get('info'), true);" /> <StyleAction AnimationTarget="info" Attribute="display" Value="block"/> <FadeIn AnimationTarget="info" Duration=".2"/> <StyleAction AnimationTarget="flyout" Attribute="display" Value="none"/> <StyleAction AnimationTarget="info" Attribute="filter" Value="progid:DXImageTransform.Microsoft.Shadow(direction=140,color=#666666,strength=4);"/> <%-- Flash the text/border red and fade in the "close" button --%> <Parallel AnimationTarget="info" Duration=".1"> <%-- PropertyKey="color" StartValue="#666666" EndValue="#FF0000" />--%> <Color PropertyKey="borderColor" StartValue="#666666" EndValue="#FF0000" /> </Parallel> <Parallel AnimationTarget="info" Duration=".1"> <%-- PropertyKey="color" StartValue="#FF0000" EndValue="#666666" />--%> <Color PropertyKey="borderColor" StartValue="#FF0000" EndValue="#666666" /> <FadeIn AnimationTarget="btnCloseParent" MaximumOpacity=".9" /> </Parallel> </Sequence> </OnClick> </Animations> </ajaxToolkit:AnimationExtender> <ajaxToolkit:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="btnClose"> <Animations> <OnClick> <Sequence AnimationTarget="info"> <%-- Shrink the info panel out of view --%> <StyleAction Attribute="overflow" Value="hidden"/> <Parallel Duration=".3" Fps="15"> <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" /> <FadeOut /> </Parallel> <%-- Reset the sample so it can be played again --%> <StyleAction Attribute="display" Value="none"/> <StyleAction Attribute="width" Value="300px"/> <StyleAction Attribute="height" Value=""/> <StyleAction Attribute="fontSize" Value="12px"/> <OpacityAction AnimationTarget="btnCloseParent" Opacity="0" /> <%-- Enable the button so it can be played again --%> <EnableAction AnimationTarget="AJAXPopUp1_btnInfo" Enabled="true" /> </Sequence> </OnClick> <OnMouseOver> <Color Duration=".2" PropertyKey="color" StartValue="#FFFFFF" EndValue="#FF0000" /> </OnMouseOver> <OnMouseOut> <Color Duration=".2" PropertyKey="color" StartValue="#FF0000" EndValue="#FFFFFF" /> </OnMouseOut> </Animations> </ajaxToolkit:AnimationExtender> </div>

what isphAnimation?

My control was done in the code behind almost exclusively. I only had design elements in the .ascx. phAnimation is a PlaceHolder so I could add the controls. Here is my .ascx file. There are some things that were refernced for various reasons in my code behind like"lblHelpItemTitle" but I did include them in the above code for brevity. All they are, are controls tied to public properties of the control so I can assign their values based on what I wanted in that particular instance. Also the script code should only be added once to the page, but that should be fairly easy now with the new stuff for registering JS in 2.0. Response.Write is probably not the way to go anymore, but it sloved the problem then. I had orginally had a public property that was a boolean telling me if this was the first instance of the control on the page and if it was I included the script.

1<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>23 <div>4 <div id="flyout<%=Me.ID%>" style="z-index:2;display: none; border: solid 1px #D0D0D0; background-color: #FFFFFF;overflow:hidden;"> </div>5 <div id="info<%=Me.ID%>" style="z-index:2;display: none; font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; width: 260px;">6 <div class="HelpItemTitleBar">7 <div class="HelpItemTitle">8 <asp:Label ID="lblHelpItemTitle" runat="server" />9 </div>10 <div class="HelpItemClose" id="btnCloseParent<%=Me.ID%>">11 <asp:LinkButton id="lbClose" runat="server" OnClientClick="return false;" Text="X" ToolTip="Close" />12 </div>13 </div>14 <div class="HelpItemText">15 <asp:Label ID="lblHelpText" runat="server" />16 </div>17 </div>18 </div>19 <asp:PlaceHolder id="phAnimation" runat="server" />

just to understand the code, i have implement your code in my test page and no errors found and why i run the page here is what i got:

Invalid Animation definition for TargetControlID="ibHelp": Name cannot begin with the '0' character, hexadecimal value 0x30. Line 1, position 82.

_aeOpen.Animations = sbOpen.ToString(); <<<<<<error

also i replace:
//Response.Write(sbScript.ToString);
this.Page.ClientScript.RegisterClientScriptBlock(GetType(),"OnClick", sbScript.ToString());

here is the complete code for your reference:

<%@.ControlLanguage="C#"AutoEventWireup="true"CodeFile="WebUserControl.ascx.cs"Inherits="usercontrols_WebUserControl" %><%@.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="ajaxToolkit" %>

<div>

<divid="flyout<%=this.ID%>"style="z-index:2;display: none; border: solid 1px #D0D0D0; background-color: #FFFFFF;overflow:hidden;"></div>

<divid="info<%=this.ID%>"style="z-index:2;display: none; font-size: 12px; border: solid 1px #CCCCCC; background-color: #FFFFFF; width: 100px; height: 34px;">

<divclass="HelpItemTitleBar">

<divclass="HelpItemTitle">

<asp:LabelID="lblHelpItemTitle"runat="server"/>

</div>

<divclass="HelpItemClose"id="btnCloseParent<%=this.ID%>">

<asp:LinkButtonid="lbClose"runat="server"OnClientClick="return false;"Text="X"ToolTip="Close"/>

</div>

</div>

<divclass="HelpItemText">

<asp:LabelID="lblHelpText"runat="server"/>

</div>

</div>

</div>

<asp:PlaceHolderid="phAnimation"runat="server"/>

code behind:

using System;using System.Data;using System.Configuration;using System.Collections;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.Text;public partialclass usercontrols_WebUserControl : System.Web.UI.UserControl{protected override void Render(HtmlTextWriter writer) { AjaxControlToolkit.AnimationExtender _aeOpen =new AjaxControlToolkit.AnimationExtender(); StringBuilder sbOpen =new StringBuilder(); StringBuilder sbScript =new StringBuilder(); ImageButton _ibHelp =new ImageButton(); sbScript.AppendLine("<script type='text/javascript' language='javascript'>"); sbScript.AppendLine(" function Cover(bottom, top, ignoreSize) {"); sbScript.AppendLine(" var location = Sys.UI.DomElement.getLocation(bottom);"); sbScript.AppendLine(" top.style.position = 'absolute';"); sbScript.AppendLine(" top.style.top = location.y + 'px';"); sbScript.AppendLine(" top.style.left = location.x + 'px';"); sbScript.AppendLine(" if (!ignoreSize) {"); sbScript.AppendLine(" top.style.height = bottom.offsetHeight + 'px';"); sbScript.AppendLine(" top.style.width = bottom.offsetWidth + 'px';"); sbScript.AppendLine(" }"); sbScript.AppendLine(" }"); sbScript.AppendLine("</script>");//Response.Write(sbScript.ToString);this.Page.ClientScript.RegisterClientScriptBlock(GetType(),"OnClick", sbScript.ToString()); _ibHelp.ID ="ibHelp"; _ibHelp.OnClientClick ="return false;"; _ibHelp.ImageUrl ="/admin/images/buttons/help.png"; _ibHelp.ToolTip ="Click For Help"; phAnimation.Controls.Add(_ibHelp); sbOpen.Append("<OnLoad><OpacityAction AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Opacity='0' /></OnLoad>"); sbOpen.AppendLine("<OnClick>"); sbOpen.AppendLine("<Sequence>"); sbOpen.Append("<ScriptAction Script='Cover($get('"); sbOpen.Append(_ibHelp.ClientID); sbOpen.Append("'), $get('flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine("'));' />"); sbOpen.Append("<StyleAction AnimationTarget='flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='display' Value='block'/>;"); sbOpen.Append("<Parallel AnimationTarget='flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Duration='.3' Fps='25'>"); sbOpen.AppendLine("<Move Horizontal='150' Vertical='-50' />"); sbOpen.Append("<Resize Width300' Height='300' />");//'sbOpen.Append("<Color AnimationTarget='flyout") //'sbOpen.Append(Me.ID) //'sbOpen.AppendLine('" StartValue='#AAAAAA' EndValue='#FFFFFF' Property='style' PropertyKey='backgroundColor' />") //'sbOpen.AppendLine("</Parallel>") sbOpen.Append("<ScriptAction Script='Cover($get('flyout"); sbOpen.Append(this.ID); sbOpen.Append("'), $get('info"); sbOpen.Append(this.ID); sbOpen.AppendLine("'), true);' />"); sbOpen.Append("<StyleAction AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='display' Value='block'/>"); sbOpen.Append("<FadeIn AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Duration='.2'/>"); sbOpen.Append("<StyleAction AnimationTarget='flyout"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='display' Value='none' />"); sbOpen.Append("<StyleAction AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" Attribute='height' Value='auto'/>"); sbOpen.AppendLine("<Parallel Duration='.5'>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#666666' EndValue='#FF0000' Property='style' PropertyKey='color'/>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#666666' EndValue='#FF0000' Property='style' PropertyKey='borderColor'/>"); sbOpen.AppendLine("</Parallel>"); sbOpen.AppendLine("<Parallel Duration='.5'>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#FF0000' EndValue='#666666' Property='style' PropertyKey='color'/>"); sbOpen.Append("<Color AnimationTarget='info"); sbOpen.Append(this.ID); sbOpen.AppendLine(" StartValue='#FF0000' EndValue='#666666' Property='style' PropertyKey='borderColor'/>"); sbOpen.Append("<FadeIn AnimationTarget='btnCloseParent"); sbOpen.Append(this.ID); sbOpen.AppendLine(" MaximumOpacity='.9' />"); sbOpen.AppendLine("</Parallel>"); sbOpen.AppendLine("</Sequence>"); sbOpen.AppendLine("</OnClick>"); _aeOpen.ID ="aeOpen"; _aeOpen.TargetControlID ="ibHelp"; _aeOpen.Animations = sbOpen.ToString(); phAnimation.Controls.Add(_aeOpen); }}

Simple mistake. When you did the conversion you did not carry over the closing quote of some of the fields. For Example you have:

sbOpen.Append("<OnLoad><OpacityAction AnimationTarget='info");
sbOpen.Append(this.ID);
sbOpen.AppendLine(" Opacity='0' /></OnLoad>");

And It Should Be:

sbOpen.Append("<OnLoad><OpacityAction AnimationTarget='info");
sbOpen.Append(this.ID);
sbOpen.AppendLine("' Opacity='0' /></OnLoad>");

It is hard to see, but I added a closing quote before Opacity.

One more thing. If you plan to use more than one of these on any given page you will want to wrap the RegisterClientScript inside a conditional checking IsClientScriptRegistered.

thank you so much

one last question.

i'm planning to use the same usercontrol more then one in page

you mean this code should be wrap? like this?

if(!Page.IsClientScriptRegistered("myscript"))
{
sbScript.AppendLine("<script type='text/javascript' language='javascript'>");
sbScript.AppendLine(" function Cover(bottom, top, ignoreSize) {");
sbScript.AppendLine(" var location = Sys.UI.DomElement.getLocation(bottom);");
sbScript.AppendLine(" top.style.position = 'absolute';");
sbScript.AppendLine(" top.style.top = location.y + 'px';");
sbScript.AppendLine(" top.style.left = location.x + 'px';");
sbScript.AppendLine(" if (!ignoreSize) {");
sbScript.AppendLine(" top.style.height = bottom.offsetHeight + 'px';");
sbScript.AppendLine(" top.style.width = bottom.offsetWidth + 'px';");
sbScript.AppendLine(" }");
sbScript.AppendLine(" }");
sbScript.AppendLine("</script>");
//Response.Write(sbScript.ToString);
this.Page.ClientScript.RegisterClientScriptBlock(GetType(),"myscript", sbScript.ToString());

}

.

Yes. Otherwise you will get an error. Also I do not know if the AJAX toolkit has been improved in the latest version, but when I was using it it seemed that it added the animation scripts for each instance and after about 20 or so of these controls on a page the load time really slowed down. I would be interested to here how you fair if you do many on one page.

speed to me looks like good, i did not put any stuffs in it. may be.

but after implementingIsClientScriptRegistered i'm still getting the same data of a previous a previous and its not throwing me any error.

any idea?

i change the above code to something like this but still same problem:

if (!this.Page.ClientScript.IsClientScriptBlockRegistered("rb-popup"))
{
this.Page.ClientScript.RegisterClientScriptBlock("rb-popup","js/JScript.js"
}

I don't understand the problem. Are you saying you have multiple controls but with the same data over and over? If so post the control code and the code for the page calling and I will see if I can find the problem.

Programmatically creating OpacityBehavior

How can I programmatically create a opacitybehavior and attach it to a control and set its opacity value ?

Following doesnt seem to work in both IE and firefox? I changed the order of initialize() in my following code, it still doesnt work.

function setOpacity()

{

varp_lightgreendiv =new Sys.UI.Control($('lightgreendiv'));

var a =new Sys.UI.OpacityBehavior() ;

a.set_value(0.1) ;

p_lightgreendiv.get_behaviors().add(a) ;

p_lightgreendiv.initialize() ;

a.initialize() ;

}

Thanks

Indo.

Hi,

I've answered to this threadhere.

Thanks it works! I dont know what i am doing wrong in my example.

~Indo.

Programmatically creating UpdatePanel and creating Triggers

I'm connecting to a database to get a number then using a for loop to create multiple sets of controls. I'm generating a textbox (which happens to use an AutoCompleteExtender) then adding an EventHandler for that text box which updates a RadioButtonList by connecting to a database. I'm rendering the RadioButtonList in a new UpdatePanel control. Then I'm using the .RegisterAsyncPostBackControl() method for my scriptmanager to get async postback for the new update panel.

The only way I could get the EventHandler to fire is if I manually set .AutoPostBack = true for the TextBox. I'm assuming this is why the whole page posts back instead of just the UpdatePanel.

I'm completely new to these Ajax tools. I'd like to figure out a way to make only the contents of the update panel (the RadioButtonList) to update instead of the entire page. Here's some of my code:

protectedvoid Page_Load(object sender,EventArgs e)

{

// Code to connect to the database to get a value for numCoupons...

for (i = 0; i < numCoupons; i++)

{

Panel pnl =newPanel();pnl.ID ="pnl_" + i;

defaultCoupons_pnl.Controls.Add(pnl);

TextBox couponTitle =newTextBox();

couponTitle.ID ="couponTitle_" + i;

pnl.Controls.Add(couponTitle);

couponTitle.AutoPostBack =true;

couponTitle.TextChanged +=newEventHandler(couponTitle_TextChanged);

AjaxControlToolkit.AutoCompleteExtender CouponSearch =new AjaxControlToolkit.AutoCompleteExtender();CouponSearch.ID ="cpnAutoComplete_" + i;

CouponSearch.TargetControlID = couponTitle.ID;

CouponSearch.ServicePath ="AutoComplete.asmx";

CouponSearch.ServiceMethod ="GetCompletionList";

pnl.Controls.Add(CouponSearch);

UpdatePanel descriptionChoices =newUpdatePanel();descriptionChoices.ID ="couponChoices_" + i;

pnl.Controls.Add(descriptionChoices);

ScriptManager1.RegisterAsyncPostBackControl(couponTitle);

RadioButtonList descriptionList =newRadioButtonList();descriptionList.ID ="couponList_" + i;

descriptionChoices.ContentTemplateContainer.Controls.Add(descriptionList);

}a

}

protectedvoid couponTitle_TextChanged(object sender,EventArgs e)

{

// Code to connect to database and query results based on couponTitle entry...

string searchTerm = ((TextBox)sender).Text;findCoupon_objCmd.Parameters.Add(new SqlParameter("@dotnet.itags.org.searchTerm", searchTerm));

findCoupon_objConn.Open();

string couponNumber = ((TextBox)sender).ID.ToString().Replace("couponTitle_","");

SqlDataReader DR = findCoupon_objCmd.ExecuteReader();

RadioButtonList descriptionChoices = (RadioButtonList)defaultCoupons_pnl.FindControl("pnl_" + couponNumber).FindControl("couponChoices_" + couponNumber).FindControl("couponList_" + couponNumber);

descriptionChoices.DataSource = DR;

descriptionChoices.DataTextField ="description";

descriptionChoices.DataValueField ="allowedCouponId";

descriptionChoices.DataBind();

findCoupon_objConn.Close();

}

Hi,

You can seeCreating updatepanels at runtime? andIs it possible to add a ScriptManager and/or UpdatePanel to a MasterPage from a ContentPage dynaically? to find out how to Programmatically creating UpdatePanel.

Also seehttp://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx for the following section:

To add anUpdatePanel control to a page programmatically, you create a new instance of theUpdatePanel control. You then add controls to it by using theContentTemplateContainer property and theAdd(Control) method. Do not add controls directly to theContentTemplate property.

When anUpdatePanel control is added programmatically, only postbacks from controls in the same naming container as theUpdatePanel control can be used as triggers for the panel.

The following example shows how to programmatically add anUpdatePanel control to a page. The example adds aLabel and aButton control to the update panel by using theContentTemplateContainer property. Because theChildrenAsTriggers property istrue by default, theButton control acts as a trigger for the panel.

You cann't create Triggers Programmatically:

You can add anUpdatePanel control programmatically, but you cannot add triggers programmatically. To create trigger-like behavior, you can register a control on the page as an asynchronous postback control. You do this by calling theRegisterAsyncPostBackControl(Control) method of theScriptManager control. You can then create an event handler that runs in response to the asynchronous postback, and in the handler, call theUpdate() method of theUpdatePanel control.

Best Regards,

Programmatically Creating TabContainer and Adding Tabs

Plan - create a TabContainer via codebehind. Then read from a SQL DB (in this case NorthWind) and use the each CategoryName as a TabPanel.

Problem - Nothing displays. However, when I place TabContainer and TabPanel controls on the page during design, then run the code, I get the tabs with Category Names, but the first tab is the default name of the one I placed on the page during design.

Thoughts/suggestions?

Forgot to add the code (DUH):

Imports AjaxControlToolkit
Imports System.Data.SqlClient
Imports System.Configuration
Partial Class _Default
Inherits System.Web.UI.Page

Dim connectionString As String = "Data Source=MATT\SQLExpress;Initial Catalog=LucaSQL;Integrated Security=True;"
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If (Not Page.IsPostBack) Then
ReadCategories(connectionString)

End If
End Sub

Private Sub ReadCategories(ByVal connectionString As String)
Dim queryString As String = _
"SELECT CategoryID, CategoryName FROM dbo.Categories"

Using connection As New SqlConnection(connectionString)
Dim command As New SqlCommand(queryString, connection)
connection.Open()

Dim reader As SqlDataReader = command.ExecuteReader()
'Dim tc As New TabContainer

' Call Read before accessing data.
While reader.Read()
Dim CategoryName As String = reader("CategoryName")
Dim tab As New TabPanel
tab.HeaderText = CategoryName
tc.Tabs.Add(tab)

End While

' Call Close when done reading.
reader.Close()
End Using
End Sub
End Class

Hi,

In this case, you need to change its visibility with javascript. For example:

<%@. 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 Page_Load(object sender, EventArgs e)
 {
 for (int i = 0; i < 3; i++)
 {
 TabPanel tp = new TabPanel();
 tp.HeaderText = "tp" + i.ToString();
 tp.Controls.Add(new TextBox());
 TabContainer1.Tabs.Add(tp);
 }
 }
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Untitled Page</title>
<script type="text/javascript">
 function pageLoad()
 {
 $get("TabContainer1").style.visibility = "visible";
 }
 </script>
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<div>
 <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
 </ajaxToolkit:TabContainer>
 <br />
 <br />
 <br />
 <br />
</div>
</form
</body>
</html>

Programmically create ModalPopup

I have load data and show it in DataGridView control.
What can I do to archieve the following criteria:

When user click on a specific cell - it will bring up detail records in modalPopup extender control?

See forum posthttp://forums.asp.net/thread/1613190.aspx. It talks about PopupControl but you could use the same principle here.

Property value undefined after succesfull web service call

Hello,

hopefully I can explain my problem.

I started to create extended control with ajax control toolkit. Idea is, that I have textfield which works so

that it suggest values every time when user hits key. Like that --> http://www.google.com/webhp?complete=1&hl=en

Now in SearchTextBoxBehavior.js file I have two propertys, which one hold id for listbox which shows suggestions.
(I think in that google example, the control is span or div element.)

Ok, I have succesfully created event, which is occurred when user hits key in textfield. Webservice call is made in bold code line-->

1_onkeyup : function() {
23 var targetButton = $get(this._TargetButtonID);
4 var targetListBox = $get(this._TargetListBoxID);
5
6if(targetButton && targetListBox) {
7 targetButton.disabled =true;
8
9// unescape() convert′s a string to URL-encoded form10 var searchValue = unescape(this.get_element().value);
11
12if(searchValue !="") {
13// Set suggestion visible14 targetListBox.style.visibility ="visible";
15
16MyCompany.WebServices.MySearch.GetDataTableFromWebservice(searchValue,this._onSucceeded);
17 }
18else {
19// Set suggestion hidden when there is no search value inserted20 targetListBox.style.visibility ="hidden";
21 }
22 }
23
24 },
  

 
Web service call is succesfull, and returns into function:
 
1_onSucceeded : function(Result) {23var targetListBox = $get(this._TargetListBoxID);45var table = Sys.Preview.Data.DataTable.parseFromJson(Result);67...89}
 
Problem is, that in that _onSucceeded function, propertythis._TargetListBoxID is
undefined. In function, where I made web service call, the property was ok, and I could
make instance about control.
 
  

Hi,

you need to modify the context under which the callback is executed. This can be done with a delegate and the Function.createDelegate method:

MyCompany.WebServices.MySearch.GetDataTableFromWebservice(searchValue,Function.createDelegate(this, this._onSucceeded));

Hi,

it worked, thanks. :)

Yesterday evening I managed to circulate problem, with solution below.

1var inputParams =new Array();2inputParams[0] =this._TargetListBoxID;3inputParams[1] =this._TargetButtonID;4inputParams[2] =this._ListControlTextField;5inputParams[3] =this._ListControlValueField;67MyCompany.WebServices.MySearch.GetDataTableFromWebservice(searchValue,this._onSucceeded,this._onFailed, inputParams);

Hi,

yes, as your code shows, you're passing a context object as the last parameter to the proxy method. This is useful especially if you want to access only certain references in the callback and not the whole instance.

Hi All,

huygens...is there any way you can post your full code? I'm looking to do something similar with the toolkit. Would be greatly appreciated.