Tree view hover color

5 posts, 1 answers
  1. Mike Arasteh
    Mike Arasteh avatar
    5 posts
    Member since:
    Apr 2010

    Posted 01 Apr 2010 Link to this post

    Hello,

    On the tree view, when I hover or click on an item, it gets highlighted with some color.
    The color covers only the length of the text, so they become inconsistent as one text is longer than the other.
    How can I make the color fixed and not changed based on the length of the text.


    Thank You..!
  2. Answer
    Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 02 Apr 2010 Link to this post

    Hello Mike Arasteh,

    You can achieve this using the following CSS:

    .rtSelected .rtIn, .rtHover .rtIn
    {
        background:none !important;
        color:#000000 !important;
        border:none !important;
    }

    If you want to preserve to have border around the selected node, please remove the borde:none declaration.

    Greetings,
    Genady Sergeev
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mike Arasteh
    Mike Arasteh avatar
    5 posts
    Member since:
    Apr 2010

    Posted 04 Apr 2010 Link to this post

    Thanks alot
  5. Ben
    Ben avatar
    4 posts
    Member since:
    Oct 2012

    Posted 13 Dec 2012 Link to this post

    Hi Genady,

    Is there a way to do this for the top node only? I want subnodes to behave the default way but only the root nodes to not show the highlight around the text.

    -Ben
  6. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Dec 2012 Link to this post

    Hi Ben,

    Try the following code snippet to remove the hover effect of RadTreeNode.

    ASPX:
    <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientMouseOver="unhighlight" ......>
    </telerik:RadTreeView>

    JS:
    <script type="text/javascript">
        function unhighlight(sender, args) {
            if (args.get_node().get_level() == 0) {
                args.get_node().unhighlight();
            }
        }
    </script>

    Hope this helps.

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