incorrect RadPanelBar scroll, group height

14 posts, 0 answers
  1. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 06 May 2009 Link to this post

    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     <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           <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

  2. TonyG
    TonyG avatar
    239 posts
    Member since:
    Feb 2006

    Posted 06 May 2009 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 29 Sep 2011 Link to this post

    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.


  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Oct 2011 Link to this post

    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
  6. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 30 Dec 2011 Link to this post

    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
  7. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 28 Mar 2012 Link to this post

    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.
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 03 Apr 2012 Link to this post

    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.
  9. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 03 Apr 2012 Link to this post

    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.
  10. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    539 posts

    Posted 09 Apr 2012 Link to this post

    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.
  11. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 09 Jan 2013 Link to this post

    Has this issue been resolved or even looked at yet? I am having the exact same problem as described in the March 28, 2012 post when using FullExpandedItem. I am using the latest version (Q3 2012) and the child groups are always the same size as the one that is shown expanded when the page loads (tested on IE7, IE9, & Firefox - the scrollbar doesn't even appear in Firefox). I also cannot seem to locate this bug in the issue tracker.
  12. Shawn Krivjansky
    Shawn Krivjansky avatar
    86 posts
    Member since:
    Jan 2010

    Posted 09 Jan 2013 Link to this post

    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>
  13. Josh
    Josh avatar
    61 posts
    Member since:
    Dec 2009

    Posted 09 Jan 2013 Link to this post

    Shawn, thank you very much for posting that! I've dropped the code into my master page and am now able to use the FullExpandedItem feature. It causes some weird animations when opening an item that is smaller than the initial one, but it is acceptable.
    Thanks again.
  14. Elena
    Elena avatar
    2 posts
    Member since:
    Dec 2013

    Posted 09 Mar in reply to Josh Link to this post

    we are still having exactly the same issue.tried your approach of dropping the script into MasterPage but it seems to error out on a line (window, $telerik.$); while running the project. what am i missing? please advise

     

  15. Elena
    Elena avatar
    2 posts
    Member since:
    Dec 2013

    Posted 09 Mar in reply to Shawn Krivjansky Link to this post

    we are still having exactly the same issue.tried your approach of dropping the script into MasterPage but it seems to error out on a line (window, $telerik.$); while running the project. what am i missing? please advise
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017