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

Scrolling Issue with PanelBar

13 Answers 271 Views

PanelBar

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

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

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

Accepted

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

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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

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.

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Scrolling Issue with PanelBar

13 Answers, 1 is accepted