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

incorrect RadPanelBar scroll, group height

13 Answers 332 Views

PanelBar

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

TonyG asked on 06 May 2009, 05:24 AM

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!

    
              <asp:Panel ID="ReportsByCategoryPanel" GroupingText="Select a Category and Report" 
        
                runat="server" Style="z-index: 100; position: absolute; top: 5px; left: 2px;" 
        
                Width="473px" Height="400px" CssClass="GroupingPanel">  
        
                <%--Sample data in panelbar is for designer, replaced at runtime--%> 
        
                <telerik:RadPanelBar ID="pbReportList" runat="server" BorderStyle="Inset" BorderWidth="2px" 
        
                  Height="370px" Style="z-index: 105; position: relative; top: 2px; left: 2px;" 
        
                  Width="420px" OnItemClick="pbReportList_ItemClick" AllowCollapseAllItems="True" 
        
                  CollapseDelay="200" ExpandMode="FullExpandedItem" TabIndex="20">  
        
                  <Items> 
        
                    <telerik:RadPanelItem runat="server" Text="Category 1">  
        
                      <Items> 
        
                        <telerik:RadPanelItem runat="server" Text="Report C1R1">  
        
                        </telerik:RadPanelItem> 
        
                      </Items> 
        
                    </telerik:RadPanelItem> 
        
                    <telerik:RadPanelItem runat="server" Text="Category 2">  
        
                      <Items> 
        
                        <telerik:RadPanelItem runat="server" Text="Report C2R1">  
        
                          <Items> 
        
                            <telerik:RadPanelItem runat="server" Text="Report C2R2">  
        
                            </telerik:RadPanelItem> 
        
                          </Items> 
        
                        </telerik:RadPanelItem> 
        
                      </Items> 
        
                    </telerik:RadPanelItem> 
        
                  </Items> 
        
                </telerik:RadPanelBar> 
        
              </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.

    
            <ul class="rpRootGroup">  
        
              <li class="rpItem rpFirst" _itemtypename="Telerik.Web.UI.RadPanelItem">  
        
                <a class="rpLink rpExpandable  rpFocused rpSelected rpExpanded" href="http://localhost:49573/MainContent01.aspx#">  
        
                  <span class="rpOut"><span class="rpText">Level 0 CategoryName</span> </span> 
        
                </a> 
        
                <div class="rpSlide" style="display: block; height: 912px" jquery1241584291328="4">  
        
                  <ul class="rpGroup rpLevel1 " style="display: block; width: 100%; height: 912px">  
        
                    <li class="rpItem rpFirst" _itemtypename="Telerik.Web.UI.RadPanelItem">  
        
                      <a class="rpLink " href="http://localhost:49573/MainContent01.aspx#">  
        
                        <span class="rpOut"><span class="rpText">First Level 1 Child Here...</span> 
        
                      </a> 
        
                    </li> 
        
                  </ul> 
        
                </div> 
        
              </li> 
        
            </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

13 Answers, 1 is accepted

answered on 29 Sep 2011, 08:42 PM

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.

answered on 28 Mar 2012, 10:36 PM

pb1.jpg

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.

answered on 03 Apr 2012, 09:27 AM

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.

answered on 03 Apr 2012, 10:35 PM

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.

answered on 09 Jan 2013, 07:09 PM

Telerik had given me a workaround.
Seems to work ok except for the added overhead, but not too bad.

<div id="ucLeftPanelBar">

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

ExpandMode="FullExpandedItem" PersistStateInCookie="true"

DataSourceID="RadSiteMapDataSource1" CookieName='<%$ Resources:AppValues, radPanelBarCookieName %>'>

</telerik:RadPanelBar>

<telerik:RadSiteMapDataSource ID="RadSiteMapDataSource1" runat="server" ShowStartingNode="false" />

</div>

<script type="text/javascript">

// Telerik ticket# 468960

// This is hotfix from Telerik to attempt getting around issues of group height not being dynamic.

// Encapsulate everything, so we won't pollute the global scope

(function (global, $) {

// global points to window

var $ = $telerik.$;

var $T = Telerik.Web.UI;

$T.RadPanelBar.prototype._playTransitionAnimation = function (expandedItem, collapsedItem) {

this._transitionAnimationIsInProgress = true;

var expandedElement = expandedItem._getAnimationContainer();

var collapsedElement = collapsedItem._getAnimationContainer();

var totalHeight = $(expandedElement).height();

// Animate until 1 in 'quirks mode', otherwise the animation will break.

// An element with height 0, expands to its full height.

var minHeight = $telerik.quirksMode ? 1 : 0;

var maxHeight = totalHeight - minHeight;

// cache collapsed element height. Will be used later on

var collapsedHeight;

collapsedElement.style.visibility = "hidden";

collapsedElement.style.height = "auto";

collapsedElement.style.display = "block";

collapsedHeight = $(collapsedElement).height();

// Prepare collapsed element for animation.

// Start from 1 in 'quirks mode' because an element with height 0, expands to its full height.

collapsedElement.style.height = minHeight + "px";

collapsedElement.style.display = "block";

collapsedElement.style.visibility = "visible";

expandedElement.style.height = maxHeight + "px";

// Hide overflow to avoid scrollbar issues and because it looks ugly.

var expandedElementOverflowBeforeAnimation = expandedElement.style.overflow;

expandedElement.style.overflow = "hidden";

var collapsedElementOverflowBeforeAnimation = collapsedElement.style.overflow;

collapsedElement.style.overflow = "hidden";

var panelBar = this;

var settings = panelBar.get_expandAnimation();

if (settings.get_type() == $T.AnimationType.None)

settings = panelBar.get_collapseAnimation();

var duration = settings.get_duration();

var easing = $T.AnimationType.toEasing(settings.get_type());

var params = { "height": minHeight };

var animationElement = $("<div></div>").css({

"display": "block",

"height": maxHeight

});

animationElement.animate(params, {

"duration": duration,

"easing": easing,

"step": function (now) {

// collapsingHeight + expandingHeight *must* be equal to height.

// Otherwise there is strange.

var collapsingHeight = Math.round(now);

var expandingHeight = Math.abs(collapsedHeight - collapsingHeight);

expandedElement.style.height = collapsingHeight + "px";

collapsedElement.style.height = expandingHeight + "px";

},

"complete": function () {

expandedElement.style.display = "none";

expandedElement.style.overflow = expandedElementOverflowBeforeAnimation;

collapsedElement.style.height = collapsedHeight + "px";

collapsedElement.style.overflow = collapsedElementOverflowBeforeAnimation;

// NOTE: this could be improved

if ($(collapsedElement).children().first().height() > $(collapsedElement).height())

collapsedElement.style.overflow = "auto";

// Call RadPanelBar._callRadShow() to trigger repaint of the PanelBar's items and all child RadControls.

// This is required if there is an expanded item after the animation, which is true

// since this method has been called.

panelBar._callRadShow();

$.raiseControlEvent(panelBar, "itemAnimationEnd", { item: expandedItem, expanding: false });

$.raiseControlEvent(panelBar, "itemAnimationEnd", { item: collapsedItem, expanding: true });

panelBar._transitionAnimationIsInProgress = false;

}

});

};

})(window, $telerik.$);

</script>