RadPanelBar, RadMenu, and overflow

6 posts, 0 answers
  1. Andy
    Andy avatar
    3 posts
    Member since:
    Oct 2011

    Posted 14 Oct 2011 Link to this post

    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">
    <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
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Oct 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andy
    Andy avatar
    3 posts
    Member since:
    Oct 2011

    Posted 20 Oct 2011 Link to this post

    Hi Kate,

    Thank you for the response. I notice that the "SummaryItem" group ends up with a horizontal scroll bar that doesn't do anything (it can't be moved). Is there anyway to only have the vertical scroll bar?

    Also, what is the problem with respect to Firefox? Is this something you plan to fix?

    Respectfully,
    Andy Canham

  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 26 Oct 2011 Link to this post

    Hi Andy,

    It seems to be a bug. Therefore I logged it in our internal system and forwarded your request to the development team.

    Regards,
    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. Andy
    Andy avatar
    3 posts
    Member since:
    Oct 2011

    Posted 26 Oct 2011 Link to this post

    Hi Kate,

    Thank you again for the help - it is greatly appreciated.

    Regards,
    Andy Canham
  7. P
    P avatar
    4 posts
    Member since:
    Mar 2012

    Posted 06 Mar 2012 Link to this post

    Hi,

    I am trying to do this with a horizontal scroll.  Can you show me how the style would be different for my case?
    Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017