Collapse onload

13 posts, 1 answers
  1. Chris
    Chris avatar
    120 posts
    Member since:
    Jun 2006

    Posted 25 Aug 2008 Link to this post

    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>
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    120 posts
    Member since:
    Jun 2006

    Posted 25 Aug 2008 Link to this post

    I get an error of Object not set to a reference using the code you provided.
  5. Chris
    Chris avatar
    120 posts
    Member since:
    Jun 2006

    Posted 25 Aug 2008 Link to this post

    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>

  6. Chris
    Chris avatar
    120 posts
    Member since:
    Jun 2006

    Posted 26 Aug 2008 Link to this post

    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.
  7. Chris
    Chris avatar
    120 posts
    Member since:
    Jun 2006

    Posted 27 Aug 2008 Link to this post

    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>
  8. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 28 Aug 2008 Link to this post

    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.
  9. Steve Newbery
    Steve Newbery avatar
    103 posts
    Member since:
    Apr 2005

    Posted 22 May 2009 Link to this post

    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
  10. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 25 May 2009 Link to this post

    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.
  11. Steven
    Steven avatar
    9 posts
    Member since:
    Dec 2011

    Posted 29 Dec 2011 Link to this post

    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?
  12. Steven
    Steven avatar
    9 posts
    Member since:
    Dec 2011

    Posted 29 Dec 2011 Link to this post

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

     

  13. Clive Hoggar
    Clive Hoggar avatar
    334 posts
    Member since:
    Nov 2008

    Posted 14 Jan 2012 Link to this post

    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. 


  14. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Jan 2012 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017