Scrolling Issue with PanelBar

14 posts, 1 answers
  1. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 05 Aug 2010 Link to this post

    Hello,

    I am slowly but surely getting my panel bar setup in the manner that would work with my application, however for some reason, the panel bar will not scroll for me when the contents of the <contenttemplate> are larger than the space.  I do not get any scrollbar at all and as you can see I do have the ExpandMode="FullExpandedItem" defined.  Below is my markup:

    <telerik:RadPanelBar runat="server" ID="WebPageLeftPanel" Height="100%" Width="100%" ExpandMode="FullExpandedItem">
        <Items>
            <telerik:RadPanelItem Text="About This Metric" Expanded="True" Selected="true" >
                <ContentTemplate>
                    <div class="information">
                        <h5>Description</h5>
                        <p>
                            The following metric will show the number of active Blackberry devices per model number within the organization.
                            The chart provides for a graphical representation to illustrate the percentage each model accounts for in relation to
                            the total number of devices.  Below the chart a table is provided with the information the chart is based on and also
                            inludes the total number of devices as well.
                        </p>
                        <h5>How to Read</h5>
                        <p>
                            Each pie of the chart represent a percentage of the total number of devices.  You can hover over each pie slice for more
                            details to what the slice represents.  Some slices may be too small therefore will not show as easily on the chart, however
                            the table belows allows you to see the raw data for the chart, which includes the smaller slices.
                        </p>
                    </div>
                </ContentTemplate>
            </telerik:RadPanelItem>
            <telerik:RadPanelItem Text="Quick Links">
                <ContentTemplate>
                    <div class="quicklinks">
                        <telerik:RadSiteMap ID="QuickLinks" runat="server" DataSourceID="QuickLinksDataSource" ShowNodeLines="true" />
                </ContentTemplate>
            </telerik:RadPanelItem>
        </Items>
    </telerik:RadPanelBar>

    This is my only real hurdle left with the panel bar as some other stuff I am doing is mostly cosmetic, but this is more functional and I need to get this one figured out.

    Any help is greatly appreciated.

    Thanks,
    Ron Montecalvo
  2. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 09 Aug 2010 Link to this post

    Hi Ron Montecalvo,

    Thank you for indicating this problem to us!

    It's going to be logged as a bug in our issue tracking system and scheduled for fix.

    For now you can use the following workaround:
    1. Handle the ClientLoad event ("OnClientLoad") over the panelBar;
    2. Include the following implementation in the handler:
    var panelBar = sender;
    setTimeout(function () {
            var item = panelBar.get_expandedItem();
            item._getAnimationContainer().style.overflow = "auto";
        },
        0
    );

    Hope this is going to solve your problem!


    Regards,
    Nikolay Tsenkov
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 11 Aug 2010 Link to this post

    Thanks Nikolay,

    However I am most likely doing handling this wrong in some fashion, could you please provide a small working example so I can see what I am doing wrong on this.

    Thanks,
    Ron
  5. Answer
    Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 12 Aug 2010 Link to this post

    Hello Ron,

    Here is an example, using the markup that you provided initially:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="width: 300px; height: 300px; overflow:auto;">
            <asp:ScriptManager runat="server" ID="ScriptManager1" />
     
            <script type="text/javascript">
                function onLoad(sender)
                {
                    var panelBar = sender;
                    setTimeout(function () {
                            var item = panelBar.get_expandedItem();
                            item._getAnimationContainer().style.overflow = "auto";
                        },
                        0
                    );
                }
            </script>
     
            <telerik:RadPanelBar runat="server" ID="WebPageLeftPanel" Height="100%" Width="100%"
                ExpandMode="FullExpandedItem" OnClientLoad="onLoad">
                <Items>
                    <telerik:RadPanelItem Text="About This Metric" Expanded="True" Selected="true">
                        <ContentTemplate>
                            <div class="information">
                                <h5>
                                    Description</h5>
                                <p>
                                    The following metric will show the number of active Blackberry devices per model
                                    number within the organization. The chart provides for a graphical representation
                                    to illustrate the percentage each model accounts for in relation to the total number
                                    of devices. Below the chart a table is provided with the information the chart is
                                    based on and also inludes the total number of devices as well.
                                </p>
                                <h5>
                                    How to Read</h5>
                                <p>
                                    Each pie of the chart represent a percentage of the total number of devices. You
                                    can hover over each pie slice for more details to what the slice represents. Some
                                    slices may be too small therefore will not show as easily on the chart, however
                                    the table belows allows you to see the raw data for the chart, which includes the
                                    smaller slices.
                                </p>
                            </div>
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem Text="Quick Links">
                        <ContentTemplate>
                            <div class="quicklinks">
                                <telerik:RadSiteMap ID="QuickLinks" runat="server"
                                    ShowNodeLines="true" />
                        </ContentTemplate>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
        </form>
    </body>
    </html>

    Hope this is going to help you!


    Regards,
    Nikolay Tsenkov
    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
  6. Ron
    Ron avatar
    86 posts
    Member since:
    Sep 2009

    Posted 12 Aug 2010 Link to this post

    Thanks, that worked for the most part.  However, you need to not only do it for the OnClientLoad event, but also for the OnClientItemCollapse event too.  If it is just put in the OnClientLoad, it will only apply to the the first item which is expanded when the page loads.  However, you need to also apply this to any items expanded after the page loads too.  At first I tried using the OnClientItemExpand but this did not work, for some reason once the item was fully expanded, the scroll bars were lost.  Once I handled it using the OnClientItemCollapse, it worked perfectly.

    Thanks again for the fix,
    Ron

     

     

     

     

  7. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 13 Aug 2010 Link to this post

    Hello Ron,

    I am glad that you managed to use my example and adapt it for your scenario.

    Hope that you will not experience any more hard time with our controls, but if you do so, please feel free to contact with us again! We will be happy to help!


    Regards,
    Nikolay Tsenkov
    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
  8. TheGodFather
    TheGodFather avatar
    2 posts
    Member since:
    Feb 2011

    Posted 24 Feb 2011 Link to this post

    Is this issue fixed because the script provided does not fix my problem? I have a RadlistBox, same issue the panelbar acts with the
    radlistbox with the checkboxes inside as one item.. So there will never be a scroll bar no matter what the child element height is...

    Thanks.
  9. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 02 Mar 2011 Link to this post

    Hi,

    Could you, please, explain in a bit more detail the problem that you currently experience?
    Also, please, post an example reproducing the problem (there is no better explanation of the problem than the problem itself).


    Regards,
    Nikolay Tsenkov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  10. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 04 Mar 2011 Link to this post

    Did this ever get fixed? 

    I'm still having problems getting my contenttemplate content to scroll

    -- 
    Stuart
  11. TheGodFather
    TheGodFather avatar
    2 posts
    Member since:
    Feb 2011

    Posted 04 Mar 2011 Link to this post

    Stuart,

    Just set the height for the control inside the content template. You do not have to worry about the radpanelbar. So, For example,
    if you have a div inside or radlistbox you only will need the height for this controls inside the content template.  Now the issue with rad is not fixed yet, because the control in the content template (ex: radlistbox) will be filled on run time which radpanelbar will consider it as one control which will not have a scroll, so you would have to set the scroll for this control (ex: radlistbox).

    I hope this fixes your issue. Let me know if does not work.

  12. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2011 Link to this post

    From other posts I worked out that this function, when called from the OnClientLoad event of the panelbar goes some way to solving the issue...
    function ClientLoad(sender, e)
    {
        var panelBar = sender;
        var items = panelBar.get_items();
        for (var i = 0; i < items.get_count(); i++)
        {
            var item = items.getItem(i);
            if (item != null)
            {
                item._getAnimationContainer().style.overflow = "auto";
            }
        }
    }

    It's not ideal and I don't always get the outcome I expected, but it's a start.

    -- 
    Stuart
  13. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 05 Mar 2011 Link to this post

    Although a simpler, and more consistent, solution is to add the following style to the page...

    .rpSlide .rpTemplate
    {
        overflow:auto !important;
    }

    I did, however, discover that with one of my templates containing a RadTreeView I ended up with 2 lots of horizontal scrollbars, so I added ... 
    .RadTreeView
    {
        overflow:hidden !important;
    }

    So far, this is looking like the best solution, unless you know better...?

    -- 
    Stuart
  14. Sweety
    Sweety avatar
    2 posts
    Member since:
    Jun 2012

    Posted 28 Jun 2012 Link to this post

    I have created check boxes dynamically  with in the rad panel item. I have to add scrolling to the itemtemplates.Is it possible to add?
    How do we need to add scrolling.
  15. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 03 Jul 2012 Link to this post

    Hello,

    The content of the template is styled independently from RadPanelBar, so any approach on how to create a scroll through css should suffice - http://www.bing.com/search?q=add+scroll+css&src=ie9tr.

    Kind regards,
    Peter
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017