How to expand or collapse when we click on the header text of Webpanel?
This information is unavailable. As a matter of fact, I can't find any examples of coding the even handler for the WebPanel expand/collapse functionality. I am writing a web part and using the webpanel but I can't get to any information on the collapse funtionality except to use the CSOM element. How do you do that?
I am pasting my solution here on request :)
Replace the image with an image with the same height and width as the box you wish to span (ExpansionIndicator). Remove the text from the header and thats it. I believe the textalignment must also be set left as below and i think it automatically spans the image to the left ie rght aligned.
hope this helps
richard
<igmisc:WebPanel ID="WebPanel1" runat="server" Width="173px" StyleSetName="" CssClass="expandartistsearch"> <Template> <uc5:ArtistSearch ID="ArtistSearch1" runat="server" /> </Template> <Header TextAlignment="Left"> <ExpandedAppearance> <Styles> <Padding Left="5px" /> </Styles> </ExpandedAppearance> <ExpansionIndicator CollapsedImageUrl="../Images/panel-open.gif" ExpandedImageUrl="../Images/panel-collapse.gif" /> </Header> </igmisc:WebPanel>
Hi I have done a work around for this. I have made the image span right across the webpanel and all works well
Regrds
Rich
Hi Tony
Thanks for your reply, sorry if I am being a dunce but the call to igpnl_getPanelById is always returning underined, I have placed the code below should you see any errors. Cant get this to work now for 1/2 a day and my head is aching. Am i missing somehting silly?
Regards
Richard
<script type="text/javascript"><!--var panel = igpnl_getPanelById('WebPanel1');alert(panel);//var header= panel.getHeader();//header.onclick = alertme;function alertme() { alert("I have been clicked");}// --></script><div id="maincontenttopspacer"></div><div class="maincontentouter"> <div id="innercontainer"> <!--left panel--> <div class="leftpanel"> <!--left menu--> <uc1:LeftMenu ID="LeftMenu1" runat="server" /> <igmisc:WebPanel ID="WebPanel1" runat="server" Width="173px" StyleSetName="" CssClass="expandartistsearch"> <Template> <uc5:ArtistSearch ID="ArtistSearch1" runat="server" /> </Template> <Header Text="Artist Search" TextAlignment="Left"> <ExpandedAppearance> <Styles> <Padding Left="15px" /> </Styles> </ExpandedAppearance> </Header> </igmisc:WebPanel> <div class="clear"></div> <!--left panel login box--> <uc2:LoginBox ID="LoginBox1" runat="server" /> </div> <!--main inner content--> <div class="innerpanel"> <div class="centralheader"> <h1>Recent Acquisitions</h1> </div> <uc6:PublicList ID="PublicList1" runat="server" /> <div class="clear"> </div> </div> <!--end inner panel--> <!--right panel--> <div class="rightpanel"> <uc4:PanelLinks ID="PanelLinks1" runat="server" /> </div> <!--end right panel--> </div> <div class="clear"></div> </div></asp:Content>
Richard,
The panel doesn't expose a click event handler for the header. It has built-in functionality for a double click on the text, or a single click on the expansion indicator. You'll want to get a reference to the header element itself (use the CSOM to get the header object, and then access the .Element property off of it) and add a click even directly to the HTML element. Sorry there isn't an easier way. Moving forward we will be exposing more of the browser level events on our objects, but right now they are a bit locked down from a server-side perspective.
-Tony