This is a migrated thread and some comments may be shown as answers.

Collapse onload

12 Answers 158 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 25 Aug 2008, 01:16 PM
I have a panelbar that I am using on a masterpage.  I am saving state on it so it will pass the state to the next level.  My issue is, when users select the home page tab to return to the home page, I would like the panelbar to collapse.  I do not want the state to stay the same.  I think my goal can be accomplished by having a collapse on load for my Home masterpage.  I currently use a Javascript to collapse on selecting another level 1 page.  See script below. Can someone tell me how to add an additional javascript that will collapse the panelbar onload.

function collapseItem(panelbar, args)  
        {     
            if(args.get_item().get_items.length < 1)     
            {     
        for (var i=0; i < panelbar.get_items.length; i++)
        {
            panelbar.get_items[i].Collapse();
        }
        }
        }
        </script>

12 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 25 Aug 2008, 01:31 PM
Hello Chris,

Any JavaScript function named pageLoad() will automatically wireup as an Application.Load handler (basically, the client-side version of Page_Load).

Here's a sample code snippet that shows the needed approach.

<script type="text/javascript">  
function pageLoad()     
{  
    var panelbar = $find('<%= ((RadPanelBar)Master.FindControl("RadPanelBar1")).ClientID %>')        
      
    for (var i=0; i< panelbar.get_allItems().length; i++)  
    {  
        panelbar.get_allItems()[i].set_expanded(false);  
    }      
}  
</script> 


Kind regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Chris
Top achievements
Rank 1
answered on 25 Aug 2008, 03:45 PM
I get an error of Object not set to a reference using the code you provided.
0
Chris
Top achievements
Rank 1
answered on 25 Aug 2008, 05:54 PM
Answered my own question. Here is the solution.

<script type="text/javascript"> 
function pageLoad()    

    var panelbar = $find('<%= RadPanelBar1.ClientID %>')       
     
    for (var i=0; i< panelbar.get_allItems().length; i++) 
    { 
        panelbar.get_allItems()[i].set_expanded(false); 
    }     

</script>

0
Chris
Top achievements
Rank 1
answered on 26 Aug 2008, 10:31 PM
This works well to collapse on load, but for some reason it breaks my "Search" on sharepoint.  I have a wildcard search webpart on my sharepoint master page.  When I add this pageLoad function to the page for the panel bar, it will collapse, but when I try to search from my search bar, it throws an exception that says object not set to a reference.  Do you have another idea for collapsing the panelbar?  Basically I need to save state so when a user goes to the next page, the state is saved, but when they return to the home page, i want the state either removed or have the panelbar collapse when they return.
0
Chris
Top achievements
Rank 1
answered on 27 Aug 2008, 03:53 PM
Can someone assist with this script to test if exists, or null or undefined?  I think my issue is I am passing this onload to a page where the panelbar does not exist so it throws the error.  If this javascript can be edited to first check for undefined and if so , do nothing, I think it will work.

Here is what I have right now:

<script type="text/javascript"> 
function pageLoad()    

    var panelbar = $find('<%= RadPanelBar1.ClientID %>')       
     
    for (var i=0; i< panelbar.get_allItems().length; i++) 
    { 
        panelbar.get_allItems()[i].set_expanded(false); 
    }     

</script>
0
Accepted
Paul
Telerik team
answered on 28 Aug 2008, 06:32 AM
Hi Chris,

Please find below a modified version if your JS function that should do the trick.

<script type="text/javascript">    
function pageLoad()       
{  
    var panelBar = null;           
    <%RadPanelBar myControl = (RadPanelBar)ContentPlaceHolder1.FindControl("RadPanelBar1");  
    if (myControl != null)  
        {  
            %>  
                panelBar = $find('<%=myControl.ClientID%>');  
            <%  
        }  
    %>  
      
        if (panelBar)  
        {  
            for (var i=0; i< panelBar.get_allItems().length; i++)    
            {    
                panelBar.get_allItems()[i].set_expanded(false);    
            }  
        }  
 
        else 
        {  
            alert("no panelbar");  
        }  
      
}    
</script> 


Kind regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Steve Newbery
Top achievements
Rank 1
answered on 22 May 2009, 02:16 PM
I have tried using the JavaScript function, and while it does indeed collapse the PanelBar, it always collapses it, so that when I click a panel bar heading, the items beneath expand and then immediately collapse. 

I guess it's because the panelbar posts back - I'm using the OnItemClick event. So what I need is something like the server-side IsPostback, so that I only collapse if this is not a postback. Maybe by setting some var or using a hidden field?

I'd really appreciate some help here.

Thanks, Steve
0
Paul
Telerik team
answered on 25 May 2009, 02:03 PM
Hello Steve,

I think it will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Thanks beforehand for your patience and cooperation,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Steven
Top achievements
Rank 1
answered on 29 Dec 2011, 05:27 PM
I also have the same problem with the JS the panel bar collapses onload but then if you click it will expand and then collapse again.

Any ideas?
0
Steven
Top achievements
Rank 1
answered on 29 Dec 2011, 10:53 PM
I added a firsttime routine to the JS and it works for me...  Search on "Firsttime Javascript" and you will find it...

 

0
Clive Hoggar
Top achievements
Rank 1
answered on 14 Jan 2012, 05:19 PM
Hi

I am trying to collapse the panelbar on load of the home page. The panelbar is in the master page.
Using js like this

<script type="text/javascript">
    function pageLoad() {
        checkMain();
    }
    function checkMain() {
        var panelbar = $find('<%= ((RadPanelBar)Master.FindControl("RadPanelBar1")).ClientID %>')
 
        for (var i = 0; i < panelbar.get_allItems().length; i++) {
            panelbar.get_allItems()[i].set_expanded(false);
        }
    
</script>

However I get run time error   'RadPanelBar' is a type and cannot be used as an expression. .  
What am I missing here?

The script is in the head placeholder in the child page. 


0
Kate
Telerik team
answered on 18 Jan 2012, 03:12 PM
Hi Clive,

Please note that when you use master/content page the ID-s of the controls located in the content page change Refer to step 4 in this article). Therefore I would suggest that use the following line in order to find the RadPanelBar control:
var pb = $find("ctl00_ContentPlaceHolder1_RadPanelBar1");

Greetings,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
PanelBar
Asked by
Chris
Top achievements
Rank 1
Answers by
Paul
Telerik team
Chris
Top achievements
Rank 1
Steve Newbery
Top achievements
Rank 1
Steven
Top achievements
Rank 1
Clive Hoggar
Top achievements
Rank 1
Kate
Telerik team
Share this question
or