Hiding Expand/Collapse Image

13 posts, 1 answers
  1. Stephen
    Stephen avatar
    17 posts
    Member since:
    Jan 2009

    Posted 19 Apr 2009 Link to this post

    Hi there

    I have a couple of panel bars which will only ever have a single top level item in it with a varying number of children.  The panelbar is set to expand fully and the top level item is set to prevent collapse.  However, even though the user cannot collapse the item, the expand/collapse icons are still visible on the item (I am using the Vista skin on 2009 Q1).  Is there any way to remove the expand/collapse icon?  I tried setting the ExpandedCSSClass to nothing but without success.  Any ideas greatly appreciated.

    Thanks

    Stephen
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Apr 2009 Link to this post

    Hello Stephen,

    Please add the following CSS in your page.
    <style type="text/css">
            div.RadPanelBar .rpExpandable .rpText,
            div.RadPanelBar .rpExpanded .rpText
            {
                background-image:none;
            }
    </style>

    Greetings,
    Albert
    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. Stephen
    Stephen avatar
    17 posts
    Member since:
    Jan 2009

    Posted 20 Apr 2009 Link to this post

    Thanks for that.  However, this change will affect all PanelBars on the page.  Is there a way for it to apply only to specific panel bar items that are marked with PreventCollapse?

    Thanks
    Stephen
  5. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 21 Apr 2009 Link to this post

    Hello Stephen,

    The following CSS rule will be applied only to RadPanelBar having ID = RadPanelBar1:

    <style type="text/css"
            div#RadPanelBar1.RadPanelBar .rpExpandable .rpText, 
            div#RadPanelBar1.RadPanelBar .rpExpanded .rpText 
            { 
                background-image:none
            } 
    </style> 


    Kind regards,
    Veselin Vasilev
    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.
  6. kavitha
    kavitha avatar
    17 posts
    Member since:
    Oct 2010

    Posted 26 Dec 2010 Link to this post

    Hello,

      I am trying to do the same thing. I use Telerik Q3 2010. The following style element when added is not hiding the image. Can you please suggest what might be the issue?

    Thanks,
    Kavitha
  7. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 27 Dec 2010 Link to this post

    Hello Kavitha,

    Please try it like this:

    div#RadPanelBar1.RadPanelBar span.rpExpandHandle {
      background-image: none !important;
    }

    All the best,
    Yana
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  8. kavitha
    kavitha avatar
    17 posts
    Member since:
    Oct 2010

    Posted 27 Dec 2010 Link to this post

    Hello Yana,

      That is not working either. I tried setting that in both the PanelBar.Vista.css as well as a style element on my aspx page, but the image is still displayed on the RadPanelBar.

    Any thoughts?

    Thanks,
  9. kavitha
    kavitha avatar
    17 posts
    Member since:
    Oct 2010

    Posted 27 Dec 2010 Link to this post

    It worked this time!! I had skipped the !important after the none earlier. Thanks a lot for your help.Thank you very much !
  10. ghini
    ghini avatar
    25 posts
    Member since:
    Sep 2012

    Posted 23 Oct 2014 Link to this post

    Hi,
    I would like to remove all the icons from the RadPanelBar.
    I used this css:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestMenu.aspx.vb" Inherits="TestMenu" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">    
            .new .rpOut .rpExpandHandle {
                background-image: none !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <telerik:RadPanelBar ID="RadPanelBar1" Runat="server" Skin="MetroTouch" CssClass="new">
                <Items>
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 3">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                            </telerik:RadPanelItem>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 2">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem4">
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem runat="server" Text="Root RadPanelItem5">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                            </telerik:RadPanelItem>
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
        </form>
    </body>
    </html>


    I would also delete the circle ...

    Thanks!
  11. ghini
    ghini avatar
    25 posts
    Member since:
    Sep 2012

    Posted 26 Oct 2014 in reply to ghini Link to this post

    Please....
  12. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 27 Oct 2014 Link to this post

    Hi ghini,

    Try to add this css:
    <style type="text/css">
        html .RadPanelBar_MetroTouch .rpExpandable .rpExpandHandle {
            background-image:none;
        }
     
        html .RadPanelBar_MetroTouch .rpExpandHandle {
            border: 0px solid;
        }
    </style>

    I hope this helps.

    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. ghini
    ghini avatar
    25 posts
    Member since:
    Sep 2012

    Posted 09 Nov 2014 in reply to Hristo Valyavicharski Link to this post

    Hi Hristo,
    I've update my project to last version 2014.3.1024.45 and your suggestion does not work anymore!

    New suggestion?

    Thanks!
  14. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 10 Nov 2014 Link to this post

    These styles should help:

        <style type="text/css">
            html .RadPanelBar_MetroTouch .rpExpandable .rpExpandHandle {
                background-image: none;
                border: 0px solid;
            }
        </style>


    Regards,
    Hristo Valyavicharski
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017