More in this section

Forums / Developing with Sitefinity / Site Panelbar - how to stop expanding on item click

Site Panelbar - how to stop expanding on item click

7 posts, 0 answered
  1. Randel
    Randel avatar
    50 posts
    Registered:
    30 Aug 2012
    15 Oct 2008
    Link to this post
    I’m using a Site Panelbar as a small sub-nav and would like to stop it from expanding, before loading its page.  This is causing a visual issue for some people.  They don’t mind it flickering, because it’s  loading a new page.  But they have issues with it expanding before navigating.  Is there any way to stop the initial expand?
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    16 Oct 2008
    Link to this post
    Hello Randel,

    Try using the following code in ~\Sitefinity\UserControls\Navigation\SitePanelbar.ascx

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SitePanelbar.ascx.cs" Inherits="UserControls_SitemapPanelbar" %> 
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
     
    <script type="text/javascript"
    function OnClientItemClicking(sender, args) 
       var item = eventArgs.get_item(); 
       var navigateUrl = item.get_navigateUrl(); 
       if (navigateUrl && navigateUrl != "#") 
       { 
          var proceed = confirm("Navigate to "+ navigateUrl + " ?"); 
          if (!proceed) 
          { 
             eventArgs.set_cancel(true); 
          } 
          else 
          { 
             eventArgs.set_cancel(false); 
          } 
       } 
    </script> 
     
    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false"/> 
    <telerik:RadPanelBar ID="RadPanelbar1" runat="server" DataSourceID="SiteMapDataSource1" OnItemDataBound="RadPanelbar1_ItemDataBound" EnableViewState="false" OnClientItemClicking="OnClientItemClicking" > 
     
    </telerik:RadPanelBar> 

    I hope this helps.


    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Randel
    Randel avatar
    50 posts
    Registered:
    30 Aug 2012
    16 Oct 2008
    Link to this post
    Ivan,

    This is perfect.  Thanks for the help.
  4. Randel
    Randel avatar
    50 posts
    Registered:
    30 Aug 2012
    16 Oct 2008
    Link to this post
    Ivan,

    Again, thanks for the code.  It works perfect in Firefox 3.0; but in IE 7, I am getting a runtime error message when I click one of the subnav items.


    A Runtime Error has occurred.
    Do you wish to Debug?

    Line: 132
    Error: 'eventArgs' is undefined.

    Any suggestion?
  5. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    17 Oct 2008
    Link to this post
    Hello Randel,

    Change the base type for classes that contain event data to eventArgs on line 5 of the code. you could give a try to the following:

    <script type="text/javascript"
     
    function OnClientItemClicking(sender, eventArgs)   
        {   
            var item = eventArgs.get_item();   
            if(item.get_expanded() == true)   
            {   
                item.collapse();   
                eventArgs.set_cancel(true);   
            }   
            else   
            {   
                item.expand();   
            }   
        }   
    </script>  

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Randel
    Randel avatar
    50 posts
    Registered:
    30 Aug 2012
    17 Oct 2008
    Link to this post

    Ivan,

    Thanks again for all the help.  To get the desired functionality, this is what I've come up with.  I'm not saying it's "best practices"; nor am I saying it's correct.  Do you have any other ideas and/or better coding concepts?

    <script type="text/javascript"> 
      function OnClientItemClicking(sender, args){
        if(GetBrowserInfo() == "IE"){
          var item = args.get_item();

         
    if(item.get_expanded() == true){
            item.collapse();
            args.set_cancel(true);
          }
          else{
            item.expand();
          }
        }
        else{
          var item = eventArgs.get_item();
          var navigateUrl = item.get_navigateUrl();
          
          if(navigateUrl && navigateUrl != "#"){ 
            var proceed = confirm("Navigate to "+ navigateUrl + " ?");

            
    if(!proceed){ 
              eventArgs.set_cancel(true); 
            }
            else{
              eventArgs.set_cancel(false);
           
         
        }
     

      function GetBrowserInfo(){
        switch(navigator.appName.toLowerCase()){
          case "microsoft internet explorer":
            return "IE";
         
          case "netscape":
            if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
              return "FF";
            }
            else if(navigator.userAgent.toLowerCase().indexOf("safari") != -1){
              return "SF";
            }
            else{      
              return "NS";
            }
         
          default:
            return "UNKNOWN";
        }    
      }
    </script>






  7. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    23 Oct 2008
    Link to this post
    Hi Randel,

    Please find the solution that I came up. It works in IE and Firefox without problems.

    <script type="text/javascript">function OnClientItemClicking(s,e) 
    e.get_item().set_expanded(!e.get_item().get_expanded()); 
    </script> 
     

    I hope this helps.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Register for webinar
7 posts, 0 answered