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 not working after partial page postback in Beta 2

Hi

I have a custom extender that worked fine under Beta 1 but has problems withUpdatePanels and partial page postbacks under Beta 2.

It appears that the behavior.js script resource associated with the extender is not send to the client after a partial page postback. The 'initialize' function on the behavior is not called after the partial page postback. The 'dispose' function is call the first time the partial page postback is execute so I would assume that the 'initialize' function should be called after the partial page postback has completed in order for the event handlers to be hooked up again.

The extender works perfectly when used outside of anUpdatePanel.

Any suggestions would be appreciated.

Cheers

I have the same problem with the collapseable panel. Did you find a solution?

I'm getting extremely annoyed, I've been searching and trying things for three days straight related to this. It seems that with Beta 2 your custom extender registers the $create() statement fine and is intialized properly within an update panel, but when you do a partial postback of this updatepanel the dispose method is never called, and the initialize is never recalled, so while you have the appropriate HTML Dom elements you no longer have anything hooked up to your client extender. I have seen SEVERAL posts about this in all the forums and not one response from microsoft. THis is the biggest issue keeping us from moving forward with our development. I at least want someone to acknowledge it's a problem. PLEASE MICROSOFT I'M BEGGING YOU TELL ME WHY MY CONTROLS WON'T DISPOSE FOR THE LOVE OF PETE.... okay I feel better now, but only slightly because my controls still don't work.

I also noticed this is a problem with any of the tookit extenders, I threw a watermark extender in anupdate panel and it works fine on the initial load, but fails to after a partial postback.

I have a sample app ready to go, very simple and it clearly identifies the problem, one page with an updatepanel a scriptmanager and a watermark extender and a button inside the update panel. When the page loads, the extenderhas the watermark text in it, when you hit the test button performing a partialpostback, no more watermark. Problem is I can't include it, anyone know how?

hello.

can you put it somewhere and send us the link?

I don't really have a public site I can put it to. I tried to attach it to the thread but it said I didn't have permission. Any ideas, if not send me a private reply and I'll send it to you if you have a place you can put it. Luckily it's a real simple website with only one page but it doe show the problem.

hello.

send it to my mail (get it from the profile) and refer the thread id on the mail message.

Thanks to Luis doing some work this weekend he figured out that in the simple example all that was needed was to change the enableeventvalidation to true and this caused the extender to work properly. However, now that I flip that in my main application I'm getting this error.

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@.Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the
data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

So the pain continues. Luis did make a point I agree with, whether or not EnableEventValidation="true" should not hinder these controls from working, specifically when to get the cascadingdropdown to work it needs to be set to false as I've seen in other posts. I'm opening a bug in codeplex this morning, but if anyone has been able to get their custom controls to work within an update panel please let me know. These bugs or incosistencies or whatever they are, are killing us. Everything was working great till this Beta release.

I've entered this as a bug

http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=5795

reading this post 2 days agou would have saved me 2 days of debugging (if only it would have been posted 2 days ago)

Anyway, I totally confirm this issue and I am voting it now on codeplex (http://www.codeplex.com/WorkItem/View.aspx?ProjectName=AtlasControlToolkit&WorkItemId=5795)

Thank god I no longer feel alone :) I've been trying everything for about 5 days straight now, our development has totally come to a crawl. I have a workaround in ming I am going to try this week, it'll be a temporary hack but I'll pst it when I'm done if it works.

zuke004:

Thank god I no longer feel alone :) I've been trying everything for about 5 days straight now, our development has totally come to a crawl. I have a workaround in ming I am going to try this week, it'll be a temporary hack but I'll pst it when I'm done if it works.

:)

You are not alone mate! My last 2 days were hell because of this issue. would you mind to share the temporary hack you had in mind?

And I am getting all my friends and colleagues that I've dragged with me into this issue trying to spot the problem to vote the bug you've logged on codeplex so that it gets prioritized

hello.

well, unfortunatelt, this seems to be an internal error which is very difficult to debug, i've found where the problem, but i still haven't understood why the code was written like that. the problem lies in the renderformcallback method of the pagerequestmanager class.

here's the code that is responsible:

if (this._owner.IPage.EnableEventValidation)
{
HtmlTextWriter writer2 = new HtmlTextWriter(TextWriter.Null);
foreach (Control control1 in containerControl.Controls)
{
control1.RenderControl(writer2);
}
}
rendering the control is necessary for the watermark extender to add the necessary scripts into the page (they'll ony be added if the render method of the scriptmanager control renders itself, ie, if its render method is called and this will only happen when EnableEventValidation is true as you can see from the previous code).

since this is a private auxiliary class used by scriptmanager, there's not much that can be done for now...

Hi Luis and thank you very much for your answer.

Could you recommend any partial/temporary solution that we could use for the moment (sorry for being lazy and asking such questions :)

Extender fails after partial postback in IE7 only

I have a simple extender which sets focus to a textbox when the page loads. In IE after a partial postback this control doesn't reset the focus. It does work on page load however and it works every time in FireFox. Any suggestions? Below is the JS for the extender:

Type.registerNamespace('AjaxFocus');

AjaxFocus.AjaxFocusBehavior = function(element)
{
AjaxFocus.AjaxFocusBehavior.initializeBase(this, [element]);
}

AjaxFocus.AjaxFocusBehavior.prototype =
{
initialize : function()
{
AjaxFocus.AjaxFocusBehavior.callBaseMethod(this, 'initialize');

var e = this.get_element();

if (e != null)
e.focus();
},

dispose : function()
{
AjaxFocus.AjaxFocusBehavior.callBaseMethod(this, 'dispose');
}
}

AjaxFocus.AjaxFocusBehavior.registerClass('AjaxFocus.AjaxFocusBehavior', AjaxControlToolkit.BehaviorBase);

Is the Extender inside of the update panel?

Expand Accordion pane via hyperlink/event

Hello,

Is there a simple way to do a postback for a specific accordion pane via a hyperlink event ie __doPostBack, i have

id appreciate any pointers or direction

Thanks in advance

yes, but you have change original source code in accordion.

you cant do it by modifiy properties setting

Thats a feasable plan. Is there a reference you could point me to?

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

Is

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

Is

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

Is

there

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any one

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any one be of

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any

After looking at this source

 // OnClick handler to open the desired pane _onHeaderClick : function(evt) { // Get the appropriate event object depending on the browser // (note: this.may go away when we remove the Safari compat fix in Common) if (!evt) { evt = window.event; } // Get the control that raised the event var header = evt.target; // Walk up its control hierarchy until we find the accordion // pane's header which we marked with the paneIndex field while (header && (typeof(header.paneIndex) === 'undefined')) { header = header.parentNode; } // Select this.pane (which saves it to ClientState and initiates // an animation to show the content pane) this.set_SelectedIndex(header.paneIndex); return false; },

Im guessing that i need to attach this event type to my hyperlink. does anyone know how i could attach this event or raise this code for a specific index like

funcion ExpandPane(IndexNo) {

??header= 'Accordion' + IndexNo

?

}

could

any one be

oops, sorry about that . it looks like i submitted the form before i was done typing and it submitted a bunch...

could someone take care of this

i only wanted to say could anyone be of any help?

Executing Client Side JS after an async postback event returns

My issue has to do with firing a purely client side javascript event after the async postback returns from the server. I have scoured the documentation and these forums and not found, what I am sure to be a very simple thing to do. If anyone can point me in the right direction that would be greatly appreciated.

TIA

more information would be helpful.

Are you using JavaScript for the postback or an Ajax control, or what?

I'm using the AJAX ASP.NET controls. I have a single update panel that when it returns from processing an async event, I want it to automatically execute a JavaScript method that performs some UI effects.

This is exactly the same problem that we are experiencing. We are having a terrible time accomplishing this task and we need help as well.

If we register a "start-up" JavaScript block, it runs only once when the page first loads. It does not run again, even if we execute the same code.

Please help!

I think I found a solution:

http://ajax.asp.net/docs/overview/AJAXClientEvents.aspx

This describes how you can run client-side events after every successful AJAX UpdatePanel refresh. I used "PageLoading" and "PageLoaded" methods to accomplish what I need.

I have now found how to get back to the client-side JS by implementing this :

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);function EndRequestHandler(sender, args) { //do stuff here }

However, what I can't figure out now is what information is available to be able to figure out, for example, what event triggered the postback event, or what methods were invoked on the server or client side so that I can call the function that i want to process.

check out:

http://www.codeguru.com/csharp/.net/net_asp/scripting/article.php/c5337/

The final solution I came up with did indeed involve the aforementioned EndRequest but also capturing data from the BeingRequest. Not sure if there is a more elegant solution, but here's my JS.

1//This is a global JS variable that will be passed2var _PostBackElement;34//this sets the beginrequest and endrequest handlers5window.onload = function()6{7 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);8 Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);9}101112function BeginRequestHandler(sender, args)13 {14//This captures the element that Creates the15 //async postback into the global variable16 _PostBackElement = args.get_postBackElement();17 }1819function EndRequestHandler(sender, args)20 {21//check for the existence of the ID of the element that22 //caused the postback23if (_PostBackElement.id.indexOf("mSaveSearchButton") > -1)24 {25//do stuff here26 }27else if (_PostBackElement.id.indexOf("mSavedSearchLinkButton") > -1)28 {29//do other stuff30 }31 }

Basically, this captures the ID of the requesting element and then sets it in a global variable, then you use that to determine what action was being taken and on the EndRequest do whatever subsequent UI stuff you want.

That's it!

Try ScriptManager Register Startup Script instead of Page ClientScript Manager.

Execute JS Code onload and on partial postback

Hi All,

I have a ScriptManager tag that contains a script reference to a JS file; "test.js." Test.js contains a function that needs to be executed on the application's loadand on a partial postback.

The reason that it needs to be executed on the application's load event is because if I execute it just using RegisterStartupScripts the script isn't present on the page yet because it is being controlled by Atlas.

So, I create a wrapper function for statement on the fly and I register it to execute on the application's load event. I.e. "Sys.Application.load.add(wrapperFunction);"

That works great the first time through when the page is loaded because the application's load event fires. However, how do I get the same execute statement to fire on a partial postback? The only workaround I have right now is to get a handle to the current ScriptManager and test to see if it is InPartialRenderingMode. If so, I don't do the add to load code, but I just register a startup script instead.

Is there a nicer, easier, cleaner way of doing this.

Thx!!Hi,

I think I have a decent workaround for the moment. My example I was providing was a bit simplistic in comparison with what I actually need to do. I actually needed to completely change what JavaScript commands were executed and their parameters for each time a server side control was loaded. Having said that, the best way I've come up with so far is test on the backend if my ScriptManager is in PartialRenderingMode and handle it accordingly. If it isn't, I use the load event and attach a delegate to execute. If it is, I just execute a the function that was to be the delegate. It's not the prettiest code, but it works reliably and can be repeated for other controls.

Thanks for your help on this.

I need to do the same thing. How did you get it done?

I have a myfuncs.js in the script manager.

I want to call a function in the js file after a updatepanel psotback.

I can not find a good way to fire it. I thought Application.Load would do it but the page only gets loaded once.

and ideas?

I kind of do what I described a few posts back.

I test to see if the control's ScriptManager is in PartialRenderingMode and if so, I just emit the JavaScript straight to the client using the ClientScriptManager.RegisterStartupScript method. If it is not in PartialRenderingMode, I wrap my JavaScript in a function and add it to the Sys.Application.load event and then emit the whole code block to the client again using the RegsiterStartupScript method.

Ex of what it would look like on the client.

function WrappedFunction() {
var x = new Array();
x.push(1);
}

Sys.Application.load.add(WrappedFunction);

OR

var x = new Array();
x.push(1);

HTH

hello.

since the file is already loaded, how about adding an event handler to the propertychanged event and check? there you could check the property that's changedand if it's the inPostBack property and its value is false, you know that you've just finished loading the page. btw, why can't you use the registerstartupscript method? i don't understand what you mean when you say that the script is being controlled by atlas...

Hi.

By "script is being controlled by atlas" I mean that the script file is registered with the ScriptManager.

I.e.
<atlas:ScriptManager ...>
<scripts>
<atlas:ScriptReference path="test.js" ...>
</ ..>
</..
The reason that the script needs to be registered with Atlas is that the function I need to execute on startup and postback has code within it that relies upon the Atlas Sys namespace and therefore must be loaded after the Atlas scripts have been loaded otherwise it'll throw an error complaining it doesn't know what Sys is. (The statement also relies on user input which is the reason it needs to get reexecuted on postback.)

It is my understanding that the page processes any <script ...> tags including any startup scripts first; then loads the Atlas scripts; then loads the scripts that are defined within the ScriptManager Scripts tag.

So, if I just use the RegisterStartupScript method and my scripts are registered with the ScriptManager, my startup statement will execute before the Atlas files (and my custom js file) have been loaded and throw an exception. My code needs to wait for the Atlas files and my custom js file to load before executing so instead, I add the startup statement to a function and add it to the Sys.Application.load event delegate as an event handler. This way it'll wait until Atlas has loaded before executing.

This works fine for the load, but one of the function's parameters is based upon user input and the function needs to be reexecuted whenever the page is postbacked.

The first time through the code looks like

function wrapperFunction () { testFunction (''); }
Sys.Application.load.add (wrapperFunction);

But, on postback the same part of the code would look like

function wrapperFunction () { testFunction('30111'); }
Sys.Application.load.add (wrapperFunction);

Of course, the second code block doesn't do anything on postback because the load event has already fired. To accomplish the same thing on postback the code would just look like:

testFunction ('30111');

as the test.js file where testFunction lives has already been registered and now can be accessed through startup scripts.

(All code blocks are registered to execute on startup.)

I'm not really seeing how I can do what you suggested and add an event to the PageRequestManager as my function call needs to change based upon user input.

So I can test for InPartialRenderingMode in code behind and modify the startup JavaScript accordingly (which is what I'm currently doing), but it seems that there needs to be an event that covers both loading initially and loading after a postback. Emitting a pure JavaScript function call works for postbacks and attaching to the load event of the Application works for loading initially, but I'd like to be able to write one piece of code that works for both cases.

Phew ... I hope that's at least partially clear.

Thx for any and all help.

hello.

yes, now i understand.

handling the propertychanged of the pagerequestmanager is the only way i know to handle the end of partial postback.

what you could do is inject a global variable with the value that you need to pass to your jscript function; since the registerXXX inserted method will be called before the event being fired, you can be sure that the global variable will allways be correctly set up.

To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal
To call specific javascript function or register a new javascript after the update panel partial postback

you can use my custom made control

to download it and to know how to use it

visit my blog.

http://go2amitech.blogspot.com/2010/08/running-specific-javascript-after.html[^]



Amit Panchal