Extending the AutoCompleteExtender

Hi,

I'm trying to extend the AutoCompleteExtender so that is also can return an extra (hidden) value. For now I just do this by passing the text and the value returned by the WebMethod just as a comma separated string, i.e. "AnObject;5" (where 5 is the ID of the object). I just started on this so I'm not sure of I'm doing things the way they are supposed too. So here's a question.

I managed to extend the AutoCompleteBehavior javascript so that I can pass the result of the WebMethod to the TextBox and it just shows the text (the value is split of).

I also added an extra property ValueTextBoxId to the Properties of the AutoCompleteExtender to reference the TextBox which should store the hidden value. I have now the correct ClientId of the TextBox in the javascript. Next step is setting the value of that textbox.

I can use $(this.get_valueTextBoxId()).value to set it. But I guess it's more in the ways of Atlas to use the Sys.Ui.TextBox object. Only I cannot find any documentation how I can use that object when I have just a ClientID.

Anybody an idea?

Not sure of the solution to your other issues, but to use the Sys.UI.TextBox with a client id you need only do this.

var AtlasTextBox = new Sys.UI.TextBox($(ClientID));
AtlasTextBox.initialize(); // I can't remember if this line is required or not.

Jay

Extending the AutoComplete extender

I am trying to add more to the functionality of the AutoComplete extender. I would like to write my own and inherit from AutoCompleteExtender.

I would like to add a member variable that will hold the results from the last search ( similar to what the cache does, but just for the last search ) and then at a later point be able to compare a given string a see if it is one of the strings returned from the last search.

I am having trouble with the js. Any help would be appreciated

here is what my js file looks like, but I am not sure how to save the results from the last search.

Type.registerNamespace('CustomAutoCompleteControl');

CustomAutoCompleteControl.CustomAutoCompleteControlBehavior = function(element) {
CustomAutoCompleteControl.CustomAutoCompleteControlBehavior.initializeBase(this, [element]);
}

CustomAutoCompleteControl.CustomAutoCompleteControlBehavior.prototype = {

this._suggestions: null,

clearSuggestions: function() {
this._suggestions = null;
}
}

CustomAutoCompleteControl.CustomAutoCompleteControlBehavior.registerClass('CustomAutoCompleteControl.CustomAutoCompleteControlBehavior', Sys.Preview.UI.AutoCompleteBehavior);

I also created the .cs class and added the ClientScriptResource entry to make reference to the js file.

Do I need to overwrite the _update function, or what should I do to save the results? Any code would be helpful.

Thanks in advance

Looking at the AutoCompleteExtender, the completion list handles the mouseDown and Enter/Tab keypress events and calls a function by the name of setText which sets the textbox.

You may be able to use the existing property _currentPrefix...

_setText: function(text) {
this._timer.set_enabled(false);
this._currentPrefix = text;
var element = this.get_element();
var control = element.control;
// todo: should check for 'derives from' too and should somehow manually cause TB to raise property changed event
if (control && control.set_text) {
control.set_text(text);
}
else {
element.value = text;
}
this._hideCompletionList();
},

I would like to save the suggestions right before they are displayed to the user. There is a method called _update that is called which I think I would need to override, but I am not sure what the correct syntax to overriding a method is with this framework. Do I just rewrite that method the way I want it in my class and it will know to use that version for that method and the parent class' methods for the others? Do I need to override any other methods in order to make it work.

I think I have an idea on what I need to do, but the syntax is holding me back here. Any suggestions are appreciated.

Sorry, I misunderstood the first post. I thought you wanted to save the last finalized choice.

Extending The AJAX Toolkit to Include a Formview Ctrl

I was wondering if someone had already tackled and/or point me to a complete listing of the Formview class

I'm not clear on your question. Are you looking for the server-side Formview control to be client-enabled in some way? What features are you looking for?

I am looking to create or find a server side FormView Control that is AJAX enabled.

The feature I would like to integrate is a HTML Editor. Either using TinyMCE or FCKEditor, or FreeTextBox or to create my own ASP.NET assembly, (dll), as none do exactly what I want, although Tiny and JavaScript seem the closest.

Then within the Edit Template of the FormView Control I would integrate the two controls...? Perhaps, there is another, better way, that I hadn't thought of?

I like the FormView Control and think it has the potential to become a templating engine, but I need a way to store line breaks in particular to MSSQL, as font specs, positioning, etc are handled within external stylesheet...?

A poor mans Content Mgmt System, if you will?

So I am, looking for the original source, class, of the FormView; to better understand, if not re-implement with an Editor embedded within...?

AFAIK, noone's done precisely what you're looking for, then, no. The editor piece, as you've pointed out, has been tried in a few places, and most are good or at least 'ok', and it's also not that hard to roll your own (I've even done my own, though it's not as powerful as FCKEditor or the like, it at least is 'packaged' as a control and works in Opera which FreeTextBox doesn't, afaik). The rest sounds like implementation-specific business logic to me, which you'd have to roll on your own anyway.

Extending the Accoridon Control to support paging

Has anyone every attempted to add paging to the databinding in the accoridon control. It would be very useful to get some of the functionality of the gridview control (sorting and paging). I haven't built an extender control yet, so I fear I am in over my head. Paging workaround suggestions would be appreciated as well.

Thank you,

Tom Bull

Hello Tom,

maybe you've already found a solution for your problem.

I was faced with the same problem some days ago. I've found a solution that works for me.

I described itin my blog. I hope that solution works for you too, if a solution for that is still needed.

Regards

Rolf

Extending Server Controls?

I see this blurb on the tutorials section:

"Extend server controls or control extenders: You might create new behaviors for given server controls by implementing a server control that also implements the IScriptControl to render the ASP.NET "Atlas" client script and register with the ScriptManager in the Web page. Page developers will gain from specific new server-side controls without needing to write ASP.NET "Atlas" script or JavaScript."

This is great to hear, anyone know how this works? ie. I see it says I don't need to write script at all?

Let's say I wanted a input mask textbox - how would I 'extend' the TextBox using IScriptControl and do this code without writing script?

Hi,

check alsothis article from my blog for an introduction to extenders.

extending Gridview in Ajax

Hi,I'm binding a table to a gridview and it's all working fine. but what I would like to do is in one of the cells where the data bit big (a large paragraph) I would the cell to be able to show only the first few words than if the use move the mouse over the cell the whole paragraph will be displayed or the cell will expand or something.So, is there a way to extend the Gridview with Ajax allowing it to do that Or is there a control that I could be extended and add in a TemplateField that could do that!!!? Thanks

try this code on your rowbound event

protectedvoid GridView1_RowDataBound(object sender,GridViewRowEventArgs e)

{

if (e.Row.RowIndex != -1)

{

e.Row.Cells[4].ToolTip = e.Row.Cells[4].Text;

e.Row.Cells[4].Text = e.Row.Cells[4].Text.Substring(0, 15);

}

}

i wrap the text of column 4 th to only 15 character and showing the tooltip as a whole text which was the actual value of that column

You can integrate something like this into your grid:http://www.cssplay.co.uk/menu/more.html

-Damien

That's actually very nice thanks Mahadeo.

string strCount= e.Row.Cells[4].Text ;

if(strCount.Length > 16)

{

e.Row.Cells[4].Text = stringFormat("{0}{1}",strCount.SubString(0,15),"...")

}

Extending collapsible panel

Hi!

I'm kind of new at the use of the control toolkit, and I'm running into some problems. I would like to get a postback event when a user clicks on the header panel of a collapsible panel. I could use a link, but the ui calls for a user to be able to click on any part of the panel in order to make it collapse and expand. This works correctly, but there are other issues to consider:
- If you have drop down menus within the collapsible panel, they will remain visible when the panel collapses, floating strangely on the page. This is a bug in IE, due to the fact that the drop down gets rendered last. I would like to be able to make the drop down control invisible when the enclosing panel is collapsed.
- Since the collapse/expand action doesn't produce a postback, there is no way of dynamically populating the enclosed controls. Instead you have to have some other control that does produce a postback do the work for you. I would prefer that the div.onClick() prompt the postback.

Lastly one unrelated question:
I'm trying to make my own extenders, and put them into a different namespace than the examples. I'm having a hard time getting the javascript to run though. I believe the problem is related to the ClientScriptResource in the extender.cs file.
here's what the line looks like in the toolkit's CollapsiblePanelExtender:

[ClientScriptResource("atlascontroltoolkit", "collapsiblePanelBehavior", typeof(AtlasControlToolkit.CollapsiblePanelExtender), "CollapsiblePanel.CollapsiblePanelBehavior.js")]

here's what it looks like in mine:

[ClientScriptResource("atlascontrols", "collapsiblePanelBehavior", typeof(Netik.Web.AtlasControls.CollapsiblePanelExtender), "CollapsiblePanel.CollapsiblePanelBehavior.js")]

notice the difference? I have a different namespace "Netik.Web.AtlasControls" and for some reason it doesn't like it. Also, the last parameter, "CollapsiblePanel.CollapsiblePanelBehavior.js", why is it specified with the CollapsiblePanel prefix if the file name is CollapsiblePanelBehavior.js? would this have anything to do with my problem?

Thanks for any help!
Mordecai Zibkoff

The 60504 release of the Toolkit has a tweak to make even floating menus disappear if the collapse height goes all the way to 0.

There should be other posts in this forum with details on how to do a manual postback.

Shawn's the expert on ClientScriptResource, but I believe the last parameter reflects the directory hierarchy of the file. Note that the CollapsiblePanelBehavior.js file lives in the CollapsiblePanel directory of the AtlasControlToolkit project directory. I'm guessing your file lives elsewhere.

Hope this helps!

Right, the extra "CollapsiblePanel" at the beginning of the resource name is an artifact of the way VS does it's embedded resource naming. In the main toolkit project, all the components are in sub-directories, so their resources get named accordingly. You probably don't want/need that.

If your DropDowns are within the collapsible panel and you' are allowing to to size all the way to zero, we set display:none onto the parent. That should hide them. If you need a header, create one panel with two sections: the header, and the part that you want to collapse, and point the extender at the latter.

On the PostBack, generally you don't want client components doing postbacks. If you want a notification when this happens, the CollapsiblePanelBehavior does surface an "expandComplete" and a "collapseComplete" event.

So you would do something like this:

<atlasToolkit:CollapsiblePanelProperties ID="cpb" TargetControlID="Panel1" ... />

<script>

function onExpandComplete() {

// do a postback or web-service call...
}

function hookPanelCollapse() {

var collapseBehavior = $object("cpb");

collapseBehavior.expandComplete.add(Function.createDelegate(null, onExpandComplete));
}

</script>

Hope that helps.

My dropdown seems to still be visible. I suspect that its because its insude of an embedded table within the panel. Thatnks for the tip to hook into postback after the animation, I'll give that a try. another odd thing, in the may 4th release the targetted panel no longer renders correctly. For some reason the border thickness doubles up and the panel's size is made narrower. my code is as follows:

<%@. Page Language="C#" MasterPageFile="~/NetikClassic.master" AutoEventWireup="true" CodeFile="IssuerDetail.aspx.cs" Inherits="Issuer_Maintenance_IssuerDetail" Title="Add/Edit Issuer" %>
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainCopy" Runat="Server">
<atlas:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server"/>

<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="dialog_title"><asp:label runat="Server" ID="TitleLabel">Add/Edit Issuer</asp:label></td>
<td align="right">
<a href="http://links.10026.com/?link=javascript:history.go(-1)"><img border="0" src="http://pics.10026.com/?src=../Images/btn_backS.gif" alt="Back" width="18" height="15"/></a>
<a href="http://links.10026.com/?link=../help/help.htm"><img border="0" alt="Help" src="http://pics.10026.com/?src=../Images/btn_help.gif" width="18" height="15"/></a>
<a href="http://links.10026.com/?link=/"><img border="0" src="http://pics.10026.com/?src=../images/btn_close.gif" alt="Close" width="18" height="15"/></a>
</td>
</tr>
<tr>
<td> </td>
<td colspan="3">
<table cellpadding="2" cellspacing="3" style="background-color: rgb(239,231,207)" width="100%">
<tr>
<td colspan="3"/>
</tr>
<tr>
<td> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Issuer Id:
</td>
<td>
<asp:TextBox
runat="server"
ID="IssuerIdTextbox"
visible="false"
MaxLength="16"
Width="175"
/>
<asp:Label
runat="server"
ID="IssuerIdLabel"
Visible="false"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Issuer Name:
</td>
<td>
<asp:TextBox
runat="server"
ID="IssuerNameTextBox"
MaxLength="40"
Width="175"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Issuer Type:
</td>
<td>
<asp:DropDownList
runat="server"
ID="IssuerTypeDropDown"
Width="160"
/>
</td>
<td>
Legal Form:
</td>
<td>
<asp:DropDownList
runat="server"
ID="LegalFormDropDown"
Width="160"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Primary Country:
</td>
<td>
<asp:DropDownList
runat="server"
ID="CountryDropDown"
Width="160"
/>
</td>
<td>
State of Incorp:
</td>
<td>
<asp:DropDownList
runat="server"
ID="StateOfIncorpDropDown"
Width="160"
/>
</td>
</tr>
<tr>
<td>Yr of Incorp/Reg: </td>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left">
<asp:TextBox runat="server" ID="YrofIncorpTextBox" MaxLength="4" Width="50"/>
</td>
<td align="right">Fiscal Yr End Month: </td>
</tr>
</table>
</td>
<td>
<asp:DropDownList runat="server" ID="DropDownList1" Width="65"/>
</td>
<td style="white-space:nowrap">
<asp:RadioButtonList runat="server"
ID="CorpTypeRadioButtonList"
RepeatDirection="Horizontal"
BorderWidth="0"
CellPadding="0"
CellSpacing="0"
>
<asp:ListItem Selected="True" Text="Public" Value="PUBLIC"/>
<asp:ListItem Selected="False" Text="Private" Value="PRIVATE"/>
</asp:RadioButtonList>

</td>
</tr>
<tr>
<td>
Web Site:
</td>
<td>
<asp:TextBox
runat="server"
ID="WebSiteTextBox"
MaxLength="255"
Width="175"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Status:
</td>
<td>
<asp:DropDownList
runat="server"
ID="StatusDropDown"
Width="180"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td colspan="2">
<asp:ImageButton runat="server" ID="SaveButton" ImageUrl="../Images/btn_savedlg.gif" />
<asp:ImageButton runat="server" ID="CancelButton" ImageUrl="../Images/btn_cancel.gif" />
</td>
<td colspan="2" align="right">
<asp:LinkButton runat="server" ID="ExpandPanelsButton">Expand all settings</asp:LinkButton>
<asp:LinkButton runat="server" ID="CollapsePanelsButton">Collapse all settings</asp:LinkButton>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Panel runat="server"
ID="IssuerIssuerRelationshipHeaderPanel"
BorderWidth="1px"
BorderStyle="solid"
BorderColor="gray"
style="padding:5px"
><b>ISSUER TO ISSUER RELATIONSHIPS</b></asp:Panel>
<asp:Panel runat="server"
ID="IssuerIssuerRelationshipPanel"
CssClass="editContent"
BackColor="#ddd5bd"
BorderWidth="1px"
BorderStyle="solid"
BorderColor="gray"
>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" /></td></tr>
<tr>
<td style="white-space:nowrap">Immediate Parent Issuer ID: </td>
<td style="white-space:nowrap">
<asp:textbox ID="ImmediateParentIssuerIDTextBox" runat="server" MaxLength="16" />
<asp:ImageButton runat="server" id="ImmediateParentIssuerSearchButton" ImageUrl="../images/btn_lookupoff.gif" />
(leave blank, if at top of hierarchy)
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>Ultimate Parent Issuer ID: </td>
<td>
<asp:textbox ID="UltimateParentIssuerIDTextbox" runat="server" MaxLength="16" />
<asp:ImageButton runat="server" id="UltimateParentIssuerSearchButton" ImageUrl="../images/btn_lookupoff.gif" />
(leave blank, if at top of hierarchy)
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>Role in Parent Hierarchy: </td>
<td>
<asp:DropDownList runat="server" ID="ParentHierarcyRoleDropDown" Width="180">
</asp:DropDownList>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td colspan="2"><asp:LinkButton runat="server" ID="AddNewIssuerRelationship">Add another Issuer relationship</asp:LinkButton></td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
</table>
</td>
<td> </td>
</tr>
</table>
</asp:Panel>
<asp:Panel runat="server"
ID="IssuerPartyRelationshipHeaderPanel"
BorderWidth="1px"
BorderStyle="solid"
BorderColor="gray"
style="padding:5px"
><b>ISSUER TO PARTY RELATIONSHIPS</b></asp:Panel>
<asp:Panel runat="server"
ID="IssuerPartyRelationshipPanel"
CssClass="editContent"
BackColor="#ddd5bd"
BorderWidth="1px"
BorderStyle="solid"
BorderColor="gray"
>
<div style="padding:5px">
<asp:LinkButton runat="server" ID="AddPartyRelationshipLink">Add another party relationship</asp:LinkButton>
</div>
<asp:Panel runat="server" ID="AddPartyRelationshipPanel">
<div style="padding:5px">
<div style="padding:5px;border-width:1px;border-style:solid;">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><b>Add this Relationship:</b></td>
</tr>
<tr>
<td>Related Party: </td>
<td>
<asp:TextBox runat="server" ID="RelatedPartyNameTextBox" Width="180" MaxLength="60"/>
<asp:ImageButton runat="server" id="RelatedPartyNameSearchButton" ImageUrl="../images/btn_lookupoff.gif" />
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>Relationship: </td>
<td style="white-space:nowrap">
<asp:DropDownList runat="server" ID="PartyRelationshipTypeDropDown" Width="182"/>
Start Date: <asp:TextBox runat="server" ID="PartyRelationshipStartDateTextBox" MaxLength="12" Width="40"/>
End Date: <asp:TextBox runat="server" ID="PartyRelationshipEndDateTextBox" MaxLength="12" Width="40"/>
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton runat="server" ID="AddPartyRelationshipAddLink">Add</asp:LinkButton>
<asp:LinkButton runat="server" ID="AddPartyRelationshipCancelLink">Cancel</asp:LinkButton>
</td>
</tr>
</table>
</div>
</div>
</asp:Panel><!-- end AddPartyRelationshipPanel -->
</asp:Panel>
<asp:Panel runat="server"
ID="ClassificationMembershipHeaderPanel"
BorderWidth="1px"
BorderStyle="solid"
BorderColor="gray"
style="padding:5px"
><b>CLASSIFICATION MEMBERSHIPS</b></asp:Panel>
<asp:Panel runat="server"
ID="ClassificationMembershipPanel"
CssClass="editContent"
BackColor="#ddd5bd"
BorderWidth="1px"
BorderStyle="solid"
BorderColor="gray"
>
</asp:Panel>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>

<!-- controls the Relationships/Memberships panels -->
<atlasToolkit:CollapsiblePanelExtender ID="IssuerIssuerRelationshipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
TargetControlID="IssuerIssuerRelationshipPanel"
ExpandControlID="IssuerIssuerRelationshipHeaderPanel"
CollapseControlID="IssuerIssuerRelationshipHeaderPanel"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>
<atlasToolkit:CollapsiblePanelExtender ID="IssuerPartyRelationshipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
TargetControlID="IssuerPartyRelationshipPanel"
ExpandControlID="IssuerPartyRelationshipHeaderPanel"
CollapseControlID="IssuerPartyRelationshipHeaderPanel"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>
<atlasToolkit:CollapsiblePanelExtender ID="ClassificationMembershipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
TargetControlID="ClassificationMembershipPanel"
ExpandControlID="ClassificationMembershipHeaderPanel"
CollapseControlID="ClassificationMembershipHeaderPanel"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>
<atlasToolkit:CollapsiblePanelExtender ID="AddPartyRelationshipCollapsiblePanelExtender3" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
TargetControlID="AddPartyRelationshipPanel"
ExpandControlID="AddPartyRelationshipLink"
CollapseControlID="AddPartyRelationshipCancelLink"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender
</asp:Content
one more question;
I'm not clear on who/how hookPanelCollapse() get called.
You need to call it from your code somewhere, after load happens for the document

Cool UI by the way - looks great.

I'm actually not reproducing this behavior - you mean the top "ISSUER TO ISSUER RELATIONSHIPS " panel, right?

For me it collapses and expands just fine and the dropdown doesn't show. Are you sure you're using May 4th bits?

Not sure what you mean about the panels - you mean the border gets left over?

Thanks for the complement ;)

it seems that the display stuff is the result of the fact that the sytle information assigned to the target panel is being copied to the "inner" panel that you are creating to allow the cllaposng effect. I was able to eliminate the problem by moving the style stuff into a nested structure (either a nested table or div). After having a fresh look at it this morning, I realized that the drop down indeed seem to disappear on collapse.Things do get a little hinky at times, but I think thats just the result of having debugger statements in the javascript code. There may be some issues related to nested collapsible panels though. you can see some of this nonsense if you click the "Add another party relationship" link within the "ISSUER TO PARTY RELATIONSHIPS" panel then try closing the outer panel. clicking the "Cancel" link will cause the inner panel to collapse. Also, for some reason in my javascipt code the follwoign statement doesn't work:

var ParentHierarchyRoleDropDown = Sys.Application.findObject("ParentHierarchyRoleDropDown");

ParentHierarchyRoleDropDown comes back as undefined!

here is the revised code, thanks again for all your help!:

<%@. Page Language="C#" MasterPageFile="~/NetikClassic.master" AutoEventWireup="true" CodeFile="IssuerDetail.aspx.cs" Inherits="Issuer_Maintenance_IssuerDetail" Title="Add/Edit Issuer" %>
<%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainCopy" Runat="Server">
<atlas:ScriptManager id="MasterScriptManager" EnableScriptGlobalization="false" runat="Server"/>

<table border="0" cellpadding="2" cellspacing="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td class="dialog_title"><asp:label runat="Server" ID="TitleLabel">Add/Edit Issuer</asp:label></td>
<td align="right">
<a href="http://links.10026.com/?link=javascript:history.go(-1)"><img border="0" src="http://pics.10026.com/?src=../Images/btn_backS.gif" alt="Back" width="18" height="15"/></a>
<a href="http://links.10026.com/?link=../help/help.htm"><img border="0" alt="Help" src="http://pics.10026.com/?src=../Images/btn_help.gif" width="18" height="15"/></a>
<a href="http://links.10026.com/?link=/"><img border="0" src="http://pics.10026.com/?src=../images/btn_close.gif" alt="Close" width="18" height="15"/></a>
</td>
</tr>
<tr>
<td> </td>
<td colspan="3">
<table cellpadding="2" cellspacing="3" style="background-color: rgb(239,231,207)" width="100%">
<tr>
<td colspan="3"/>
</tr>
<tr>
<td> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
Issuer Id:
</td>
<td>
<asp:TextBox
runat="server"
ID="IssuerIdTextbox"
visible="false"
MaxLength="16"
Width="175"
/>
<asp:Label
runat="server"
ID="IssuerIdLabel"
Visible="false"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Issuer Name:
</td>
<td>
<asp:TextBox
runat="server"
ID="IssuerNameTextBox"
MaxLength="40"
Width="175"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Issuer Type:
</td>
<td>
<asp:DropDownList
runat="server"
ID="IssuerTypeDropDown"
Width="160"
/>
</td>
<td>
Legal Form:
</td>
<td>
<asp:DropDownList
runat="server"
ID="LegalFormDropDown"
Width="160"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Primary Country:
</td>
<td>
<asp:DropDownList
runat="server"
ID="CountryDropDown"
Width="160"
/>
</td>
<td>
State of Incorp:
</td>
<td>
<asp:DropDownList
runat="server"
ID="StateOfIncorpDropDown"
Width="160"
/>
</td>
</tr>
<tr>
<td>Yr of Incorp/Reg: </td>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="left">
<asp:TextBox runat="server" ID="YrofIncorpTextBox" MaxLength="4" Width="50"/>
</td>
<td align="right">Fiscal Yr End Month: </td>
</tr>
</table>
</td>
<td>
<asp:DropDownList runat="server" ID="DropDownList1" Width="65"/>
</td>
<td style="white-space:nowrap">
<asp:RadioButtonList runat="server"
ID="CorpTypeRadioButtonList"
RepeatDirection="Horizontal"
BorderWidth="0"
CellPadding="0"
CellSpacing="0"
>
<asp:ListItem Selected="True" Text="Public" Value="PUBLIC"/>
<asp:ListItem Selected="False" Text="Private" Value="PRIVATE"/>
</asp:RadioButtonList>

</td>
</tr>
<tr>
<td>
Web Site:
</td>
<td>
<asp:TextBox
runat="server"
ID="WebSiteTextBox"
MaxLength="255"
Width="175"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>
Status:
</td>
<td>
<asp:DropDownList
runat="server"
ID="StatusDropDown"
Width="180"
/>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td colspan="2">
<asp:ImageButton runat="server" ID="SaveButton" ImageUrl="../Images/btn_savedlg.gif" />
<asp:ImageButton runat="server" ID="CancelButton" ImageUrl="../Images/btn_cancel.gif" />
</td>
<td colspan="2" align="right">
<asp:LinkButton runat="server" ID="ExpandPanelsButton">Expand all settings</asp:LinkButton>
<asp:LinkButton runat="server" ID="CollapsePanelsButton">Collapse all settings</asp:LinkButton>
</td>
</tr>
</table>
</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Panel runat="server" ID="IssuerIssuerRelationshipHeaderPanel">
<table
cellpadding="0"
cellspacing="0"
class="editHeader"
style="
border-left-width:1px;
border-left-style:solid;
border-left-color:Gray;
border-right-width:1px;
border-right-style:solid;
border-right-color:Gray;
border-top-width:1px;
border-top-style:solid;
border-top-color:Gray
"
>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
<tr>
<td> <b>ISSUER TO ISSUER RELATIONSHIPS</b></td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
</table>
</asp:Panel>
<asp:Panel runat="server" ID="IssuerIssuerRelationshipPanel">
<table
cellpadding="0"
cellspacing="0"
width="100%"
class="editContent"
style="
background-color:#ddd5bd;
border-left-width:1px;
border-left-style:solid;
border-left-color:Gray;
border-right-width:1px;
border-right-style:solid;
border-right-color:Gray;
border-top-width:1px;
border-top-style:solid;
border-top-color:Gray
"
>
<tr>
<td> </td>
<td>
<table cellpadding="0" cellspacing="0">
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" /></td></tr>
<tr>
<td style="white-space:nowrap">Immediate Parent Issuer ID: </td>
<td style="white-space:nowrap">
<asp:textbox ID="ImmediateParentIssuerIDTextBox" runat="server" MaxLength="16" />
<asp:ImageButton runat="server" id="ImmediateParentIssuerSearchButton" ImageUrl="../images/btn_lookupoff.gif" />
(leave blank, if at top of hierarchy)
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>Ultimate Parent Issuer ID: </td>
<td>
<asp:textbox ID="UltimateParentIssuerIDTextbox" runat="server" MaxLength="16" />
<asp:ImageButton runat="server" id="UltimateParentIssuerSearchButton" ImageUrl="../images/btn_lookupoff.gif" />
(leave blank, if at top of hierarchy)
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td>Role in Parent Hierarchy: </td>
<td>
<asp:DropDownList runat="server" ID="ParentHierarchyRoleDropDown" Width="180">
</asp:DropDownList>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
<tr>
<td colspan="2"><asp:LinkButton runat="server" ID="AddNewIssuerRelationship">Add another Issuer relationship</asp:LinkButton></td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="10" /></td></tr>
</table>
</td>
<td> </td>
</tr>
</table>
</asp:Panel>
<asp:Panel runat="server" ID="IssuerPartyRelationshipHeaderPanel">
<table
cellpadding="0"
cellspacing="0"
class="editHeader"
style="
border-left-width:1px;
border-left-style:solid;
border-left-color:Gray;
border-right-width:1px;
border-right-style:solid;
border-right-color:Gray;
border-top-width:1px;
border-top-style:solid;
border-top-color:Gray
"
>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
<tr>
<td> <b>ISSUER TO PARTY RELATIONSHIPS</b></td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
<tr><td></td></tr>
</table>
</asp:Panel>
<asp:Panel runat="server" ID="IssuerPartyRelationshipPanel">
<table
cellpadding="0"
cellspacing="0"
width="100%"
class="editContent"
style="
background-color:#ddd5bd;
border-left-width:1px;
border-left-style:solid;
border-left-color:Gray;
border-right-width:1px;
border-right-style:solid;
border-right-color:Gray;
border-top-width:1px;
border-top-style:solid;
border-top-color:Gray
"
>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
<tr>
<td>
<asp:LinkButton runat="server" ID="AddPartyRelationshipLink">Add another party relationship</asp:LinkButton>
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px"/></td></tr>
<tr>
<td>
<asp:Panel runat="server" ID="AddPartyRelationshipPanel">
<div style="padding:5px">
<table cellpadding="0" cellspacing="5" width="100%" style="border-width:1px; border-style:solid; border-color:Gray">
<tr>
<td colspan="2"><b>Add this Relationship:</b></td>
</tr>
<tr>
<td>Related Party: </td>
<td>
<asp:TextBox runat="server" ID="RelatedPartyNameTextBox" Width="180" MaxLength="60"/>
<asp:ImageButton runat="server" id="RelatedPartyNameSearchButton" ImageUrl="../images/btn_lookupoff.gif" />
</td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" /></td></tr>
<tr>
<td>Relationship: </td>
<td style="white-space:nowrap">
<asp:DropDownList runat="server" ID="PartyRelationshipTypeDropDown" Width="182"/>
Start Date: <asp:TextBox runat="server" ID="PartyRelationshipStartDateTextBox" MaxLength="12" Width="40"/>
End Date: <asp:TextBox runat="server" ID="PartyRelationshipEndDateTextBox" MaxLength="12" Width="40"/>
</td>
</tr>
<tr>
<td colspan="2">
<asp:LinkButton runat="server" ID="AddPartyRelationshipAddLink">Add</asp:LinkButton>
<asp:LinkButton runat="server" ID="AddPartyRelationshipCancelLink">Cancel</asp:LinkButton>
</td>
</tr>
</table>
</div>
</asp:Panel><!-- end AddPartyRelationshipPanel -->
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel runat="server" ID="ClassificationMembershipHeaderPanel">
<table
cellpadding="0"
cellspacing="0"
class="editHeader"
style="
border-left-width:1px;
border-left-style:solid;
border-left-color:Gray;
border-right-width:1px;
border-right-style:solid;
border-right-color:Gray;
border-top-width:1px;
border-top-style:solid;
border-top-color:Gray;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:Gray

"
>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
<tr>
<td> <b>CLASSIFICATION MEMBERSHIPS</b></td>
</tr>
<tr><td><img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px" /></td></tr>
<tr>
<td>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel runat="server" ID="ClassificationMembershipPanel">
<table
cellpadding="0"
cellspacing="0"
width="100%"
class="editContent"
style="
background-color:#ddd5bd;
border-left-width:1px;
border-left-style:solid;
border-left-color:Gray;
border-right-width:1px;
border-right-style:solid;
border-right-color:Gray;
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:Gray
"
>
<tr>
<td>
<img alt="spacer" src="http://pics.10026.com/?src=../images/spacer.gif" height="5" width="510px"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>

<!-- controls the Relationships/Memberships panels -->
<atlasToolkit:CollapsiblePanelExtender ID="IssuerIssuerRelationshipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
ID="IssuerIssuerRelationshipCollapsiblePanelExtenderProperties"
TargetControlID="IssuerIssuerRelationshipPanel"
ExpandControlID="IssuerIssuerRelationshipHeaderPanel"
CollapseControlID="IssuerIssuerRelationshipHeaderPanel"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>
<atlasToolkit:CollapsiblePanelExtender ID="IssuerPartyRelationshipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
ID="IssuerPartyRelationshipCollapsiblePanelExtenderProperties"
TargetControlID="IssuerPartyRelationshipPanel"
ExpandControlID="IssuerPartyRelationshipHeaderPanel"
CollapseControlID="IssuerPartyRelationshipHeaderPanel"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>
<atlasToolkit:CollapsiblePanelExtender ID="ClassificationMembershipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
ID="ClassificationMembershipCollapsiblePanelExtenderProperties"
TargetControlID="ClassificationMembershipPanel"
ExpandControlID="ClassificationMembershipHeaderPanel"
CollapseControlID="ClassificationMembershipHeaderPanel"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>
<atlasToolkit:CollapsiblePanelExtender ID="AddPartyRelationshipCollapsiblePanelExtender" runat="Server">
<atlasToolkit:CollapsiblePanelProperties
ID="AddPartyRelationshipCollapsiblePanelExtenderProperties"
TargetControlID="AddPartyRelationshipPanel"
ExpandControlID="AddPartyRelationshipLink"
CollapseControlID="AddPartyRelationshipCancelLink"
Collapsed="True"
SuppressPostBack="true"
/>
</atlasToolkit:CollapsiblePanelExtender>

<!-- Javasctipt to handle post expand/collapse behaviors -->
<script language="javascript" type="text/javascript"
var PartyRelationshipTypeDropDown;
var ParentHierarchyRoleDropDown;
var IssuerIssuerRelationshipBehavior;
var IssuerPartyRelationshipBehavior;
var ClassificationMembershipBehavior;
var AddPartyRelationshipBehavior;

function pageLoad()
{
//init the dropdown references
ParentHierarchyRoleDropDown = Sys.Application.findObject("ParentHierarchyRoleDropDown");
PartyRelationshipTypeDropDown = Sys.Application.findObject("PartyRelationshipTypeDropDown");

//init collapsible panel events
HookupCollapsiblePanelEvents();
}

//this function initially hooks up the event handlers for the collapsible panels on the page
function HookupCollapsiblePanelEvents()
{
IssuerIssuerRelationshipBehavior = $object("IssuerIssuerRelationshipCollapsiblePanelExtenderProperties");
IssuerIssuerRelationshipBehavior.expandComplete.add(Function.createDelegate(null, issuerIssuerRelationshipPanel_OnExpanded));
IssuerIssuerRelationshipBehavior.collapseComplete.add(Function.createDelegate(null, issuerIssuerRelationshipPanel_OnCollapsed));

IssuerPartyRelationshipBehavior = $object("IssuerPartyRelationshipCollapsiblePanelExtenderProperties");
IssuerPartyRelationshipBehavior.expandComplete.add(Function.createDelegate(null, issuerPartyRelationshipPanel_OnExpanded));
IssuerPartyRelationshipBehavior.collapseComplete.add(Function.createDelegate(null, issuerPartyRelationshipPanel_OnCollapsed));

ClassificationMembershipBehavior = $object("ClassificationMembershipCollapsiblePanelExtenderProperties");
ClassificationMembershipBehavior.expandComplete.add(Function.createDelegate(null, classificationMembershipPanel_OnExpanded));
ClassificationMembershipBehavior.collapseComplete.add(Function.createDelegate(null, classificationMembershipPanel_OnCollapsed));

AddPartyRelationshipBehavior = $object("AddPartyRelationshipCollapsiblePanelExtenderProperties");
AddPartyRelationshipBehavior.expandComplete.add(Function.createDelegate(null, addPartyRelationshipPanel_OnExpanded));
AddPartyRelationshipBehavior.collapseComplete.add(Function.createDelegate(null, addPartyRelationshipPanel_OnCollapsed));
}

function issuerIssuerRelationshipPanel_OnExpanded()
{
//make sure that dropdowns are visible
}

function issuerIssuerRelationshipPanel_OnCollapsed()
{}

function issuerPartyRelationshipPanel_OnExpanded()
{}

function issuerPartyRelationshipPanel_OnCollapsed()
{}

function classificationMembershipPanel_OnExpanded()
{}

function classificationMembershipPanel_OnCollapsed()
{}

function addPartyRelationshipPanel_OnExpanded()
{}

function addPartyRelationshipPanel_OnCollapsed()
{}

</script
</asp:Content
More nested collapsible panel nonsense! it get even more frustrating, because it only screws up sometimes! Now, the inner collabsible panel expands, but its contents are invisible!

That's coming back null because no client-side object has been created for it. You want:

var dd = $("ParentPropertyDropDown"); // this gives you the DOM elemenet

or

var dd = new Sys.UI.Select("ParentPropertyDropDown); // this gives you an Atlas object that wraps the DOM element.

the CollapsiblePanelProperties is missing an ID property. it makes the asp.net designer complain when switching into design mode.
It shouldn't. ID's aren't required on properties declarations.