Extending Server Controls?

I see this blurb on the tutorials section:

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

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

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

Hi,

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

extending Gridview in Ajax

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

try this code on your rowbound event

protectedvoid GridView1_RowDataBound(object sender,GridViewRowEventArgs e)

{

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

{

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

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

}

}

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

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

-Damien

That's actually very nice thanks Mahadeo.

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

if(strCount.Length > 16)

{

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

}

Extending collapsible panel

Hi!

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

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

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

here's what it looks like in mine:

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

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

Thanks for any help!
Mordecai Zibkoff

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

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

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

Hope this helps!

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

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

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

So you would do something like this:

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

<script>

function onExpandComplete() {

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

function hookPanelCollapse() {

var collapseBehavior = $object("cpb");

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

</script>

Hope that helps.

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

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

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

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

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

Cool UI by the way - looks great.

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

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

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

Thanks for the complement ;)

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

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

ParentHierarchyRoleDropDown comes back as undefined!

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

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

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

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

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

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

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

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

//init collapsible panel events
HookupCollapsiblePanelEvents();
}

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

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

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

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

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

function issuerIssuerRelationshipPanel_OnCollapsed()
{}

function issuerPartyRelationshipPanel_OnExpanded()
{}

function issuerPartyRelationshipPanel_OnCollapsed()
{}

function classificationMembershipPanel_OnExpanded()
{}

function classificationMembershipPanel_OnCollapsed()
{}

function addPartyRelationshipPanel_OnExpanded()
{}

function addPartyRelationshipPanel_OnCollapsed()
{}

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

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

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

or

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

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

Extending CascadingDropDown to update other controls

My idea:

I have a basketball stats website that I'm trying to migrate to AJAX due to its no-postback. I have an "Add Game" page, in which I want to have the user select a team from a drop down list, but then I want to populate a control other than a drop down list (perhaps just a list of some sort, so the user can see all the options). The CascadingDropDown control in the AJAX toolkit accomplishes this for drop down lists, but I'm wondering if it could be extended to other controls?

I hope all of this makes sense. I'm open to more questions if it's unclear.

Thanks.

Tony

Hi,Tony

I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.

To troubleshoot this issue, we really need more source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Thank you.

Extending Autocomplete: Customizing markup

I'm using the script.aculo.us Autocomplete because it is more flexible than the AjaxToolkit Autocomplete... or is it?

My question is, can I get the Toolkit Autocomplete to do the same sort of things as script.aculo.us?

http://demo.script.aculo.us/ajax/autocompleter_customized

In the above demo, start typing "ada" in the field. Notice how each item in the list is customised: each item has an image, some bold text (the name) and some other text (the email). This is because script.aculo.us gets HTML returned (e.g. from an <asp:Repeater>) RATHER THAN a string array from a webservice. This means you have complete control over WHAT each item looks like and contains. Sure, they are building in CSS support for the Toolkit version, but you still don't have control over what's contained in each listitem (i.e. defining the markup for each item). I use the scipt.aculo.us Autocomplete by having some hidden elements, too, so I can store Ids along with displaying the text.

I'm looking for something similar to <ItemTemplate> for Autocomplete, similar to the <ItemTemplate> for the Repeater and GridView controls.

If this is "too hard" to implement then why have this statement on the toolkit project page (http://www.codeplex.com/Wiki/View.aspx?ProjectName=AtlasControlToolkit)

"the Toolkit aims to be the biggest and best collection of web-client components available."

Well, at the moment, I can name one Autocompleter out there which does a better job than the toolkit one: script.aculo.us. Don't take it the wrong way, I really like the toolkit and I really wouldrather use the toolkit than script.aculo.us, but at the moment, the toolkit version doesn't have the same amount of flexibility.

Hello? Anyone have a comment on this?

Hi,

There is a workitem open for the same issue over at codeplex .

HTML-Tag for AutoComplete List

http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=9339

You can vote for it so that someone picks it up or contribute your own patch to extend the ACE to incorporate this behavior.

Extenders: Using complex types inside my Behavior.js javascript?

I added some complex types to my PanelExtender.vb that represents lists of numerical values:

Public Class ChartPanelExtenderInherits ExtenderControlBase(Of ChartPanelProperties, Panel)Private _dataseriesAs ArrayListPublic Sub AddSerie(ByVal p_serieAs DataSerie) _dataseries.Add(p_serie)End Sub Public Class DataSeriePrivate _valuesAs ArrayListPrivate _nameAs String Public Sub New(ByVal serieNameAs String) _name = serieNameEnd Sub Public Sub AddValue(ByVal p_valueAs Integer) _values.Add(p_value)End Sub Public Property Name()As String Get Return _nameEnd Get Set(ByVal valueAs String) _name = valueEnd Set End Property End Class End Class

Although I can easily create and add data series to my PanelExtender on the server-side (aspx page):

 Public Sub Page_load(ByVal sender As Object, ByVal e As EventArgs) Dim mySerie As New ChartPanelExtender.DataSerie("MyData") mySerie.AddValue(2) mySerie.AddValue(3) mySerie.AddValue(4) ' this is the name of the control in the page ChartPanelExtender1.AddSerie(mySerie) End Sub

I cannot figure how to access this data inside my javascript PanelBehavior.js code?
Do I need to somehow serialize/deserialize it manually?
How can I pass this data to the PanelBehavior.js script?

Any suggestions would be appreciated including telling me I am way off and giving an alternative hehe. All I really need is a way to pass data series to the behavior script.

Thanks in advance

PascalThe typical way of getting information to a JS behavior is via one of its properties. Your server code might transform the list somehow so that it can be safely passed to the behavior in a string (ex: [a, b, c] -> "a,b,c") and then the behavior can transform the string back into the data it represents. We're considering adding JSON support to this scenario so that more complex data types could be communicated more easily, but haven't done so yet, so the ->string-> technique may be a good choice for now. Hope this helps!
Okies, will see if JSON gets added in next CTP.
Thanks for the reply :)

Pascal

Extenders: Sub-categories for properties in design-mode?

I noticed that when creating properties for an extender control that they appear by default on the target control properties display in the designer all under the same category (the extender control name). The <category> attribute of the extender properties seems simply to be ignored. My control has a lot of properties (client-side charts) and it would be nice to be able to categorize them.

Is there a way to actually create sub-categories under the ExtenderName category for properties on the targeted control?

Thanks in advance,
Pascal

Unfortutately not, the property grid doesn't support categories on sub-objects. There really isn't a clean solution for this as an extender, but based on your description, I'm not sure an extender is what you really want to be using.

My guess is that you want to write a control that emits an extender as part of it's rendering process. That way, you can expose the properties via your control as you would a normal component, and then just pass those values down to the extender via code.