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.

Extender control CalendarExtender1 cannot extend DropDownList1

there is no problem when i try to extend the Calendar extender to the text box it is running fine, but

the Exception is :'AjaxControlToolkit.CalendarExtender' cannot extend controls of type 'System.Web.UI.WebControls.DropDownList',

im getting this Exception when i try to extend Ajax-calender Extender conrtol to dropdownlist,i have assigned the dropdown list control in the targetcontrolid of the Calender extender and set the dateformat and popup control id ,is ther any other thing i should do get this right,

Prakash,

Telesoft India ,Bangalore.

that is because the calendar extendar is designed to work with a textbox. If you really want the result in a drop down list you could try putting a textbox on your field and making it hidden. Then attach the calendar extender to that hidden textbox and when the user clicks a date, assign the drop down list to the value of the textbox

everything was fine, when suddenly AJAX Stopped working

I was working on a small AJAX application on a windows 2003 server web application running on IIS 6.0

I putted an AJAX timer control on the web form

and on the Tick Event I wanted a label called Label1 to take the current time every second

code:

Label1.Text = Now.ToString()

It was working , but somehow I was changing in the IIS configuration when the application stops working

I tried the same application on another PC (windows xp + Visual Studio 2005), it worked fine in debugging mode

so I installed Visual Studio 2005 on the server to know what's the problem, and in debugging mode, the application starts normally, but the label does not change its text value

I uninstalled AJAX Extensions, reinstalled again, nothing changed

I tried : aspnet_regiis -i

nothing changed, please help, I tried a lot, I think there is something about security scripts on the server that is not allowing AJAX scripts to work.

thanks in advance.

Hi,

Please make sure the virtual directory isconfigured as a Application and using the asp.net 2.0.

1. Run inetmgr command

2. Expand and navigate to the virtual directory

3. Right click it and select properties

4. Click Create Button in Application Settings section

5. Active ASP.NET tab

6. Make sure asp.net version is correct

Hope this helps.