Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > incorrect RadPanelBar scroll, group height

• TonyG Intermediate

  Posted on May 6, 2009 (permalink)

  I have a RadPanelBar in an asp:Panel so that I can provide grouping functionality and GroupingText.  Perhaps my choice of panelbar was inappropriate in this case, but the number of Level 0 items will almost certainly be larger than the space I've allocated to the panel, so a scroll is required.  For example, I have about 100 categories of reports to choose from, and within each category there are anywhere from 1 to 20 report items.
  
  I can restrict the size of the panelbar with CSS on the container panel, with overflow-x and -y set to auto.  When data populates the panelbar, a scrollbar displays outside of the panel during control rendering, but it quickly disappears.
   
  After selecting a Level 0 RadPanelItem (category), the list of Level 1 items displays, and then the panelbar scrollbar displays!

  1	<asp:Panel ID="ReportsByCategoryPanel" GroupingText="Select a Category and Report"
  2	runat="server" Style="z-index: 100; position: absolute; top: 5px; left: 2px;"
  3	Width="473px" Height="400px" CssClass="GroupingPanel">
  4	<%--Sample data in panelbar is for designer, replaced at runtime--%>
  5	<telerik:RadPanelBar ID="pbReportList" runat="server" BorderStyle="Inset" BorderWidth="2px"
  6	Height="370px" Style="z-index: 105; position: relative; top: 2px; left: 2px;"
  7	Width="420px" OnItemClick="pbReportList_ItemClick" AllowCollapseAllItems="True"
  8	CollapseDelay="200" ExpandMode="FullExpandedItem" TabIndex="20">
  9	<Items>
  10	<telerik:RadPanelItem runat="server" Text="Category 1">
  11	<Items>
  12	<telerik:RadPanelItem runat="server" Text="Report C1R1">
  13	</telerik:RadPanelItem>
  14	</Items>
  15	</telerik:RadPanelItem>
  16	<telerik:RadPanelItem runat="server" Text="Category 2">
  17	<Items>
  18	<telerik:RadPanelItem runat="server" Text="Report C2R1">
  19	<Items>
  20	<telerik:RadPanelItem runat="server" Text="Report C2R2">
  21	</telerik:RadPanelItem>
  22	</Items>
  23	</telerik:RadPanelItem>
  24	</Items>
  25	</telerik:RadPanelItem>
  26	</Items>
  27	</telerik:RadPanelBar>
  28	</asp:Panel>

  The size of the content panel for the open category is much larger than the number of items.  I might have 8 items but the default provides room for about 25 level 1 items before the next level 0 category displays.  I set the ChildGroupHeight on level 0 category items to 100 but it doesn't seem to affect the size of the space allocated for groups of level 1 children.  I am not using ItemTemplates.
  
  Looking at the source via IE Developer Toolbar, I can see why the groups are mis-sized. 

  1	<ul class="rpRootGroup">
  2	<li class="rpItem rpFirst" _itemtypename="Telerik.Web.UI.RadPanelItem">
  3	<a class="rpLink rpExpandable  rpFocused rpSelected rpExpanded" href="http://localhost:49573/MainContent01.aspx#">
  4	<span class="rpOut"><span class="rpText">Level 0 CategoryName</span> </span>
  5	</a>
  6	<div class="rpSlide" style="display: block; height: 912px" jquery1241584291328="4">
  7	<ul class="rpGroup rpLevel1 " style="display: block; width: 100%; height: 912px">
  8	<li class="rpItem rpFirst" _itemtypename="Telerik.Web.UI.RadPanelItem">
  9	<a class="rpLink " href="http://localhost:49573/MainContent01.aspx#">
  10	<span class="rpOut"><span class="rpText">First Level 1 Child Here...</span>
  11	</a>
  12	</li>
  13	</ul>
  14	</div>
  15	</li>
  16	</ul>

  Look at the rpSlide height in line 6 and the rpGroup hight in line 7.  Those numbers are off the wall considering the whole panelbar is only 370 pixels high per the code above.
  
  1) How can I fix those Height params?
  
  2) Any idea what's up with the disappearing scrollbar?
  
  Thanks!
  
  Config is VS2005 / .NET2 / RadControls v2009.1.402.20 / IE7 / Planet Earth / Milky Way

  Reply

• TonyG Intermediate

  Posted on May 6, 2009 (permalink)

  I was having another problem with the same PanelBar - that after an itemclicked event the control would refresh and then minimize to about 2 pixels high.  On mouseover it would properly size.  Whoe, what a thing to mess with my head!
  
  When I changed the ExpandMode from FullExpandedItem to SingleExpanded item, all of the problems documented in this thread disappeared!  I can deal with it as-is until a new release changes this behaviour.
  
  HTH

  Reply


• Shawn Krivjansky

  Posted on Sep 29, 2011 (permalink)

  I also have a similar problem.
  
  My RadPanelBar also has same property set that TonyG mentions.
  

  <telerik:RadPanelBar runat="server" ID="RadPanelBar1"

      ExpandMode="FullExpandedItem" PersistStateInCookie="true"

      DataSourceID="RadSiteMapDataSource1">

  </telerik:RadPanelBar>

  
  What I am getting is some arbitrary height set (44px; in my case) for one of the groups of items that I have.  The problem is, that arbitrary height is TOO SMALL to actually fit the number of menu items in that group...which in effect makes them NOT VISIBLE.  Big Problem.
  
  I am using the 2011.2.712 version of controls...so pretty recent.
  
  I have tried to solve with some CSS overrides:
  

  .RadPanelBar ul.rpGroup div.rpSlide

  {height: auto !important;}

  
  This works in making my group height big enough to show my items, BUT...  it takes away the "SLIDE" effect of the panel bar.  It makes it into a REALLY REALLY choppy disappear/appear type of transition (if I can even call it a transition).  Very poor effect.
  
  I have not tried setting the ExpandMode differently, mostly because I NEED it to be like I have it.  I have a ticket out to Telerik on this issue, but was curious if others had this same problem.  I guess so.
  
  Telerik, can we get a fix for this?...and not some arbitrary heights being generated??...or, at least calculate the CORRECT height for us?
  Thanks.
  
  
  

  Reply

• Kate Kate

  Posted on Oct 4, 2011 (permalink)

  Hi Shawn,
  
  Thank you for your post.
  
  I looked at the ticket that you have sent us and as my colleague has explained we will need a simplified runnable project to see what is causing the issue that you describe, so we ca come up with a solution that would be suitable for your scenario. Then we can post it here as well.
  
  All the best,
  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

  Reply

• Ivan Zhekov Ivan Zhekov

  Posted on Dec 30, 2011 (permalink)

  Hello,
  
  The bug is fixed now, and the fix has passed all the related QA tests. The fix is scheduled to be released with the upcoming 2011 Q3 SP1.
  
  All the best,
  Ivan Zhekov
  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

  Reply

• Shawn Krivjansky

  Posted on Mar 28, 2012 (permalink)

  I have re-opened my ticket on this one...
  After implementing new version and testing the "fix" for this... it still just isn't acceptable.
  
  I just wanted to document here for the community that this is still a problem.  It is a little different now (and I really hesitate to call it "better", because it is still currently not useable in the current form.)
  
  Here is what I wrote in the ticket:
  -----------------------------------------------------
  I have now just had a chance to fully implement the new version of the Telerik AJAX controls. (2012.1.327.40) .
  
  I have tested the solution to this problem...
  
  Whatever has been done has NOT exactly solved the problem.
  It IS a bit different, but we need something different than this....it is still unuseable.
  
  What happens now is that instead of the items just not appearing at all (like before), they are now suppressed under a "overflow: auto;" which means the user needs to hit the up/down arrows inside the panel area to see any additional menu items. So, I guess it is a LITTLE better, but still pretty bad/unuseable. User isn't going to scroll down 10,20,30 items in a single item overflow area...that's just crazy.
  
  It is the same cause... If you START out the process with a group that has (for example) 5 items, EVERY GROUP from that point forward that you navigate to will have a height set to accomodate 5 items. If the group you click on has more than 5 items, you get the overflow scroll for whatever is remaining. If the group you click on has less than 5 items, you just get empty space for the group up to the 5 item height.
  
  Can we get a REAL fix for this?
  We need the height for each group of items to accomodate the amount of data coming from the datasource for each item. Again, I just can't see how this panelbar can be used as a menu in this mode with it working like this.
  
  I have attached a picture that demonstates what it looks like if you can't envision it.
  

  Attached files

  • pb1.jpg

  Reply

• Ivan Zhekov Ivan Zhekov

  Posted on Apr 3, 2012 (permalink)

  Hi, Shawn.
  
  I think I am missing something here.
  
  Would it be possible for you to open a new support thread and attach your problematic panel bar, along with any assets you think are relevant (styles, scripts etc).
  
  If you are not sure how to isolate this case, you can check this article -- http://blogs.telerik.com/supportdept/posts/10-09-29/isolating-a-problem-in-a-sample-project.aspx.
  
  Note: it has to be a support thread, as forum threads are limited in terms of attachments.
  
  All the best,
  Ivan Zhekov
  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.

  Reply

• Shawn Krivjansky

  Posted on Apr 3, 2012 (permalink)

  I already have a support ticket open.
  In that support ticket, you said that you are testing the problem along with my suggestions (although, my "suggestions" weren't really meant to be a suggestion for a fix, but as a hack workaround until the problem had a real solution)...and it is only a 3/4 solution at that.
  
  My original sample project from Sept 2011 in that support ticket could probably still be used (if you replace the Telerik DLLs with current versions).  It is still the same type of problem.  A little better now than before, but still not great.  Moreover, it is not that hard to produce anyway.
  
  Basically, each child group of items does not seem to get their own height.  If I have 1 child in one group and 10 in the other, I would expect a height to accomodate the 1 item while I am looking at the 1 item group, and then when I click around and into the group that has 10 items, I would expect to see that area expand to show 10 items.  What happens is whatever you click/load first has the child height set for that group...and that is applied to EVERY OTHER child group regardless of how many items are in them.  The only differennce between now and December is that before they just disappeared (overflow hidden), and now they are in an overflow x.  We can't have an overflow x unless that is how the user wants it configured with a particualr height set.  But, that is impossible to know when using dynamic data to fill in the RadPanel (sitemap datasource coming from database).
  
  Again, my "suggestions" for a fix in the ticket helps to get rid of the overflow arrows and shows all the data I want to show, but the "slide" affect gets weird "sliding overtop other items".  It's hard to describe what it looks like, but as you expand/collapse a section, the text rolls overtop other text/items until the transition is complete.
  

  Reply

• Ivan Zhekov Ivan Zhekov

  Posted on Apr 9, 2012 (permalink)

  Hi,
  
  The suggestion you provided did not pass all QA tests and for that reason it will not be included the SP. We will however work in that direction and include it in a later internal release and ultimately in the Beta / official release.
  
  For your involvement with the Telerik controls, I have awarded you some Telerik points, which you can see updated in your profile center.
  
  Regards,
  Ivan Zhekov
  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.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > PanelBar > incorrect RadPanelBar scroll, group height