+1-888-365-2779
Try Now
More in this section

Sitepanelbar

20 posts, 0 answered
  1. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    11 Dec 2009
    Link to this post


    Hi,

    I want to change the appearance of sitepanelbar. I think sitepanelbar is using the default (embedded) css from the radpanelbar. Please let me know, how I can create a new css or skin file and apply to sitepanelbar.

    Thanks
    Satya
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    09 Dec 2016
    13 Dec 2009
    Link to this post
    Hello Satya Vepa,

    SitePanelBar is the RadPanelBar control. I suggest that you should go through the following articles.


    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    14 Dec 2009
    Link to this post
    Thanks Ivan.
    I am able to change the skins and style. I have another question. By default all the menu items are expanded . is there a way i can expand the first menu item and when the user click expand the selected item. right now the menu is shown like
    Item1
       subItem1
       subItem2
       subItem3
    Item2
      subItem1
      subItem2
      subItem3
    Item3
      subItem1
      subItem2
      subItem3

    What I need is
    Item1
      subItem1
      subItem2
      subItem3
    Item2
    Item3






  4. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    15 Dec 2009
    Link to this post
    Hi Satya Vepa,

    When you go to your page or template where you have added the Site Panelbar control click edit on the control. go to section Misc click Edit for the RadPanelBar field. Then go to section Behavior and modify the ExandMode property, refer to attached image.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    15 Dec 2009
    Link to this post
    Thank you for the Reply. I tried that but still when the page is loaded All the items are expanded. do we have to make any code changes in the code behind. right now I see the following code in the sitepanelbar.cs

     

    if (!Page.IsPostBack)

     

    {

    ICmsUrlContext urlContext = CmsUrlContext.Current;

     

    if (urlContext != null)

     

    {

    RadPanelbar1.DataBind();

     

    string currentUrl = UrlHelper.ResolveUrl(urlContext.Path);

     

     

    foreach (RadPanelItem item in RadPanelbar1.GetAllItems())

     

    {

     

    if (currentUrl.Equals(item.ResolveUrl(item.NavigateUrl), StringComparison.OrdinalIgnoreCase))

     

    {

    item.Selected =

    true;

     

    item.Expanded =

    true;

     

    item.ExpandParentItems();

     

    break;

     

    }

    }

    }

    }

    do suggest any code changes to make sure when the page is loaded only the first item is expanded and others are not.

  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Dec 2009
    Link to this post
    Hi Satya Vepa,

    This is not the default behavior of the control which we provide. You might have some code other that this what is posted in the thread that expands the panelbar. Please try with the attached user control. It should not have all items expanded - only the one which is selected.

    Regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    16 Dec 2009
    Link to this post
    Hi Radoslav Georgiev
    Thanks for the reply and the code. do I need to change the IsRequestCrawler to

    IsCrawlerRequest ?


    Thanks
    Satya 
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Dec 2009
    Link to this post
    Hello Satya Vepa,

    This depends on the version of Sitefinity which you are using. The control that I have sent is from the latest official version - Sitefinity 3.7 SP2 (build 2057). IsCrawlerRequest is obsolete in this version and IsRequestCrewler is used instead. If IsRequestCrewlermethod is not implemented in your version you should change it. If this method is implemented you should not change it.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  9. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    16 Dec 2009
    Link to this post
    Hi,

    I am using the following version
    meta name="Generator" content="Sitefinity 3.7.1990.2:1"

    am not sure whether sp2 is installed or not. But I do get a compilation error saying the method IsRequestCrewlermethod is not a valid method.
    Even after changing the code still the menu options are all collapsed. The code what you saent clearly says only the current node should be collapsed.
    am I doing any thing wrong?
  10. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Dec 2009
    Link to this post
    Hello Satya Vepa,

    You are using Sitefinity 3.7 (no SP). In your case you should use the IsCrawlerRequest. Can you show us the skin file and styles for you site panel bar control?

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  11. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    16 Dec 2009
    Link to this post
    Another issue i found is

    if i change the page_load code like follwoing, it works correctly in IE6. but not in Firefox

     

    if (!Page.IsPostBack)

     

    {

    ICmsUrlContext urlContext = CmsUrlContext.Current;

     

    if (urlContext != null)

     

    {

    RadPanelbar1.DataBind();

    RadPanelbar1.Items[0].Expanded =

    true;

     

     

    //string currentUrl = SiteMapDataSource1.Provider.CurrentNode.Url; //UrlHelper.ResolveUrl(urlContext.Path);

     

     

    //foreach (RadPanelItem item in RadPanelbar1.GetAllItems())

     

     

    //{

     

     

    // if (currentUrl.Equals(item.ResolveUrl(item.NavigateUrl), StringComparison.OrdinalIgnoreCase))

     

     

    // {

     

     

    // item.Selected = true;

     

     

    // item.Expanded = true;

     

     

    // item.ExpandParentItems();

     

     

    // break;

     

     

    // }

     

     

    //}

     

    }

    }

    I am using the outlook skin and the styles.
    RadPanelBar.skin

     

    <%

    @ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>

     

     

     

     

    <

    telerik:RadPanelbar

     

     

    runat="server"

     

     

    Skin="Panelbar" EnableEmbeddedSkins="false"

     

     

     

     

     

    >

     

    </

    telerik:RadPanelbar>

     

     

    -------------------


    styles.css

     

    /* RadPanelBar Outlook skin */

     

     

     

    .RadPanelBar_Panelbar

     

     

     

    {

     

    background: white;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup

     

     

     

     

    {

     

    border: solid 1px #002d96;

     

     

    border-top: 0;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpText

     

     

     

     

    {

     

    padding: 0 20px; /* vertical - horizontal */

     

     

     

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpImage

     

     

     

     

    {

     

    margin: 4px; /* vertical - horizontal */

     

     

     

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpLink,

     

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpTemplate

     

     

     

     

    {

     

    color: #10110f;

     

     

    font: bold 11px/31px Arial, Verdana, Sans-serif;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpLink

     

     

     

     

    {

     

    border-top: solid 1px #002d96;

     

     

    background: #7da5e0 url('../Panelbar/Img/RootItemBkg.gif') repeat-x;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpLink:hover

     

     

     

     

    {

     

    background: #ee9515 url('../Panelbar/Img/RootItemBkgActive.gif') repeat-x;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpDisabled:hover

     

     

     

     

    {

     

    border-top: solid 1px #002d96;

     

     

    background: #7da5e0 url('../Panelbar/Img/RootItemBkg.gif') repeat-x;

     

     

    color: #10110f;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup .rpLink,

     

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup .rpTemplate

     

     

     

     

    {

     

    font-weight: normal;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup a.rpExpanded,

     

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup a.rpExpandable

     

     

     

     

    {

     

    border-bottom: 1px solid #D5E3FF;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup .rpText

     

     

     

     

    {

     

    background-color: transparent;

     

     

    padding: 0 20px; /* vertical-horizontal */

     

     

     

     

     

    border: 0;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpLevel2 .rpText

     

     

     

     

    {

     

    padding-left: 43px;

     

     

    line-height: 23px;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpLevel3 .rpText { padding-left: 64px; }

     

     

     

     

    .RadPanelBar_Panelbar

    .rpLevel3 .rpText { padding-left: 70px; }

     

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpSelected

     

     

     

     

    {

     

    background: #ee9515 url('../Panelbar/Img/RootItemBkgActive.gif') repeat-x;

     

    }

     

     

     

    /* child item link */

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup .rpLink

     

     

     

     

    {

     

    background: none;

     

     

    border: 0;

     

    }

     

     

     

    /* child item link:hover */

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup .rpLink:hover,

     

     

     

     

    .RadPanelBar_Panelbar

    .rpGroup .rpSelected .rpText

     

     

     

     

    {

     

    background: none;

     

     

    text-decoration: underline;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpDisabled:hover,

     

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpDisabled .rpText

     

     

     

     

    {

     

    background: #7da5e0 url('../Panelbar/Img/RootItemBkg.gif') repeat-x;

     

     

    color: #888;

     

     

    cursor: default;

     

    }

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpGroup .rpDisabled:hover,

     

     

     

     

    .RadPanelBar_Panelbar

    .rpRootGroup .rpGroup .rpDisabled .rpText

     

     

     

     

    {

     

    border:none;

     

     

    text-decoration:none;

     

     

    background:none;

     

     

    color: #ccc;

     

     

    cursor: default;

     

    }

  12. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    18 Dec 2009
    Link to this post
    Hello Satya Vepa,

    I will need to see the whole code and markup for the control. As I said previously the control works as it should. Please for convenience and readability of the code use the Format Code Block tool of the editor (see attached image).

    Kind regards,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    22 Dec 2009
    Link to this post
    Sorry for not formatting the code. I will format and send you the code. In the mean time I will try as posted in
    http://www.sitefinity.com/support/forums/sitefinity-3-x/designing-with-sitefinity/theme-and-skinfile-with-panelbar.aspx
    thread and see.
    My problem is all the menu items are collapsed like

    Item1
      subitem1
      subitem2
      subitem3
    item2
      subitem1
      subitem2
      subitem3
    item3
      subitem1
      subitem2
      subitem3

    What I need is collapse only item1 like the following
    Item1
      subitem1
      subitem2
      subitem3
    Item2
    Item3

  14. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    23 Dec 2009
    Link to this post
    Hi Satya Vepa,

    Thank you for getting back to us.

    I understand what you are trying to achieve and this is how the control should work with its default settings and skin. I am looking forward to your response where you will provide us with the complete code style style sheet for your panel bar.

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  15. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    06 Jan 2010
    Link to this post
    /* RadPanelBar Outlook skin */
    
    .RadPanelBar_Panelbar
    {
    	background: white;
    }
    
    .RadPanelBar_Panelbar .rpRootGroup
    {
    	border: solid 1px #002d96;
    	border-top: 0;
    }
    
    .RadPanelBar_Panelbar .rpText
    {
    	padding: 0 20px; /* vertical - horizontal */
    }
    
    .RadPanelBar_Panelbar .rpImage
    {
    	margin: 4px; /* vertical - horizontal */
    }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpLink,
    .RadPanelBar_Panelbar .rpRootGroup .rpTemplate
    {
    	color: #10110f;
    	font: bold 11px/31px Arial, Verdana, Sans-serif;
    }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpLink
    {
    	border-top: solid 1px #002d96;
    	background: #7da5e0 url('RootItemBkg.gif') repeat-x;
    }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpLink:hover
    {
    	background: #ee9515 url('RootItemBkgActive.gif') repeat-x;
    }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpDisabled:hover
    {
    	border-top: solid 1px #002d96;
    	background: #7da5e0 url('RootItemBkg.gif') repeat-x;
    	color: #10110f;
    }
    
    .RadPanelBar_Panelbar .rpGroup .rpLink,
    .RadPanelBar_Panelbar .rpGroup .rpTemplate
    {
    	font-weight: normal;
    }
    
    .RadPanelBar_Panelbar .rpGroup a.rpExpanded,
    .RadPanelBar_Panelbar .rpGroup a.rpExpandable
    {
    	border-bottom: 1px solid #D5E3FF;
    }
    
    .RadPanelBar_Panelbar .rpGroup .rpText
    {
    	background-color: transparent;
    	padding: 0 20px; /* vertical-horizontal */
    	border: 0;
    }
    
    .RadPanelBar_Panelbar .rpLevel2 .rpText
    {
    	padding-left: 43px;
    	line-height: 23px;
    }
    
    .RadPanelBar_Panelbar .rpLevel3 .rpText { padding-left: 64px; }
    .RadPanelBar_Panelbar .rpLevel3 .rpText { padding-left: 70px; }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpSelected
    {
    	background: #ee9515 url('RootItemBkgActive.gif') repeat-x;
    }
    
    /* child item link */
    .RadPanelBar_Panelbar .rpGroup .rpLink
    {
    	background: none;
    	border: 0;
    }
    
    /* child item link:hover */
    .RadPanelBar_Panelbar .rpGroup .rpLink:hover,
    .RadPanelBar_Panelbar .rpGroup .rpSelected .rpText
    {
    	background: none;
    	text-decoration: underline;
    }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpDisabled:hover,
    .RadPanelBar_Panelbar .rpRootGroup .rpDisabled .rpText
    {
    	background: #7da5e0 url('RootItemBkg.gif') repeat-x;
    	color: #888;
    	cursor: default;
    }
    
    .RadPanelBar_Panelbar .rpRootGroup .rpGroup .rpDisabled:hover,
    .RadPanelBar_Panelbar .rpRootGroup .rpGroup .rpDisabled .rpText
    {
    	border:none;
    	text-decoration:none;
    	background:none;
    	color: #ccc;
    	cursor: default;
    }
    
    /* RadPanelBar Outlook skin */ 
     
    .RadPanelBar_Panelbar  
    {  
        backgroundwhite;  
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup  
    {  
        bordersolid 1px #002d96;  
        border-top: 0;  
    }  
     
    .RadPanelBar_Panelbar .rpText  
    {  
        padding: 0 20px/* vertical - horizontal */ 
    }  
     
    .RadPanelBar_Panelbar .rpImage  
    {  
        margin4px/* vertical - horizontal */ 
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpLink,  
    .RadPanelBar_Panelbar .rpRootGroup .rpTemplate  
    {  
        color#10110f;  
        fontbold 11px/31px ArialVerdanaSans-serif;  
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpLink  
    {  
        border-topsolid 1px #002d96;  
        background#7da5e0 url('RootItemBkg.gif'repeat-x;  
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpLink:hover  
    {  
        background#ee9515 url('RootItemBkgActive.gif'repeat-x;  
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpDisabled:hover  
    {  
        border-topsolid 1px #002d96;  
        background#7da5e0 url('RootItemBkg.gif'repeat-x;  
        color#10110f;  
    }  
     
    .RadPanelBar_Panelbar .rpGroup .rpLink,  
    .RadPanelBar_Panelbar .rpGroup .rpTemplate  
    {  
        font-weightnormal;  
    }  
     
    .RadPanelBar_Panelbar .rpGroup a.rpExpanded,  
    .RadPanelBar_Panelbar .rpGroup a.rpExpandable  
    {  
        border-bottom1px solid #D5E3FF;  
    }  
     
    .RadPanelBar_Panelbar .rpGroup .rpText  
    {  
        background-colortransparent;  
        padding: 0 20px/* vertical-horizontal */ 
        border: 0;  
    }  
     
    .RadPanelBar_Panelbar .rpLevel2 .rpText  
    {  
        padding-left43px;  
        line-height23px;  
    }  
     
    .RadPanelBar_Panelbar .rpLevel3 .rpText { padding-left64px; }  
    .RadPanelBar_Panelbar .rpLevel3 .rpText { padding-left70px; }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpSelected  
    {  
        background#ee9515 url('RootItemBkgActive.gif'repeat-x;  
    }  
     
    /* child item link */ 
    .RadPanelBar_Panelbar .rpGroup .rpLink  
    {  
        backgroundnone;  
        border: 0;  
    }  
     
    /* child item link:hover */ 
    .RadPanelBar_Panelbar .rpGroup .rpLink:hover,  
    .RadPanelBar_Panelbar .rpGroup .rpSelected .rpText  
    {  
        backgroundnone;  
        text-decorationunderline;  
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpDisabled:hover,  
    .RadPanelBar_Panelbar .rpRootGroup .rpDisabled .rpText  
    {  
        background#7da5e0 url('RootItemBkg.gif'repeat-x;  
        color#888;  
        cursordefault;  
    }  
     
    .RadPanelBar_Panelbar .rpRootGroup .rpGroup .rpDisabled:hover,  
    .RadPanelBar_Panelbar .rpRootGroup .rpGroup .rpDisabled .rpText  
    {  
        border:none;  
        text-decoration:none;  
        background:none;  
        color#ccc;  
        cursordefault;  
    }  
     

    this is the style Panelbar styles.css
  16. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    07 Jan 2010
    Link to this post
    Hi Satya Vepa,

    I think I have found what the problem might be ,it is not from your skin. It is coming from configuration - the problem is reproduced when I disable the embedded base style sheet. Have you set the EnableEmbeddedBaseStyleSheet property of the RadPanelBar to false? This can be done in several places, either in the control code/markup or in the control editor in Sitefinity as in attached image. If you disable embedded style sheet you have to provide your CSS rules for functionality like this.

    Greetings,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  17. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    07 Jan 2010
    Link to this post
    Thanks Radoslav for the Reply.
    I already set EnableEmbeddedBaseStyleSheet property of the RadPanelBar to false. Still I do not see the behaviour.
    Please look at this left menu on this site
    http://www.dfwi.org
    I am trying to acheive some thing like that using RadPanelBar or SitePanelBar.

    Thanks
    Satya
  18. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    08 Jan 2010
    Link to this post
    Hi Satya Vepa,

    This property should be set to true, this is what I meant in my last ticket. If you disable the embedded stylesheet the panel bar will not know which elements to hide (not show as expanded). The EnableEmbeddedBaseStylesheet property is used when you want to load the baste style sheets from an external location (not from your website/server) in order to increase performance. Since you are not loading them from anywhere the panelbar does not behave as it should.

    All the best,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  19. Satya Vepa
    Satya Vepa avatar
    31 posts
    Registered:
    03 Dec 2009
    13 Jan 2010
    Link to this post

    Hi Radoslav,

    I tried with EnableEmbeddedBaseStyleSheet = true
    Still I am not getting the required behaviour. I am thinking there is some problem with my stylesheets.
    I think i will start with the dfault stylesheets that came with sitepanelbar (like outlook). Please tell me how I can use the various skis/stylesheets that are included with sitefinity Radpanelbar/SitePanelbar like outlook, Skyblue,Forest, Web20

    Thanks
    Satya
  20. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    14 Jan 2010
    Link to this post
    Hi Satya Vepa,

    You cans specify which skin to use as described in this article provided to you in a previous post:
    Controling appearance of RadControls for ASP.NET AJAX in Sitefinity

    You can also do this through the control editor in the UI as with the EnableEmbeddedBaseStyleSheet property there is a Skin property where you type in the skin name.

    Sincerely yours,
    Radoslav Georgiev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Register for webinar
20 posts, 0 answered