programmatically add calendarextender

hey all,

is this possible to attach a calendarextender control to a textbox? i'm trying to build all my controls dynamically and i'm having problems with postback/async callback behavior. Mainly not understanding what's going on? anyone have any good references on how to do this? That is, build all controls dynamically with some ajax mixed in?

thanks,

rodchar

rodchar:

is this possible to attach a calendarextender control to a textbox? i'm trying to build all my controls dynamically and i'm having problems with postback/async callback behavior. Mainly not understanding what's going on? anyone have any good references on how to do this? That is, build all controls dynamically with some ajax mixed in?

You certainly can do that.

You will just have to create an instance of the calendarextender, assign it the textbox id to its targetcontrolID property. Also make sure this web page/user control has reference to the AJAX tool kit assembly

e.g.

//first add textbox dynamically and give it an IDTextBox myTextBox =new TextBox();myTextBox.ID ="txtCalendar";//now add the calendarExtendar and assign the targetcontrol IDAjaxControlToolkit.CalendarExtender myCalExt =new AjaxControlToolkit.CalendarExtender();myCalExt.TargetControlID = myTextBox.ID;//add both controls to the form/panel control collectionthis.Form1.Controls.Add(myTextBox);this.Form1.Controls.Add(myCalExt);

/

programmatically created buttons click event handler not working in updatepanel

i have a hovermenuextender with Target Control - an updatepanel, PopupControl - a panel with button named edit.

when i press edit, a textbox, and a button are created programmatically and placed inside the updatepanel.

the button's click event has a handler (added programmatically) which shud replace the text in updatepanel with the text in textbox, but this is not working - here's the snippet:

1protected void OrseButton_Click(object sender, EventArgs e)2 {3 OrseUpdatePanel.ContentTemplateContainer.Controls.Add(tbox);4 OrseUpdatePanel.ContentTemplateContainer.Controls.Add(savebtn);5 savebtn.Text ="Save";6 savebtn.Click +=new EventHandler(savebtn_Click);7 }89void savebtn_Click(object sender, EventArgs e)10 {11string temp;12 temp = tbox.Text;13 OrseUpdatePanel.ContentTemplateContainer.Controls.Clear();14 OrseUpdatePanel.ContentTemplateContainer.Controls.Add(new LiteralControl(temp));1516//throw new Exception("The method or operation is not implemented.");17 }

help me on this...i m using vs 2005, asp with ajax, c#

whats hapening is ur manipulating ur button and events at runtime, so when the page postback, the buton info and event is lost, what u need to to is save the whole thing to a viewstate, then on page call back u must recall this viewstate and reassign it to the button.

savebtn.Text ="Save";
savebtn.Click +=new EventHandler(savebtn_Click);

ViewsState["btn"] = savebtn;

On ur callback

savebtn = (button)ViewsState["btn"]

Hope this helps

i placed :

savebtn = (button)ViewsState["btn"]

in savebtn_click method.

now when i run it, it gives error serializing value 'system.web.ui.webcontrols.button' of type 'system.web.ui.webcontrols.button'

ok, on each callback recreate the event for ur button, coz when creating event at runtime, and when there'sa postback or callback, the event is lost, so have to recreate it and Once created ASP.Net directly rebind it.

can i have some example code...i wanna make sure i got u completely.

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,

Programming Validators

I have the following by it doesnt seem to catch the errors;

HTML:

<input id="textBox" /> <span id="textBoxVa" style="color: red">* </span
function pageLoad(){

var textBox = new Sys.UI.TextBox($('textBox'));
textBox.initialize();

var requiredValidator = new Sys.UI.RangeValidator();
requiredValidator.set_lowerBound (5);
requiredValidator.set_upperBound (15);
requiredValidator.set_dataContext(textBox);
requiredValidator.set_errorMessage("ERROR WITH INPUT");
requiredValidator.initialize();

varvalidationLabel = new Sys.UI.ValidationErrorLabel($('textBoxVa'));
validationLabel.set_associatedControl(textBox);
validationLabel.initialize();
}

If I enter 0 or 1000, it doesnt seem to show my little red dot :(I think you need to call setOwner on the validator to associate it with the textBox.
Thanks for the response.

I thought that was the problem originally but:

var textBox = new Sys.UI.TextBox($('textBox'));
textBox.set_text("HELLO");
textBox.initialize();

var requiredValidator = new Sys.UI.RangeValidator();
requiredValidator.set_lowerBound (5);
requiredValidator.set_upperBound (15);
requiredValidator.set_dataContext(textBox);
requiredValidator.set_errorMessage("ERROR WITH INPUT");
requiredValidator.setOwner(textBox);
requiredValidator.initialize();

varvalidationLabel = new Sys.UI.ValidationErrorLabel($('textBoxVa'));
validationLabel.set_associatedControl(textBox);
validationLabel.initialize();

alert(textBox.get_isInvalid ());

Still does not work :(

Right. My mistake. You need to add the validator to the textbox's validators collection. This should take care of calling setOwner so you don't need to do it.

Thanks Bleroy :)

Final code sniplet:

var textBox = new Sys.UI.TextBox($('textBox'));
textBox.set_text("HELLO");
textBox.initialize();

var requiredValidator = new Sys.UI.RangeValidator();
requiredValidator.set_lowerBound (5);
requiredValidator.set_upperBound (15);
requiredValidator.set_dataContext(textBox);
requiredValidator.set_errorMessage("ERROR WITH INPUT");
requiredValidator.initialize();

textBoxValidator = textBox.get_validators();
textBoxValidator.add(requiredValidator);
Alright a couple more questions that I ran into:

1) I dont really have a clue as to setting up a custom Validator
2) Same thing with setting up Group Validators

I'm not getting the display to show up for the validation label. The alert shows it's invalid, but nothing displays.

var

textBox;function pageLoad()

{

textBox =

new Sys.UI.TextBox($('textBox'));

textBox.initialize();

textBox.set_text(1);

var rangeValidator =new Sys.UI.RangeValidator();

rangeValidator.set_lowerBound(5);

rangeValidator.set_upperBound(15);

rangeValidator.set_dataContext(textBox);

rangeValidator.set_errorMessage(

"Must be between 5 and 15");

rangeValidator.initialize();

var textBoxValidator = textBox.get_validators();

textBoxValidator.add(rangeValidator);

var validationLabel =new Sys.UI.ValidationErrorLabel($('textBoxVa'));

validationLabel.set_associatedControl(textBox);

validationLabel.initialize();

alert(textBox.get_isInvalid());

}

It is a mouseover tooltip kinda thing ;)

Propose: Validator Callout on DropDownList

in my opinion it would be very useful if validator callout targetcontrol could be not only a textbox but a dropdownlist too.

It could be appear if dropdownlist is selected on selectedindex= 0 or with a selectedvalue=""

Hi Maxredd,

As far as I know, it is supported. You can use a CustomValidator + ValidatorCalloutExtender. When postback , CustomValidator will call ClientValidationFunction to check the DropDownList's state. Here is the sample.

<%@. Page Language="C#" %><%@. Import Namespace="System.Collections.Generic" %><!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) { List<string> myList = new List<string>(); myList.Add("Select"); myList.Add("1111"); myList.Add("2222"); myList.Add("3333"); DropDownList1.DataSource = myList; DropDownList1.DataBind(); }</script><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"> </asp:ScriptManager> <asp:DropDownList ID="DropDownList1" runat="server"> </asp:DropDownList> <asp:CustomValidator ID="cvName" Runat="server" ClientValidationFunction="validateName" ErrorMessage="Please select an item!" Display="None" ControlToValidate="DropDownList1"></asp:CustomValidator> <asp:Button ID="btnSubmit" Runat="server" Text="GO"></asp:Button> <ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" BehaviorID="myVCEBID" runat="server" TargetControlID="cvName"> </ajaxToolkit:ValidatorCalloutExtender> <script type="text/javascript" language="javascript"> function validateName(source, args){ if( $get("<%=DropDownList1.ClientID%>").selectedIndex == 0 ) args.IsValid = false; else args.IsValid = true; } </script> </form></body></html>

Best regards,

Jonathan

thank you!

Q: problem with setTimeout function

Hello everybody!

What I am trying to achieve is the following thing. I have a textbox and a control extender to the textbox. I have a property called - FadeAnimation which can be true or false. If it is true, the following thing should happen. When the user focuses the textbox, it should change the opacity of the textbox.

It always keeps giving me that the method is not supported at the setTimeout line. Any suggestions?

//run the onfocus function var focus =this.get_element(); var focusDelegate = Function.createDelegate(this,this._onfocus); $addHandler(focus,"onfocus", focusDelegate);this._onfocus(); }, _onfocus : function() {this._opacity(); },//Function to change the opacity _opacity : function() { var id =this.get_element(); var opacStart = 0; var opacEnd = 100; var millisec = 250; var speed = Math.round(millisec / 100);var timer = 0;if(opacStart > opacEnd){for( i = opacStart ; i >= opacEnd ; i--){setTimeout("this._changeOpac(" + i +")", (timer * speed));timer++;}}else if(opacStart < opacEnd){for(i = opacStart; i <= opacEnd; i++){setTimeout("this._changeOpac(" + i +")", (timer * speed));timer++;}} }, _changeOpac : function(opacity) { varobject =this.get_element().style;object.background ='#FFFF99';object.opacity = (opacity / 100);object.MozOpacity = (opacity / 100);object.KhtmlOpacity = (opacity / 100);object.filter ="alpha(opacity=" + opacity +")"; },// TODO: (Step 2) Add your property accessors here get_FadeAnimationProperty : function() {return this._FadeAnimationPropertyValue; }, set_FadeAnimationProperty : function(value) {this._FadeAnimationPropertyValue =value; }

try window.setTimeout()

I'm not a Javascript guru by any means, but i think that your problem is that with this line

setTimeout("this._changeOpac(" + i +")", (timer * speed));

you lose, hmmm not sure if this is the right term to use, "context" of the object "this" as the event isn't raisedwithin

Question about AutoComplete textbox

The ASP.NET AJAX Control Toolkit AutoComplete textbox uses a webservice to retrieve a list of suggestions "based on what the user has typed in". I want to create a list of suggestions based on "what the user has typed in" PLUS "the values of some other fields on the form". How can this be done? I don't see a way to access the other field values within the webservice that the AutoComplete textbox uses.

Seems like a reasonable feature request. I have opened work itemhttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8414 to track this.

Thanks,

Kirti

Thanks Kirti, that would be great! Is there a temporary workaround I can use? I need to auto complete a textbox for zip codes. The zipcodelist is limited to the country the user selects in a dropdownlist. The the autocomplete webservice should take country as additional parameter.

Question about the slider extender control and "hiding" the textbox it extends

Copied and pasted from the interactive sample pages, under slider tips:

TextBox visibility. The asp:TextBox that the Slider is upgrading will be visible during the page loading, so it is usable if JavaScript is not enabled on the browser. Depending on your requirements, you can prevent the asp:TextBox from being visible by setting its display mode to "none".

However, there is no display mode or displaymode property for the textbox control, nor for the slider extender. How then can I prevent the textbox from being visible while the page is loading?

Another question: is there a way to set the slider to enabled = "false" where it would show the value (e.g. the slider being at the middle of the rail for a value of 50%) without it being movable? I tried setting the textbox to enabled = false. The slider looks somewhat grayed out, but you can still click on the slider and move it. Thanks a lot.

Hi,

1) display is a CSS attribute. you should set display:none on the extended TextBox.

2) At the moment the slider can't be disabled, but this is a good suggestion.

Thanks.

Ah thanks. Forgot about the css attribute for that.

As for the slider not being enabled or disabled, I guess I'll just make it invisible for now.