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
Labels: , , , , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)