Items with long names don't work properly

8 posts, 1 answers
  1. ben.grossman
    ben.grossman avatar
    22 posts
    Member since:
    Jul 2007

    Posted 28 Jul 2009 Link to this post

    Hello,

    I am having an issue with items that have too long of names to fit on one line of the RadPanelBar.  If you hover over one of these items, the first problem is only the first line is highlited.  The second problem is after clicking the item, the second line disappears all together.  I have included an example of code that will cause this problem below.  Expand the "Items" item, then the "Child Item" and the next item will have the issue.

    <%@ 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.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head runat="server"
        <title>Untitled Page</title> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div> 
                <telerik:RadPanelBar ID="RadPanelBar1" runat="server"
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Items"
                            <Items> 
                                <telerik:RadPanelItem runat="server" Text="Child Item"
                                    <Items> 
                                        <telerik:RadPanelItem runat="server" Text="An Item with a long enough name to need 2 lines"
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelBar> 
            </div> 
        </form> 
    </body> 
    </html> 
     


    Thank you in advance,
    Ben
  2. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 31 Jul 2009 Link to this post

    Hi ben.grossman,

    Text wrapping is supported while using the new Simple skin only.

    <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Simple"
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Items"
                    <Items> 
                        <telerik:RadPanelItem runat="server" Text="Child Item"
                            <Items> 
                                <telerik:RadPanelItem runat="server" Text="An Item with a long enough name to need 2 lines"
                                </telerik:RadPanelItem> 
                            </Items> 
                        </telerik:RadPanelItem> 
                    </Items> 
                </telerik:RadPanelItem> 
            </Items> 
        </telerik:RadPanelBar> 

    This particular scenario cannot be achieved with a skin other than Simple.

    All other skins use background images for the different states of the item, thus it is impossible to wrap the text of the item and 'extend' the image for the selected or hovered states.

    A possible workaround is to not wrap the items text, and use tooltip for displaying it.

    Best wishes,
    Paul
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Choon Liang Chang
    Choon Liang Chang avatar
    1 posts
    Member since:
    Jul 2009

    Posted 26 Aug 2009 Link to this post

    how can i get this Simple skin ?
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Aug 2009 Link to this post

    Hello Choon Liang Chang,

    The 'Simple' skin is available only with the latest version of RadControls i.e., Q1 2009 SP2 (version 2009.1.527). So if you are using an older version then you can upgrade to the latest version to get the 'Simple' Skin.

    You can also refer to the following kb article while upgrading to later versions :
    Updating RadControls for ASP.NET to another version or license

    Thanks
    Princy.
  6. kfrancis
    kfrancis avatar
    69 posts
    Member since:
    Dec 2008

    Posted 24 Feb 2010 Link to this post

    Thanks for letting us know it was the Simple skin, but is Telerik going to update this for the rest of the skin family?
    ... soon?
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 25 Feb 2010 Link to this post

    Hi Kori,

    As it's explained earlier, the other skins use background images with fixed height and they are designed not to support wrapped text because of their round corners.  Which skin exactly do you need? We can make some modifications to it in order to fulfill your requirements.

    All the best,
    Yana
    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. Pradeep Deshpande
    Pradeep Deshpande avatar
    8 posts
    Member since:
    Sep 2009

    Posted 27 Nov 2012 Link to this post

    We are running into same issue... As suggested the simple skin works. But i need this to work for other skins as we provide options for the users to change their layout. Whatt is the change we need to make for other skins to work?
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Nov 2012 Link to this post

    Hi Pradeep,

    For the different skins you will need to alter the different sprite images that are applied for the hover effect as explained in the following help articles - How to change height of RadMenu

    Another approach that will not involve altering the sprite image would be to simply increase the height of the MenuItem and apply a simple background color when hovered. To get the second approach you can use the following css class selectors:
    div.RadMenu_Default a.rmLink,
           div.RadMenu_Default .rmGroup .rmText,
           div.RadMenu_Default .rmVertical .rmText {
               background-image: none;
           }
            
           div.RadMenu_Default .rmGroup a.rmLink:hover,
           div.RadMenu_Default .rmGroup a.rmFocused,
           div.RadMenu_Default .rmGroup a.rmSelected,
           div.RadMenu_Default .rmGroup a.rmExpanded {
               background-color: red;
           }

    Note that for the different skins you will need to change the Default name of the skin in the selector by placing the desired one.

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