Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > Collapse onload

Answered Collapse onload

Feed from this thread
  • Chris Intermediate avatar

    Posted on Aug 25, 2008 (permalink)

    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>

    Reply

  • Paul Paul admin's avatar

    Posted on Aug 25, 2008 (permalink)

    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.

    Reply

  • Chris Intermediate avatar

    Posted on Aug 25, 2008 (permalink)

    I get an error of Object not set to a reference using the code you provided.

    Reply

  • Chris Intermediate avatar

    Posted on Aug 25, 2008 (permalink)

    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>

    Reply

  • Chris Intermediate avatar

    Posted on Aug 26, 2008 (permalink)

    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.

    Reply

  • Chris Intermediate avatar

    Posted on Aug 27, 2008 (permalink)

    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>

    Reply

  • Answer Paul Paul admin's avatar

    Posted on Aug 28, 2008 (permalink)

    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.

    Reply

  • Steve Newbery Intermediate avatar

    Posted on May 22, 2009 (permalink)

    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

    Reply

  • Paul Paul admin's avatar

    Posted on May 25, 2009 (permalink)

    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.

    Reply

  • Steven avatar

    Posted on Dec 29, 2011 (permalink)

    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?

    Reply

  • Steven avatar

    Posted on Dec 29, 2011 (permalink)

    I added a firsttime routine to the JS and it works for me...  Search on "Firsttime Javascript" and you will find it...

     

    Reply

  • Clive Hoggar Master avatar

    Posted on Jan 14, 2012 (permalink)

    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. 


    Reply

  • Kate Kate admin's avatar

    Posted on Jan 18, 2012 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > Collapse onload
Related resources for "Collapse onload"

[  ASP.NET PanelBar Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]