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

Items with long names don't work properly

7 Answers 72 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
ben.grossman
Top achievements
Rank 1
ben.grossman asked on 28 Jul 2009, 03:48 PM
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

7 Answers, 1 is accepted

Sort by
0
Accepted
Paul
Telerik team
answered on 31 Jul 2009, 11:33 AM
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.
0
Choon Liang Chang
Top achievements
Rank 1
answered on 26 Aug 2009, 06:46 AM
how can i get this Simple skin ?
0
Princy
Top achievements
Rank 2
answered on 26 Aug 2009, 07:44 AM
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.
0
Kori
Top achievements
Rank 2
answered on 24 Feb 2010, 08:01 PM
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?
0
Yana
Telerik team
answered on 25 Feb 2010, 02:35 PM
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.
0
Pradeep Deshpande
Top achievements
Rank 1
answered on 27 Nov 2012, 01:36 PM
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?
0
Kate
Telerik team
answered on 30 Nov 2012, 01:18 PM
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.
Tags
PanelBar
Asked by
ben.grossman
Top achievements
Rank 1
Answers by
Paul
Telerik team
Choon Liang Chang
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Kori
Top achievements
Rank 2
Yana
Telerik team
Pradeep Deshpande
Top achievements
Rank 1
Kate
Telerik team
Share this question
or