Main Menu
Knowledge Base
Product Registration
Log an Incident
Request a Feature
Search Incidents/Bug Reports


Search KB

Please note: In an effort to better serve you, we are in the process of restructuring DevCenter. In the process, we have moved many items that you may be used to finding in DevCenter over to the Main Site. If you are having trouble locating something, please try looking at the following places:

Knowledge Base Article: KB010100

HOWTO:How to change the position of the expansion indicator on a WebPanel


The information in this article applies to:
WebMisc (v6.2.20062, 6.3.20063, 7.1.20071, 7.2.20072, 7.3.20073)		   Article Created: 
1/7/2008

Last Updated:
1/7/2008

Article Type: 
How To		   
Page Options
Average Rating:
5 out of 10
Rate this page
Print this page
E-mail this page
Add to Favorites

Summary

Occasionally to change the aesthetic design of the web page, the developer would like to reposition the expansion indicator on the WebPanel. By default, the expansion indicator is displayed on the right side of the header. Unfortunately, the WebPanel does not provide a property to change its location. However, this can be accomplished using some simple JavaScript.

Step-By-Step Example

1) Add the follow JavaScript code into a Script block on the page:
In Javascript:

function LoadPanel()
{
    ig_getWebControlById("<%=WebPanel1.ClientID %>").getHeader()._imageElement.style.styleFloat = "left";
}

2) As the WebPanel does not have a client-side initialization event, a client-side event that fires after the page has been properly loaded must be used. The client-side “onload” event of the Body tag can be used. Set the “onload” attribute of the Body tag to refer to the JavaScript function added in the previous step, similar to:
In HTML:

<body onload="javascript:LoadPanel();">

In place of the JavaScript added in step 1, the following JavaScript function can be used to make the code slightly easier to read:
In Javascript:

function LoadPanel()
{
    //get the panel
    var panel = ig_getWebControlById("<%=WebPanel1.ClientID %>");

    //get the Header
    var header = panel.getHeader();
            
    //change the alignment on the rendered image element
    header._imageElement.style.styleFloat = "left";
}

Related Articles

HOWTO: Changing the header text of the WebPanel on the client side (KB09987)

How would you rate the quality of this content?
Poor -----------------------------------------> Outstanding

Tell us why you rated the content this way. (optional)