Showing posts with label autocompleteextender. Show all posts
Showing posts with label autocompleteextender. Show all posts

Saturday, March 24, 2012

Problem creating binding for TextBox/AutoCompleteExtender and DropDownList/CascadingDropDo

I'm trying to use a textbox hooked up to an autocompleteextender todrive a DropDownList hooked up to a cascadingdropdown. I'm tryingto do this by creating a binding between the textbox and a hiddenDropDownList. The binding invokes a custom transform that updatesthe contents on the hidden dropdown with the text from the textbox whenthe textbox text changes. I am close, but I am running into someissues which I believe are due to the fact that my controls are insidean updatepanel. I'm getting the infamous Duplicate use of id...when the updatepanel reloads my textbox and autocompleteextender.

Here's the source. Can anyone offer any ideas? thanks...

<%@dotnet.itags.org. Page Language="C#" EnableEventValidation="false" %>
<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %
<script runat="server">

void AutoCompleteTextBox_PreRender(object sender, EventArgs e) {
((TextBox)sender).Attributes.Add("autocomplete", "off");
}

void Page_Load(object sender, EventArgs e) {

AccountTextBox.Visible = AccountRadioButton.Checked;
if (AccountRadioButton.Checked) {AccountAutoCompleteExtender.TargetProperties[0].Enabled = true; }
else {
AccountAutoCompleteExtender.TargetProperties.Clear();
CascadingDropDown1.TargetProperties.Clear();
}

LicenseTextBox.Visible = LicenseRadioButton.Checked;
LicenseDropDownList.Visible = !LicenseRadioButton.Checked;
if (LicenseRadioButton.Checked) {LicenseAutoCompleteExtender.TargetProperties[0].Enabled = true; }
else { LicenseAutoCompleteExtender.TargetProperties.Clear(); }

}

</script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>

<script type="text/javascript">
<!-- //

var addl;
var atb;

function pageLoad(sender, e) {

atb = new Sys.UI.TextBox($("<%=AccountTextBox.ClientID %>"));
addl = new Sys.UI.Select($("<%=AccountDropDownList.ClientID %>"));

var addl_binding = new Sys.Binding();
addl_binding.set_dataContext(atb);
addl_binding.set_dataPath("text");
addl_binding.set_property("selectedValue");
addl_binding.transform.add(setDropDownList);

addl.get_bindings().add(addl_binding);

atb.initialize();
addl.initialize();
}

function setDropDownList(sender, eventArgs) {

// I WOULD HAVE LIKED TO HAVE CREATED AN INSTANCE OFTHE AtlasControlToolkit.CascadingDropDownNameValue,
// BUT COULDN'T SEEM TO FIGURE OUT HOW TO DO THAT...
var value = newDummy.CascadingDropDownNameValue(eventArgs.get_value(),eventArgs.get_value());

var cddp1 = $object("CascadingDropDownProperties1");
cddp1._setOptions([value]);

}

// -->
</script>

</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />

<atlas:AutoCompleteExtender ID="AccountAutoCompleteExtender" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="2"ServiceMethod="GetAccountList" ServicePath="Lookup.asmx"TargetControlID="AccountTextBox" />
</atlas:AutoCompleteExtender
<atlas:AutoCompleteExtender ID="LicenseAutoCompleteExtender" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="2"ServiceMethod="GetLicenseList" ServicePath="Lookup.asmx"TargetControlID="LicenseTextBox" />
</atlas:AutoCompleteExtender>

<atlasToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server">
<atlasToolkit:CascadingDropDownPropertiesid="CascadingDropDownProperties1" TargetControlID="AccountDropDownList"Category="Account" PromptText="" ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownTextBoxContents" />
<atlasToolkit:CascadingDropDownPropertiesTargetControlID="LicenseDropDownList" Category="License"PromptText="Please select a License"ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownTextBoxContents"ParentControlID="AccountDropDownList" />
</atlasToolkit:CascadingDropDown>

<asp:Panel ID="LookupPanel" BackColor="#999999" CssClass="panel" runat="server">
<atlas:UpdatePanel ID="LookupUpdatePanel" Mode="Conditional"runat="server">
<ContentTemplate>
<div>
<table>
<tr>
<td rowspan="3"valign="top"><span style="font-weight: bold;">License LookupBy:</span></td>
<td>
<asp:RadioButtonID="AccountRadioButton" GroupName="Lookup" Checked="true"AutoPostBack="true" runat="server" /> Account
</td>
<td>
<asp:TextBoxID="AccountTextBox" OnPreRender="AutoCompleteTextBox_PreRender"runat="server" />
</td>
</tr>
<tr>
<td>
<asp:RadioButtonID="LicenseRadioButton" GroupName="Lookup" AutoPostBack="true"runat="server" /> License
</td>
<td>
<asp:TextBoxID="LicenseTextBox" OnPreRender="AutoCompleteTextBox_PreRender"runat="server" />
<asp:DropDownListID="AccountDropDownList" style="display: none;" runat="server"/>
<asp:DropDownListID="LicenseDropDownList" runat="server" />
</td>
</tr>
</table>
</div>

<scripttype="text/xml-script">
<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
</components>
</page>
</script>

</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="AccountRadioButton" EventName="CheckedChanged" />
<atlas:ControlEventTriggerControlID="LicenseRadioButton" EventName="CheckedChanged"/>
</Triggers>
</atlas:UpdatePanel>

</asp:Panel>

</form
<script type="text/javascript">
<!-- //

Type.registerNamespace("Dummy");

Dummy.CascadingDropDownNameValue = function(name, value) {
var _name = name;
var _value = value;

this.name = _name;
this.value = _value;

}

Dummy.CascadingDropDownNameValue.registerClass('Dummy.CascadingDropDownNameValue');
// -->
</script
</body>
</htmlHave you tried FAQ #6?
I did read that, and I did try to apply the
var context = Sys.Application.getMarkupContext();
if (context) { context.removeObject(this); }

to the dispose method of the CascadingDropDownBehavior.js but it didn't seem to make a difference.

I'm stilling getting the Duplicate use for the AccountTextBox, CascadingDropDownProperties1 and AccountDropDownList...
I'm trying a slightly different approach, but I'm still running intosome issues. I'm trying to define the autocomplete behaviordeclaratively, instead of using an autocompleteextender. everything works well, but when the updatepanel refreshes, theautocomplete behavior doesn't seem to exist anymore.

i tried placing the xml-script inside the updatepanel, too, no difference.

heres the code to reproduce:

<%@. Page Language="C#" EnableEventValidation="false" %
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %
<script runat="server">

void AutoCompleteTextBox_PreRender(object sender, EventArgs e) {
((TextBox)sender).Attributes.Add("autocomplete", "off");
}

</script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title
<script type="text/javascript">
<!-- //

function setDropDownList(sender, eventArgs) {

// I WOULD HAVE LIKED TOHAVE CREATED AN INSTANCE OF THEAtlasControlToolkit.CascadingDropDownNameValue,
// BUT COULDN'T SEEM TO FIGURE OUT HOW TO DO THAT...
var value = newDummy.CascadingDropDownNameValue(sender.get_text(), sender.get_text());

var cddp1 = $object("CascadingDropDownProperties1");
cddp1._setOptions([value]);

}

// -->
</script
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManagerid="ScriptManager1" EnablePartialRendering="true" runat="server" />

<atlas:AutoCompleteExtender id="LicenseAutoCompleteExtender" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="2"ServiceMethod="GetLicenseList" ServicePath="Lookup.asmx"TargetControlID="LicenseTextBox" />
</atlas:AutoCompleteExtender>

<atlasToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server">
<atlasToolkit:CascadingDropDownPropertiesID="CascadingDropDownProperties1" TargetControlID="AccountDropDownList"Category="Account" PromptText="" ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownContents" />
<atlasToolkit:CascadingDropDownPropertiesTargetControlID="LicenseDropDownList" Category="License"PromptText="Please select a License"ServicePath="~/FrontlineService.asmx"ServiceMethod="GetDropDownContents" ParentControlID="AccountDropDownList" />
</atlasToolkit:CascadingDropDown
<script type="text/xml-script">
<pagexmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<textBox id="AccountTextBox"propertyChanged="setDropDownList">
<behaviors>
<autoComplete completionInterval="1000"completionList="completionList" completionSetCount="15"
dataContext="AccountTextBox" minimumPrefixLength="2"serviceMethod="GetAccountList"
serviceURL="Lookup.asmx">
</autoComplete>
</behaviors>
</textBox>
</components>
</page>
</script
<asp:Panel ID="LookupPanel" BackColor="#999999" CssClass="panel" runat="server">
<atlas:UpdatePanel id="LookupUpdatePanel" mode="Conditional"runat="server">
<ContentTemplate>
<div>
<table>
<tr>
<td rowspan="3" valign="top"><spanstyle="font-weight: bold;">License Lookup By:</span></td>
<td>
<asp:RadioButton ID="AccountRadioButton"GroupName="Lookup" Checked="true" AutoPostBack="true" runat="server"/> Account
</td>
<td>
<asp:TextBox ID="AccountTextBox"OnPreRender="AutoCompleteTextBox_PreRender" runat="server" />
<div id="completionList"></div>
<asp:DropDownList ID="AccountDropDownList"style="display: none;" runat="server" />
</td>
</tr>
<tr>
<td>
<asp:RadioButton ID="LicenseRadioButton"GroupName="Lookup" AutoPostBack="true" runat="server" /> License
</td>
<td>
<asp:TextBox ID="LicenseTextBox"OnPreRender="AutoCompleteTextBox_PreRender" runat="server" />
<asp:DropDownList ID="LicenseDropDownList"runat="server" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="AccountRadioButton" EventName="CheckedChanged" />
<atlas:ControlEventTriggerControlID="LicenseRadioButton" EventName="CheckedChanged" />
</Triggers>
</atlas:UpdatePanel>
</asp:Panel>
</form
<script type="text/javascript">
<!-- //

Type.registerNamespace("Dummy");

Dummy.CascadingDropDownNameValue = function(name, value) {
var _name = name;
var _value = value;

this.name = _name;
this.value = _value;
}

Dummy.CascadingDropDownNameValue.registerClass('Dummy.CascadingDropDownNameValue');
// -->
</script
</body>
</html

Posted by ubiquityvbno at 4:10 AM 0 comments
Labels: , , , , , , , , , , , ,

Problem in AJAX Autocomplete

Hi i am using Autocompletion feature in my project for loading cities with matched keys in textbox using AutoCompleteExtender of Ajax Toolkit. Its working fine but when i use the same code in User control (.ascx) file, then i can't work. and also when i use the same code for autocompletion in URL Friendly Urls then the page hang out can any one told me why this happen and how i use AutoCompleteExtender efficiently in my project. My complete coding is shown below.

.aspx page.

<asp:TextBox ID="txt_search_city" Width="130px" runat="server">

<cc1:AutoCompleteExtender ID="AutoCompleteExtender2" runat="server" TargetControlID="txt_search_city"
ServiceMethod="GetCompletionListWithContext" UseContextKey="true" MinimumPrefixLength="2"
EnableCaching="false" CompletionSetCount="20" CompletionInterval="2000" FirstRowSelected="true"
DelimiterCharacters=";," />

Code behind Section:

<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function GetCompletionListWithContext(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
If Not contextKey = Nothing Then
Return "this is a total of fifteen words that will be returned when we use context".Split(" ")
End If
If count = 0 Then
count = 20
End If
Dim items As New System.Collections.Generic.List(Of String)
'get data from database
Dim _loc As New Locations
Dim str As String
Dim ds As DataSet = _loc.Load_Cities(prefixText, count)
If ds.Tables(0).Rows.Count > 0 Then
Dim i As Integer
For i = 0 To count - 1
str = ds.Tables(0).Rows(i).Item("city").ToString()
If ds.Tables(0).Rows(i).Item("StateProvince").ToString() = "Rentals" Then
str = ds.Tables(0).Rows(i).Item("city").ToString() & " - " & ds.Tables(0).Rows(i).Item("CountryCode").ToString()
Else
str = ds.Tables(0).Rows(i).Item("city").ToString() & " - " & ds.Tables(0).Rows(i).Item("StateProvince").ToString()
End If
items.Add(str)
Next
End If
Return items.ToArray()
End Function

Waiting for some helpful response.

Thanks.

You may need a ScriptManager or a ScriptManagerProxy control in the user control.


Hi thanks for your reply...

I have already place Script manager on page rather than user control. is it not ok, and also when i am using auto complete on User Friendly URL Like http://www.abc.com/categories/232/auto.aspx then complete page is hang out. what will be the possible cause here for autocomplete control.

Thanks.


media_1408:

when i use the same code in User control (.ascx) file, then i can't work.

The code in a user control can't be accessed from client side directly, that's because request for file extension .ascx is blocked.

media_1408:

also when i use the same code for autocompletion in URL Friendly Urls then the page hang out

The ajax extension uses the virtualPath of current page to get an instance of the corresponding object and invoke a method on it with Reflection, and it's likely to fail to work when url rewriting is enabled. Since the a file can't be found with the user friendly URL.

In my opinion, a better idea is to use Web Service rather than a Page Method. And don't apply any rewriting rules to .asmx file extension.


Thanks a lot for your wonderful help, as user control problem is not solved and also it is not big issue, but by using Web Service rather than a Page Method, page hanging problem due to auto completion is also solved on URL Friendly Urls.


Thanks.

Posted by ubiquityvbno at 3:58 AM 0 comments
Labels: , , , , , , , , , , , , ,
Subscribe to: Posts (Atom)