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

Forums / Bugs & Issues / Radpanel Bar issue with expand and collapse

Radpanel Bar issue with expand and collapse

4 posts, 0 answered
  1. citytech team1
    citytech team1 avatar
    16 posts
    Registered:
    17 Sep 2009
    31 May 2010
    Link to this post
    Hello,
    We are working on sitefinity 3.7, here is the url "http://174.123.12.34/SPS4LTC/Homepage.aspx" we need some accordion control in this site we use rad pane bar for that, We make a custom module by the help of product module
    And fetching data from DB with our own logic and  displaying it in Rad Panelbar in a user control.

    Now problem is :
    1) it was running well in with Embedded skins but when i apply custom skin all panels are expand in page load, and need manual click to collapse them.

    2) i use javascript to collapse all panel except first one , it is working but at the first time all are open then my script start working.

    Look requirement is simple except first panel all should be collapses in load. And in almost every page we need this .

    Here is my code sample:

    ASCX
    ____________________


    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="PV.ascx.cs" Inherits="Sitefinity_ControlTemplates_Products_PV" %>
    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <script type="text/javascript">
        function loadPanelBar(sender) {
            var panelBar = sender;
            for (var i = panelBar.get_allItems().length - 1; i > -1; i--) {
                panelBar.get_allItems()[i].expand();
            }
            panelBar.get_allItems()[0].expand();
            panelBar.get_allItems()[panelBar.get_allItems().length - 1].collapse();
     
        }
      
    </script>

    <telerik:RadPanelBar ID="rp" runat="server" EnableViewState="true" ExpandMode="SingleExpandedItem" OnClientLoad="loadPanelBar">
    </telerik:RadPanelBar>




    -----------------------------------------------------
    in ASCX.CS

    There is nothing but database query and making DataTable for this panel's DataSource.


    Please suggest how can i over come this. We need to go live soon, please help.


    Thanks and Regards

    Tanmay




  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    31 May 2010
    Link to this post
    Hi citytech team1,

    Thank you for using our services.

    Can you try the following script:
    <script type="text/javascript">
        function loadPanelBar(sender) {
            var panelBar = sender;
            var expandedItems = panelBar.get_expandedItems();
            for(var i=0;i<expandedItems.length;i++)
            {
                expandedItems[i].collapse();
            }
            panelBar.get_allItems()[0].expand();
        }
       
    </script>

    It will take all expanded items and collapse them, if there are any expanded items. Then it will expand only the first one.

    Best wishes,
    Radoslav Georgiev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. citytech team1
    citytech team1 avatar
    16 posts
    Registered:
    17 Sep 2009
    01 Jun 2010
    Link to this post
    Hello,
    Thanks for the reply, 

    I have tried your code , actually i tried that first but i found when i write to collapse it expand and when i ask expand it collapse !!
    Please see attached images you will find it. 

    Look this is an issue which i face after using custom skin. With embedded skin there is no issue, But i do not think there is any problem with Skin, I have change image path and color some font side  etc.
    Here is my style :

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

    .RadPanelBar_bigPanel {
    width: 100% !important;
    float: left;
    border:solid 0px red;
    /* position: relative; */
    }
    .RadPanelBar_bigPanel ul {
    margin: 0;
    padding: 0;
    width: 100%;
    float: left;
    /* position: relative; */
    }
    .RadPanelBar_bigPanel ul ul.rpGroup {
    padding-bottom: 13px;
    background-color: #f4e8e8;
    }
    .sidebar .RadPanelBar .rpSlide {
    overflow: visible;
    width: 100%;
    float: left;
    }
    .RadPanelBar_bigPanel ul li.rpItem {
    margin: 0;
    padding: 0 0 0 0;
    list-style-type: none;
    width: 100%;
    float: left;
    /* position: relative; */
    }

    .RadPanelBar_bigPanel ul li a:link, 
    .RadPanelBar_bigPanel ul li a:visited, 
    .RadPanelBar_bigPanel ul li a:hover, 
    .RadPanelBar_bigPanel ul li a:active 
    {
    color: #ffffff;
    display: block;
    text-decoration:none;
    font:bold 14px/27px Arial, Helvetica, sans-serif;
    }

    .RadPanelBar_bigPanel ul li a:hover
    {
    background: url(collapse-pannormal.gif) left top no-repeat #6d6d64;
    }
    .RadPanelBar_bigPanel ul ul li a:hover
    {
    background-image: none;
    font-weight: bold;
    }
    .RadPanelBar_bigPanel ul li a:link .rpText, 
    .RadPanelBar_bigPanel ul li a:visited .rpText, 
    .RadPanelBar_bigPanel ul li a:hover .rpText, 
    .RadPanelBar_bigPanel ul li a:active .rpText
    {
    display: block;
    padding:0 0 0 14px;
    background:url(collapse-pannormal.gif) left top no-repeat;
    }
    .RadPanelBar_bigPanel ul li a.rpSelected:link, 
    .RadPanelBar_bigPanel ul li a.rpSelected:visited, 
    .RadPanelBar_bigPanel ul li a.rpSelected:hover, 
    .RadPanelBar_bigPanel ul li a.rpSelected:active,
    .RadPanelBar_bigPanel ul li a.rpExpanded:link, 
    .RadPanelBar_bigPanel ul li a.rpExpanded:visited, 
    .RadPanelBar_bigPanel ul li a.rpExpanded:hover, 
    .RadPanelBar_bigPanel ul li a.rpExpanded:active 
    {
    background: url(collapse-panhover.gif) left top no-repeat;
    font-weight: bold;
    }
    .RadPanelBar_bigPanel ul li.rpLast a:link, 
    .RadPanelBar_bigPanel ul li.rpLast a:visited, 
    .RadPanelBar_bigPanel ul li.rpLast a:hover, 
    .RadPanelBar_bigPanel ul li.rpLast a:active
    {
    border-bottom: 0;
    }
    .RadPanelBar_bigPanel ul li.rpLast a:link .rpText, 
    .RadPanelBar_bigPanel ul li.rpLast a:visited .rpText, 
    .RadPanelBar_bigPanel ul li.rpLast a:hover .rpText, 
    .RadPanelBar_bigPanel ul li.rpLast a:active .rpText
    {
    background: url(collapse-panhover.gif) left top no-repeat;
    }

    .RadPanelBar_bigPanel ul li a:link .rpText, 
    .RadPanelBar_bigPanel ul li a:visited .rpText, 
    .RadPanelBar_bigPanel ul li a:hover .rpText, 
    .RadPanelBar_bigPanel ul li a:active .rpText
    {
    display: block;
    background: url(collapse-panhover.gif) left top no-repeat;
    }

    .RadPanelBar_bigPanel ul li a.rpSelected:link, 
    .RadPanelBar_bigPanel ul li a.rpSelected:visited, 
    .RadPanelBar_bigPanel ul li a.rpSelected:hover, 
    .RadPanelBar_bigPanel ul li a.rpSelected:active
    {
    background: url(collapse-panhover.gif) left top no-repeat;
    }

    .RadPanelBar_bigPanel ul li a:hover
    {
    background: url(collapse-panhover.gif) left top no-repeat;
    }
    .RadPanelBar_bigPanel ul li a.rpSelected:link, 
    .RadPanelBar_bigPanel ul li a.rpSelected:visited, 
    .RadPanelBar_bigPanel ul li a.rpSelected:hover, 
    .RadPanelBar_bigPanel ul li a.rpSelected:active {
    background: url(collapse-panhover.gif) left top no-repeat;
    font-weight: bold;
    }

    .RadPanelBar_bigPanel ul ul li a:link, 
    .RadPanelBar_bigPanel ul ul li a:visited, 
    .RadPanelBar_bigPanel ul ul li a:hover, 
    .RadPanelBar_bigPanel ul ul li a:active {
    border-bottom: 0;
    border-top: 0;
    background-color: #f4e8e8;
    }
    .RadPanelBar_bigPanel ul ul li a:link .rpText, 
    .RadPanelBar_bigPanel ul ul li a:visited .rpText, 
    .RadPanelBar_bigPanel ul ul li a:hover .rpText, 
    .RadPanelBar_bigPanel ul ul li a:active .rpText 
    {
    padding: 13px 13px 0 17px;
    color:black;
    }
    .RadPanelBar_bigPanel ul ul li.rpLast a:link .rpText, 
    .RadPanelBar_bigPanel ul ul li.rpLast a:visited .rpText, 
    .RadPanelBar_bigPanel ul ul li.rpLast a:hover .rpText, 
    .RadPanelBar_bigPanel ul ul li.rpLast a:active .rpText 
    {
    background-image: none;
    }
    .RadPanelBar_bigPanel ul ul li a.rpSelected:link, 
    .RadPanelBar_bigPanel ul ul li a.rpSelected:visited, 
    .RadPanelBar_bigPanel ul ul li a.rpSelected:hover, 
    .RadPanelBar_bigPanel ul ul li a.rpSelected:active 
    {
    background-image: none;
    background-color: transparent;
    font-weight: bold;
    padding-top: 0;
    }
    .RadPanelBar_bigPanel a:focus,
    .RadPanelBar_bigPanel a:focus .rpOut,
    .RadPanelBar_bigPanel a:focus .rpText 
    {
    outline: 0;
    }

    -------------------------------------------------------------------------------------------------------------------
    This is my Skin file:

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

    <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
    <telerik:RadPanelBar 
        runat="server" 
        EnableEmbeddedSkins="false"
        EnableEmbeddedBaseStylesheet="false"
        Skin="bigPanel" />



    My skin name is "bigPanel".

    Can you please help me. It will be better if you try to duplicate this error, because is some thing unusual .

    thanks and regards

    Tanmay




  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    01 Jun 2010
    Link to this post
    Hello citytech team1,

    You can disable the base stylesheets/scripts only in case you have your custom stylesheets/scripts that you can use to replace the default one, so that the control will continue working properly. Please refer to Disabling embedded resources. As far as I see it you have only skin with several classes where the base requirement from the stylesheet has not been covered. You should have css classes that will replace some of the base rules used in the base stylesheet

    Below is a sample of the based rules that you need to have in your stylesheet

    <style type="text/css">
    /* PanelBar base css */
      
    .RadPanelBar
    {
        text-align: left;
    }
      
      
    .RadPanelBar .rpRootGroup
    {
        border-style: solid;
    }
      
    .RadPanelBar .rpRootGroup,
    .RadPanelBar .rpGroup,
    .RadPanelBar .rpItem
    {
        margin: 0;
        padding: 0;
        list-style-position:outside;
        list-style: none;
    }
      
    .RadPanelBar .rpSlide
    {
        position: static;
        float: none;
        height: auto;
        overflow:hidden;
        display:none;
        zoom: 1;
    }
      
    .RadPanelBar .rpItem
    {
        float: none;
        display: block;
        overflow: hidden;
        position: static;
    }
    * html .RadPanelBar .rpItem { display: inline }
    * html .RadPanelBar .rpGroup .rpItem { display: block }
      
    .RadPanelBar .rpItem:after,
    .RadPanelBar .rpText:after,
    .RadPanelBar .rpTemplate:after
    {
        content: "";
        display: block;
        height: 0;
        line-height: 0;
        font-size: 0;
        clear: both;
        visibility: hidden;
    }
      
    .RadPanelBar .rpLink
    {
        cursor: pointer;
        overflow: hidden;
        zoom: 1;
    }
      
    .RadPanelBar .rpLink:focus
    {
        outline: 0 none;
    }
      
    .RadPanelBar .rpLink,
    .RadPanelBar .rpOut,
    .RadPanelBar .rpText
    {
        display: block;
    }
      
    *+html .RadPanelBar .rpItem { display: inline; }
      
      
    .RadPanelBar .rpGroup
    {
        overflow: auto;
        overflow-x: hidden;
    }
      
      
    </style>

    Another option is setting EnableEmbeddedBaseStylesheet="true"

    All the best,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
4 posts, 0 answered