This is a migrated thread and some comments may be shown as answers.

Panal Bar Expansion Problem

1 Answer 72 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Noob2008 Noob2008
Top achievements
Rank 1
Noob2008 Noob2008 asked on 30 Jun 2009, 04:47 AM

Hi guys

I have added a web part in my sharepoint everything is up and running

But i have this particular problem

In my web part there a panalbar

In which  u all can imagine it like this

( on page load u all will see like this shown below where + is the expandable button )

Category A +
Category B +

(On click of the + sign u all will see like tat)

Category A -
Item 1
Item 2
Item 3
Category B +

The problem is when i click on either Category A or B the whole page will automatic scroll up to the top , to the very first Category
Imagine if in future i were to have 100 expandable item than if user choose the 99 item it will jump up to the top of the page after the item expand than it be troublesome for user to scroll all the way down again .It be messy too .

The attach is my CSS style sheet , Kindly advise . Thanks

.CompanyA_Department_Category  
{  
    background#EEEEEE;  
}  
 
.CompanyA_Department_Alt_Odd_Level0  
{  
    background#FF9900;  
}  
 
.CompanyA_Department_Alt_Even_Level0  
{  
    background#FFD752;  
}  
 
.CompanyA_Department_Category .rpText  
{  
    margin-left3px;  
    fontbolder 8pt Arial;  
    colorblack;  
}  
 
.CompanyA_Department_Course .rpText  
{  
    margin-left3px;  
    fontbold 8pt Arial;  
    color: orange;  
}  
 
.CompanyA_Department_CourseDescription .rpText  
{  
    margin-left3px;  
    font8pt Arial;  
    colorblack;  
    cursordefault;  
}  
 
.CompanyA_Department_CourseURL .rpText  
{  
    margin-left3px;  
    font8pt Arial;  
    text-decorationunderline;  
    colorblack;  
}  
 
.RadPanelBar_Default  
{  
    color#232323;  
    background#FFFFFF;  
}  
 
.RadPanelBar_Default ul.rpRootGroup  
{  
    bordernone;  
    /*border: 1px solid #262626;*/ 
    padding20px 36px 28px 28px;  
}  
 
.RadPanelBar_Default_rtl ul.rpRootGroup  
{  
    padding20px 28px 28px 36px;  
    text-alignrightright;  
}  
 
.RadPanelBar_Default .rpLink  
{  
    bordernone;  
    /*border-bottom: 1px solid #bfbfbf;*/ 
    overflow-x: hidden;  
}  
 
.RadPanelBar_Default .rpLink:hover  
{  
    bordernone;  
    /*border-bottom: 1px solid #bfbfbf;*/ 
    text-decorationnone;  
    /*border-bottom-color: #fff;*/ 
}  
 
.RadPanelBar_Default .rpText  
{  
    height20px;  
    vertical-align: centre;  
    margin-right7px;  
    overflow-x: hidden;  
}  
 
.RadPanelBar_Default_rtl .rpText  
{  
    height20px;  
    vertical-align: centre;  
    margin-left7px;  
    margin-right: 0;  
}  
 
.RadPanelBar_Default .rpExpandable .rpText  
{  
    backgroundtransparent url('/_layouts/images/School/Department/button_expand.gif'no-repeat rightright;  
}  
 
.RadPanelBar_Default .rpExpanded .rpText  
{  
    backgroundtransparent url('/_layouts/images/School/Department/button_collapse.gif'no-repeat rightright;  
}  
 
.RadPanelBar_Default .rpGroup .rpExpanded .rpText,  
.RadPanelBar_Default .rpGroup .rpExpandable .rpText  
{  
    background-positionrightright 5px;  
}  
 
.RadPanelBar_Default_rtl .rpExpandable .rpText  
{  
    backgroundtransparent url('PanelBar/arrow-right.gif'no-repeat left 9px;  
}  
 
.RadPanelBar_Default_rtl .rpExpanded .rpText  
{  
    backgroundtransparent url('PanelBar/arrow-down.gif'no-repeat left 9px;  
}  
 
.RadPanelBar_Default_rtl .rpGroup .rpExpanded .rpText,  
.RadPanelBar_Default_rtl .rpGroup .rpExpandable .rpText  
{  
    background-positionleft 5px;  
}  
 
.rpimage  
{  
    height50px;  
    width50px;  
}  
 
.RadPanelBar_Default .rpGroup  
{  
    overflow-x: hidden;  
    overflow-y: auto;  
}  
 
.RadPanelBar_Default .rpGroup .rpLink,  
.RadPanelBar_Default .rpGroup .rpLast .rpLink  
{  
    bordernone;  
}  
 
.RadPanelBar_Default .rpGroup .rpLink:hover,  
.RadPanelBar_Default .rpGroup .rpLast .rpLink:hover  
{  
    bordernone;  
    text-decorationnone;  
}  
 
.RadPanelBar_Default .rpLevel1 .rpLink .rpFirst  
{  
    bordernone;  
    /*border-top: 1px solid #bfbfbf;*/ 
}  
 
.RadPanelBar_Default .rpLevel1 .rpLink .rpItem .rpFirst  
{  
    bordernone;  
    /*border-top: 1px solid #626262;*/ 
}  
 
.RadPanelBar .rpLevel1  
{  
    bordernone;  
    /*border-bottom:1px solid #BFBFBF;*/ 
}  
 
.RadPanelBar .rpLast .rpLevel1  
{  
    bordernone;  
}  
 
.RadPanelBar_Default .rpLevel1 .rpLast .rpLink  
{  
    bordernone;  
}  
 
.RadPanelBar_Default .rpLevel1 .rpLast .rpLink:hover  
{  
    bordernone;  
}  
 
.RadPanelBar_Default .rpLevel1 .rpGroup .rpLast .rpLink,  
.RadPanelBar_Default .rpLevel1 .rpLast .rpGroup .rpLink  
{  
    bordernone;  
    /*border-bottom-width: 1px;*/ 
}  
 
.RadPanelBar_Default .rpRootGroup .rpLink,  
.RadPanelBar_Default .rpRootGroup .rpTemplate  
{  
    fontnormal 12px ArialVerdanaSans-serif;  
    color#fff;  
}  
 
/* --  space between the top-level categories */ 
.RadPanelBar ul.rpRootGroup li.rpItem  
{  
    margin-top10px;  
    margin-bottom10px;  
}  
 
/* --  space between the items */ 
.RadPanelBar ul.rpGroup li.rpItem  
{  
    margin-top3px;  
    margin-bottom3px;  
}  
 
.RadPanelBar_Default .rpRootGroup .rpText  
{  
    padding6px 7px 6px 3px;  
}  
 
.RadPanelBar_Default_rtl .rpRootGroup .rpText  
{  
    padding6px 3px 6px 7px;  
}  
 
.RadPanelBar_Default .rpGroup .rpLink,  
.RadPanelBar_Default .rpGroup .rpTemplate  
{  
    font-size11px;  
}  
 
.RadPanelBar_Default .rpGroup .rpText  
{  
    padding1px 7px 0 0;  
}  
 
.RadPanelBar_Default_rtl .rpGroup .rpText  
{  
    padding1px 0 0 7px;  
}  
 
.RadPanelBar_Default .rpLevel1 .rpImage  
{  
    margin-left10px;  
}  
 
.RadPanelBar_Default .rpLevel2 .rpImage  
{  
    margin-left20px;  
}  
      
.RadPanelBar_Default .rpLevel3 .rpImage  
{  
    margin-left30px;  
}  
 
.RadPanelBar_Default .rpLevel1 .rpText  
{  
    padding-left10px;  
}  
 
.RadPanelBar_Default .rpLevel2 .rpText  
{  
    padding-left20px;  
}  
 
.RadPanelBar_Default .rpLevel3 .rpText  
{  
    padding-left30px;  
}  
 
.RadPanelBar_Default .rpLevel1 .CompanyA_ImageItem .rpText  
{  
    padding-left5px;  
}  
 
.RadPanelBar_Default .rpLevel2 .CompanyA_ImageItem .rpText  
{  
    padding-left5px;  
}  
 
.RadPanelBar_Default .rpLevel3 .CompanyA_ImageItem .rpText  
{  
    padding-left5px;  
}  
 
.RadPanelBar_Default_rtl .rpLevel1 .rpText  
{  
    padding-right10px;  
    padding-left: 0;  
}  
 
.RadPanelBar_Default_rtl .rpLevel2 .rpText  
{  
    padding-right20px;  
    padding-left: 0;  
}  
 
.RadPanelBar_Default_rtl .rpLevel3 .rpText  
{  
    padding-right30px;  
    padding-left: 0;  
}  
 
.RadPanelBar_Default .rpSelected .rpText  
{  
    font-weightbold;  
}  
 
 
.RadPanelBar_Default .rpDisabled .rpText  
{  
    cursordefault;  
    color#bbb;  
}  
 
.RadPanelBar_Default .rpRootGroup .rpDisabled:hover  
{  
    bordernone;  
    /*border-bottom-color: #bfbfbf;*/ 
    cursordefault;  
    text-decorationnone;  
}  
 
.RadPanelBar_Default .rpGroup .rpDisabled:hover  
{  
    bordernone;  
    /*border-bottom: 1px solid #626262;*/ 
    cursordefault;  
    text-decorationnone;  
}  
 
/* -- Without Itemized Separators  */ 
.RadPanelBar_Default .rpGroup .rpItem .rpLink.rpExpandable.CompanyA_Department_Category,  
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.rpExpandable.CompanyA_Department_Category  
{  
    border-topnone;  
}  
 
.RadPanelBar_Default .rpGroup .rpItem .rpLink.rpExpandable.CompanyA_Department_Category:hover,  
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.rpExpandable.CompanyA_Department_Category:hover  
{  
    border-topnone;  
}  
 
.RadPanelBar_Default .CompanyA_Department_Category .rpGroup .rpItem.rpFirst .rpLink.CompanyA_Department_Course  
{  
    border-topnone;  
}  
 
.RadPanelBar_Default .CompanyA_Department_Category .rpGroup .rpItem.rpFirst .rpLink.CompanyA_Department_Course:hover  
{  
    border-topnone;  
}  
 
.RadPanelBar_Default .rpGroup .rpItem .rpLink.CompanyA_Department_Course,  
.RadPanelBar_Default .rpGroup .rpItem .rpFirst .rpLink.CompanyA_Department_Course,  
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.CompanyA_Department_Course  
{  
    border-topnone;  
}  
 
.RadPanelBar_Default .rpGroup .rpItem .rpLink.CompanyA_Department_Course:hover,  
.RadPanelBar_Default .rpGroup .rpItem .rpLast .rpLink.CompanyA_Department_Course:hover  
{  
    border-topnone;  
 
 

1 Answer, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 02 Jul 2009, 06:11 AM
Hi,

I tried this on my end and the Page is maintaining its scroll position on expanding the PanelBar item. But the Scroll position is lost if a postback occurs on expanding the PanelBarItem. I was able to solve this issue by setting the MaintainScrollPositionOnPostback attribute for the Page.

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPage.aspx.cs"  MaintainScrollPositionOnPostback="true"  EnableEventValidation="false" Inherits="MyPage" %> 
 

Regards
Shinu
Tags
PanelBar
Asked by
Noob2008 Noob2008
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Share this question
or