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

RadPanelBar, RadMenu, and overflow

5 Answers 253 Views

PanelBar

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

Andy asked on 14 Oct 2011, 03:11 PM

I have a RadPanelBar that I am trying to display with the following conditions:
The first RadPanelItem needs to have a fixed height and a scrollbar when the content of the item exceeds the fixed height.
The second RadPanelItem needs to have one of its sub items replaced with a RadMenu that pops out to the side.

Using the information I have found on the this web site, I have created a sample web site (which I am not able to attach). The problem is that I have only been able to meet one goal at a time. In order to have the menu appear correctly, it is necessary to uncomment the <style> tag in the .aspx document so that the css statement "overflow: visible !important;" is applied to the content. However, when I do this, the content of the first RadPanelItem then overflows and overwrites the content of following RadPanelItems. Is there any way to have the content of the first RadPanelItem either ignore the overflow command or, failing that, override it?

I am using the latest Telerik release.

Since I am not able to attach my sample web site, I will paste some relevant fragments:
WebForm1.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %>

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

<%-- <style type="text/css">

.RadPanelBar, .RadPanelBar .rpSlide, .RadPanelBar .rpGroup, .RadPanelBar .rpItem        /*, .RadPanelBar .rpTemplate*/

{

overflow: visible !important;

}

div.RadPanelBar .rpLevel1 .rpItem

{

padding:0;

}

* html .RadPanelBar .RadMenu ul.rmRootGroup

{

zoom: 1;

}

div.RadMenu .rmRootGroup

{

border: 0;

}

div.RadMenu .rmLink

{

float: none;

}

.NoOverflow, .NoOverflow .RadPanelBar, .NoOverflow .rpLevel1, .NoOverflow .rpExpanded, .NoOverflow .rpGroup, .NoOverflow .rpItem        /*, .RadPanelBar .rpTemplate*/

{

overflow: scroll !important;

}

</style>--%>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadPanelBar runat="server" ID="RadPanelBar1" Height="400px" Width="30%"

ExpandMode="MultipleExpandedItems">

<Items>

<telerik:RadPanelItem Text="<strong>Project Summary</strong>" Value="SummaryItem"

ChildGroupCssClass="NoOverflow" ChildGroupHeight="164px" Expanded="true">

<Items>

<telerik:RadPanelItem Text="" Value="ProjectSummary" Height="40px" Expanded="true" CssClass="myCssClass" />

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="<strong>Actions</strong>" Value="ProjectItem" Expanded="true">

<Items>

<telerik:RadPanelItem Value="AdvanceProject" runat="server" />

<telerik:RadPanelItem Text="Edit Project Settings" Value="EditProject" ToolTip="Edit the project settings" />

<telerik:RadPanelItem Text="Edit Assumptions" Value="EditSolution" ToolTip="Edit the assumptions and rerun the current solution" />

<telerik:RadPanelItem Text="View Solution" Value="ViewSolution" ToolTip="View the current solution" />

<telerik:RadPanelItem Text="Archive This Solution" Value="ArchiveSolution" ToolTip="Save this solution in its current state">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="<strong>Archive</strong>" Value="SolutionList">

<Items>

<telerik:RadPanelItem Text="Archived Solutions" Value="EditLog" />

<telerik:RadPanelItem Text="Select Archived Solution" Value="LoggedSolutions" />

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</div>

</form>

</body>

</html>

and WebForm1.aspx.cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

namespace WebApp

{

public class AdvanceMenuItem

{

public int? Id { get; set; }

public string Name { get; set; }

public string Value { get; set; }

public int? parentId { get; set; }

}

public partial class WebForm1 : System.Web.UI.Page

{

protected void Page_Load( object sender, EventArgs e )

{

RadPanelItem summaryItem = RadPanelBar1.FindItemByValue( "ProjectSummary" );

if ( summaryItem != null )

{

Table t = new Table() { CellPadding = 0, CellSpacing = 0, Width = new Unit( 98, UnitType.Percentage ), Height = summaryItem.Height };

int count = 0;

TableRow r = new TableRow();

TableCell c = new TableCell() { CssClass = "PanelCellHeader", Width = new Unit( 40, UnitType.Percentage ) };

c.Controls.Add( new Label() { Text = "", ID = "Label" + count.ToString() } );

r.Cells.Add( c );

t.Rows.Add( r );

count++;

for ( int i = 1; i < 10; i++ )

{

r = new TableRow();

c = new TableCell() { CssClass = "PanelCell" };

c.Controls.Add( new Label() { Text = "Item " + i.ToString(), ID = "Label" + i.ToString() } );

r.Cells.Add( c );

c = new TableCell() { CssClass = "PanelCell" };

c.Controls.Add( new Label() { Text = "Value " + i.ToString(), ID = "Value" + i.ToString() } );

r.Cells.Add( c );

t.Rows.Add( r );

}

summaryItem.Controls.Add( t );

}

RadPanelItem advanceItem = RadPanelBar1.FindItemByValue( "AdvanceProject" ); // zzzASC - perhaps this should be something besides 'advance'

if ( advanceItem != null )

{

List<AdvanceMenuItem> items = new List<AdvanceMenuItem>();

items.Add( new AdvanceMenuItem() { Id = 1, parentId = null, Name = "Advance Project" } );

items.Add( new AdvanceMenuItem() { Id = 2, parentId = 1, Name = "User Solution" } );

items.Add( new AdvanceMenuItem() { Id = 3, parentId = 1, Name = "Balanced Solution" } );

RadMenu rMenu = new RadMenu() { Flow = ItemFlow.Vertical, DataFieldID = "Id", DataFieldParentID = "parentId", DataTextField = "Name", Width = Unit.Percentage( 100 ) }; //

rMenu.DataSource = items;

rMenu.DataBind();

foreach ( RadMenuItem menuItem in rMenu.GetAllItems() )

{

menuItem.Width = Unit.Percentage( 100 );

}

advanceItem.Text = "";

advanceItem.Expanded = true;

advanceItem.Controls.Add( rMenu );

}

Thanks in advance,
Andy Canham

5 Answers, 1 is accepted

answered on 19 Oct 2011, 11:10 AM

Hi Andy,

I would suggest that you use the following css styles that work just fine in all versions of IE and Chrome. However, there is a limitation of this approach and it does not work correctly in FireFox only.

<style type="text/css">

RadPanelBar,

.RadPanelBar div.rpSlide,

.RadPanelBar ul.rpGroup,

.RadPanelBar li.rpItem /*, .RadPanelBar .rpTemplate*/

{

overflow: visible;

}

div.RadPanelBar .rpLevel1 .rpItem

{

padding:0;

}

* html .RadPanelBar .RadMenu ul.rmRootGroup

{

zoom: 1;

}

div.RadMenu .rmRootGroup

{

border: 0;

}

div.RadMenu .rmLink

{

float: none;

}

.NoOverflow,

.NoOverflow .RadPanelBar,

.NoOverflow .rpLevel1,

.NoOverflow .rpExpanded,

.NoOverflow .rpGroup,

.NoOverflow .rpItem /*, .RadPanelBar .rpTemplate*/

{

overflow: scroll !important;

}

</style>

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