How to expand or collapse when we click on the header text of Webpanel?
The panel has the ability to expand/collapse when you doubleclick on the header. If you want to have it close on a single click, you'll need to add a click event handler to the header element, and use the client-side object model to collapse the panel.
http://help.infragistics.com/Help/NetAdvantage/NET/2007.3/CLR2.0/html/WebPanel_CSOM.html
-Tony
Hi Tony
Sorry if this is a dumb question, but how do I add an onclick event handler to the text header of the webpanel? From there I can definitely use the CSOM object which I am familiar but I am completely stuck as to how to create this on click handler since its not listed as a client event in the attributes of the webpanel or header
Many thanks for your excellent support
Regards
Richard
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
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?
<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.