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

Scrolling Issue with PanelBar

13 Answers 192 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 2
Ron asked on 05 Aug 2010, 07:30 PM

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

13 Answers, 1 is accepted

Sort by
0
Nikolay Tsenkov
Telerik team
answered on 09 Aug 2010, 01:53 PM
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
0
Ron
Top achievements
Rank 2
answered on 11 Aug 2010, 07:42 PM
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
0
Accepted
Nikolay Tsenkov
Telerik team
answered on 12 Aug 2010, 12:43 PM
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
0
Ron
Top achievements
Rank 2
answered on 12 Aug 2010, 02:11 PM
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

 

 

 

 

0
Nikolay Tsenkov
Telerik team
answered on 13 Aug 2010, 12:55 PM
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
0
TheGodFather
Top achievements
Rank 1
answered on 25 Feb 2011, 04:08 AM
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.
0
Nikolay Tsenkov
Telerik team
answered on 02 Mar 2011, 11:45 AM
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!
0
Stuart Hemming
Top achievements
Rank 2
answered on 05 Mar 2011, 01:34 AM
Did this ever get fixed? 

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

-- 
Stuart
0
TheGodFather
Top achievements
Rank 1
answered on 05 Mar 2011, 03:40 AM
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.

0
Stuart Hemming
Top achievements
Rank 2
answered on 05 Mar 2011, 06:22 PM
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
0
Stuart Hemming
Top achievements
Rank 2
answered on 05 Mar 2011, 07:44 PM
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
0
Sweety
Top achievements
Rank 1
answered on 29 Jun 2012, 03:04 AM
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.
0
Peter
Telerik team
answered on 03 Jul 2012, 10:05 AM
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.
Tags
PanelBar
Asked by
Ron
Top achievements
Rank 2
Answers by
Nikolay Tsenkov
Telerik team
Ron
Top achievements
Rank 2
TheGodFather
Top achievements
Rank 1
Stuart Hemming
Top achievements
Rank 2
Sweety
Top achievements
Rank 1
Peter
Telerik team
Share this question
or