Programatically Adding an AutoCompleteExtender & AutoCompleteProperties

This is from the documentation:

To extend a text box with auto-completion behavior programmatically, add an AutoCompleteExtender control to your ASP.NET Web page, and use theServicePath andServiceMethod properties to specify the Web method that returns the item list. Then for each text box that you want to add the auto-completion behavior to,add anAutoCompleteProperties server control to theControls collection of the AutoCompleteExtender. The AutoCompleteProperities component enables you to specify the target control the extender should link to and to override the ServicePath and ServiceMode setting for individual controls.

So am I to understand that I add an AutoCompleteProperties instance to the AutoCompleteExtender.Controls collection?

When I try that I get this message in VS2005:

Value of type 'Microsoft.Web.UI.Controls.AutoCompleteProperties' cannot be converted to 'System.Web.UI.Control'.

hello.

well, you just need to add them as child elements of the control since it'll automaticatically parse those elements and add them to the targetproperties property.

...forgive me for my ignorance, but how exactly is that accomplished? Can you provide a brief example?

Thanks! :)

Dim autoComplete as New AutoCompleteExtender()
Dim props as New AutoCompleteProperties()
props.TargetControlID = "txt_suggestion"
props.ServiceURL = "/WebServices/Service.asmx"
props.ServiceMethod = "GetSuggestions"
autoComplete.TargetProperties.Add(props)
Page.Controls.add(autoComplete)

Hey that worked! Thanks!

I didn't know about the AutoCompleteExtender.TargetProperties.Add method, I was trying to add it to the controls collection of the AutoCompleteExtender.

FYI - The ServiceURL property in the above code is supposed to be ServicePath (at least in the July 06 release).

programatically updating a panel using onblur

Ok, this is driving me nuts and I can't believe there's not a way to do this.

Basically I have a user control that dynamically adds text boxes to its control tree at runtime. I have an UpdatePanel control sitting in the top of my user control with a button and a literal control. When the button is clicked it calls a buttonclicked method in the user control that sets the literal to some text and calls the update method on the panel. It all does what it's supposed to do when I click the button and AJAX works just fine.

Now here's the problem, how on Earth do I add an onblur event to the dynamically created text boxes that will either

a) update the panel; or

b) call the buttonclicked method directly; or

c) click the button

I've tried

1txtBox.Attributes.Add("onblur","javascript:__doPostBack('ctl00_contentPlaceHolder_quoteControl_quoteButton','OnClick','');");

And a large number of variations on the above but to no avail. The problem with the above is that I don't necessarily know the full id of the button control at compile time (and even if I did I really, REALLY wouldn't want to hard code it in my class) and if it doesn't find the control then it does a full form postback making the update panel redundant. I understand that I cannot wire in a custom event handler directly to the onblur method (like you can for the text changed) so it has to be client side.

Is there a way to trigger server side events through client side script? I have to get this done even if it involves hand rolling some javascript function that I can call from the onblur attribute to call the event.

I'm a back end business tier coder so any help with the client side would be most gratefully appreciated.

Rick Edwards

Ok, I've discovered a nasty way to do this using the event hi-jacking technique or "hidden button" method found here:

http://www.dotnetjohn.com/articles.aspx?articleid=224

I'd originally shy'd away from this as it's blatantly a hack but having now spent two day researching this I can't find another way of doing it.

Basically I add a hidden button to my update panel on the parent control and wire in the button click method on the parent control code behind. I then raise the event handler in the parent user control and pass this to the child control classes that are part of my control factory. When a textbox control is manufactured by the factory I can then add the oblur attribute and wire in the button click event handler. The button click method is initialised in the parent user control and within it I call the update method for the AJAX panel.

This is great for just updating a single panel from multiple onblur events, the problem now occurs if I want to update different panels from different textbox controls, I suddenly have to start adding hidden buttons all over the place so this is far from an ideal answer.

I've just found an article on asynchronous callback features in .NET2 and it looks like I might be able to roll my own textbox control with an onblur method built in, anyone with any experience of this?

Rick Edwards

Sorry if I'm missing something, but why couldn't you just set AutoPostBack="true" on the TextBox?

Firstly the autopostback event is fired on either tabbing out of the textbox or on pressing enter and not necessarily on loss of focus. Also I don't want to fire a postback event, I actually need to fire a custom event that calls the update method on my update panel and therefore run an asynchronous postback and a partial render. I don't want to rerender the entire form.

Hope that makes sense. I tried the autopostback initially thinking along your lines but it couldn't do what I wanted.

Rick Edwards

Yes, you would be limited to whenever AutoPostBack actually fires. But then it will do an async postback (as long as it's in your UpdatePanel or set as a trigger) and run whatever handler you've set in OnTextChanged. It shouldn't reload the entire page.

If AutoPostBack doesn't do what you want, your hidden button method should work, but I'd use MyButton.ClientID to get the ID so you don't have to hardcode it (which as you said is error-prone).

Property value disappear on click with user control

Hi,

I have a user control which require input text boxes and a caclulate button. When I hit the recalculate button, lblMonth becomes blanks. Please see the code below and guide how to keep the lblMonth the value of lblMonth

============
<asp:UpdatePanel ID="upPanelSales" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblMonth" runat="server" Font-Bold="true" ForeColor="white" CssClass="heading" />
-- some text box controls
<asp:Button ID="btnReCalc" runat="server" Text="Recalc." CommandName="Calculate" CommandArgument="ReCalc" OnCommand="Calculate" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnReCalc" EventName="Command" />
</Triggers>
</asp:UpdatePanel
Code Behind
Private _MonthNameAs String

Public Property MonthName()As String
Get
Return _MonthName
End Get
Set(ByVal valueAs String)
_MonthName = value
End Set
End Property

Protected Sub Page_PreRender(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.PreRender
Me.lblMonth.Text = _MonthName
End Sub

Protected Sub Calculate(ByVal senderAs Object,ByVal eAs CommandEventArgs)
If e.CommandName ="Calculate"Then
Select Case e.CommandArgument
Case"ReCalc"
ReCalculate()
End Select
End If
End Sub

Main Page
=========

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<Sales:Input ID="uc" runat="server" />
Code Behind

Sub Page_Load
uc.MonthName = Month1
End Sub

you probably want to do this in your main page code behind so it only gets set when the page loads the first time

Sub Page_Load

if not Page.IsPostBack Then
uc.MonthName = Month1
end if
End Sub

My main page contains 4 link button controls called Qtr1, Qtr2, Qtr3, Qtr4 and I want to change the month value based on user clicking on quarter links? The real problem is due to submit button inside the user control and partial page refresh has applied on this user control.

so you solved it? or you're still asking?

if those 4 links are outside of the updatepanel they will trigger a full post back and the data inside the update panel contents will be treated no differently than if they weren't inside an updatepanel.

if you click the the linkbutton inside the updatepanel the only thing that will happen is the data within the updatepanel will postback and the associated button event will fire. Only data within the updatepanel will post back to the server though. Data outside of the updatepanel will still appear to the server as the same data regardless of change on the client side...

Question About AutoComplete

Hello,

I have setup a page containing two text box which utilize the AutoComplete Extension and work perfectly (thanks to the video helps), but I would like to extend this a bit. I would like to use the variable that had been put into the first text box, to restrict what is displayed in the second auto complete. Basically, once I am within my autocomplete.asmx file, how to I get the variable of what was in the first text box to pass into my stored procedure?

Thanks,

Chris

What you want to do is use the contextKey parameter. It's described in thedocumentation for the extender.

Hrm, this is very close, but I still do not see how to assign the text, or a variable, to the ContextKey? I can see how to pass a static piece of text in, which I have had success with, but have not had to much luck with the variable.

Thanks,

Chris

You can use $find('AutocompleteExtenderClientID').set_contextKey() to set that on the client side. So, you'd want to use $addHandler to handle the context textbox's onchange event and update the autocomplete extender's contextKey with the textbox's new value.

Is this what you were talking about? I get some errors when I try to compile it. Also, is there a way to Prepend the text it is going to set?

Thanks so much,

Chris

1<asp:TextBox ID="PortName" runat="server" OnTextChanged=$find('AutoCompletePortName').set_contextKey()></asp:TextBox>23<cc1:AutoCompleteExtender ID="AutoCompletePortName" runat="server" TargetControlID="PortName" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="3" CompletionSetCount="5" ContextKey=$addHandler UseContextKey=True>4 </cc1:AutoCompleteExtender>5

You might be able to do this, but I haven't tested it:

<cc1:AutoCompleteExtender ID="AutoCompletePortName" runat="server" TargetControlID="PortName" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="3" CompletionSetCount="5" ContextKey="$get('<%= PortName.ClientID%>').value" />

If it works, that's going to be the easiest way to do it. Also, you don't have to explicitly set UseContextKey. If a ContextKey is specified, it will automatically use it.

$addHandler is a little bit more complicated than that. You can see a few examples of using it here:http://encosia.com/2007/11/15/exploring-one-of-ms-ajaxs-often-overlooked-features/

Question about object returned from web service...

I have the following script code:

<

scriptlanguage="javascript"type="text/javascript">

<!--

function

Button1_onclick() {

ret = SimpleService.ReturnDataTable(

"fi","la","te", OnComplete, OnTimeOut, OnError);

return

(true);

}

function

OnComplete(arg) {

document.getElementById(

'Text1').value = arg;

//alert(arg);

}

function

OnTimeOut(arg) {alert("TimeOut encountered when calling Say Hello.");

}

function

OnError(arg) {

<

scriptlanguage="javascript"type="text/javascript">

<!--

function

Button1_onclick() {

ret = SimpleService.ReturnDataTable(

"fi","la","te", OnComplete, OnTimeOut, OnError);

return

(true);

}

function

OnComplete(arg) {

document.getElementById(

'Text1').value = arg;

}

function

OnTimeOut(arg) {alert("Error encountered when calling Say Hello.");

}

function

OnError(arg) {

alert(

"Error encountered when calling Say Hello.");

}

// -->

}

</script>

And this is the webservice method it calls:

publicDataSet ReturnDataTable(String Name,String Last,String Test)

{

DataSet ds =newDataSet();DataTable dt = ds.Tables.Add("RandomTable");DMStoDD dd =newDMStoDD();DataColumn column1 =newDataColumn();

column1.ColumnName =

"Name";

dt.Columns.Add(column1);

DataColumn column2 =newDataColumn();

column2.ColumnName =

"Last";

dt.Columns.Add(column2);

DataColumn column3 =newDataColumn();

column3.ColumnName =

"Test";

dt.Columns.Add(column3);

DataRow row;

row = dt.NewRow();

row[

"Name"] = Name;

dt.Rows.Add(row);

row = dt.NewRow();

row[

"Last"] = Last;

dt.Rows.Add(row);

row = dt.NewRow();

row[

"Test"] = Test;

dt.Rows.Add(row);

return ds;

}

Is there something wrong with the way I'm calling my DataSet/DataTable?

Also, what properties does the client side object 'arg' have?

J

arg should have whatever properties are public on the server-side object (I believe) but only if you have a [ScriptService] attribute on the web service, and only if you have a jsonconverter defined for the data type. The default converter works pretty well for most data types, but seems to choke a bit on certain things. I've never done dataset/datatables (typically I roll my own collection for those applications) but from what I've read you can get a dataset converter if you use the Futures dll and make the appropriate changes to your web.config to suppor tit.

Question about OnClientClick for asp:LinkButton...

I have the code:

Code Behind .vb file:

Dim lbAsNew LinkButton

lb.Text = dt.Rows(j).Item(

0)

lb.ID =

"cat" +CType(dt.Rows(j).Item(1),String)

lb.CssClass =

"lbH1"

lb.OnClientClick =

"lb_Click('" +CType(dt.Rows(j).Item(1),String) +"')"

tc.Controls.Add(lb)

Client Side .aspx file:

<scriptlanguage="javascript"type="text/javascript">function lb_Click(e){

alert(e);

}

</script>

How can I tie this code in to talk to a Page Method or WebService? Any good simple links/tutorials? I tried the Ajax video page but apparently the sound drops out half way through the video? And my books refer to 'Atlas' instead of 'Ajax 1 or 2'.

You can add a onclick event handler like this:

AddHandler lb.OnClick, AddressOf lb_Click

And define a event handler method as below:

Protected Sub lb_Click(sender as object, E as EventArgs)

End Sub

If want to execute it asynchronously, you can decorate the above method with WebMethod attribute. Like this:

<WebMethod()> Protected Sub lb_Click(sender as object, E as EventArgs)

End Sub

Question regarding Text for CollapsiblePanel Control

Is it possible to have the displayed output of the CollapsiblePanel come from a text file or some other source? I have a file that contains some disclaimer information that I'd like to display, but it is in a text format and is about a page and a half. Is my only option to convert the text to html and then embed all of it within the control?

Would this be an appropriate control to use for this? I would if possible rather not have to display a separate .aspx page to display this information.

Hi,

You can add a iframe in the panel, set its src to the txt file directly. For instance:

<iframesrc="TextFile.txt"></iframe>

Hope this helps.

Thank you Raymond that worked great. I also discovered another way by creating a Custom Web Control and populating it with the text to be displayed. I then drop the Custom Control in my Content CollasiblePanel and surround it with a div tag to control the height, overflow, and background color.