RadTreeView - Nodes are Flashing on Move Hover after Scroll Down

8 posts, 0 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 15 Sep 2014 Link to this post

    Hello,

    I am working on a project with a RadTreeView.

    The height is fixed.
    The RadTreeView is set as follows:

    <style type="text/css">
            .crop {
                width: 150px;
                overflow-x: hidden;
            }
            .No-crop {
                overflow-x: visible !important;
                position: absolute !important;
            }
        </style>
        <script type="text/javascript">
            function TreeClientMouseOver(sender, e) {
      
                e.get_node().set_cssClass("No-crop");
            }
      
            function TreeClientMouseOut(sender, e) {
      
                e.get_node().set_cssClass("crop");
            }
      
      
      
        </script>
     
                           <telerik:RadTreeView ID="RadTreeView1" Runat="server" Height="400px" Skin="Outlook" OnClientMouseOver="TreeClientMouseOver" OnClientMouseOut="TreeClientMouseOut" >
                                <Nodes>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode3">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 5">
                                                <Nodes>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                                    </telerik:RadTreeNode>
                                                    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">
                                                    </telerik:RadTreeNode>
                                                </Nodes>
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 6">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 7">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode4">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode5">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode6">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode7">
                                        <Nodes>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 3">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 4">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 5">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 6">
                                            </telerik:RadTreeNode>
                                            <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 7">
                                            </telerik:RadTreeNode>
                                        </Nodes>
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode8">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode9">
                                    </telerik:RadTreeNode>
                                    <telerik:RadTreeNode runat="server" Text="Root RadTreeNode10">
                                    </telerik:RadTreeNode>
                                </Nodes>
                            </telerik:RadTreeView>

    When the mouse hovers over a node, I set a JS function to overflow: visible. Then, when the mouse exits the node the overflow is hidden.

    The problem is after the user scrolls down the RadTreeView. Then, when mouse hovers over a
    node, it starts to flash and the overflowed node is misplaced.

    [See video that shows the Node Flashing problem]

    How can I solve this?

    Thanks,
    Daniel.
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 18 Sep 2014 Link to this post

    Hello,

    Applying the style below is actually causing the issue:
    //style
    .No-crop {
                ...
                position: absolute !important;
            }

    Removing that style will avoid flashing the node text below the RadTreeView container. Is there any specific functionality  you want to achieve by setting the position to "absolute"?

    I noticed one more problem that when you hover on different nodes the container is moving a bit. This is caused by adding and removing a border. Following style will fix it:
    //style
    .RadTreeView .rtIn {
                border: 1px solid transparent;
            }


    Regards,
    Boyan Dimitrov
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 18 Sep 2014 in reply to Boyan Dimitrov Link to this post

    Hi Boyan Dimitrov,

    Thanks for the reply.

    This solves the problem of the flashing nodes. However, I have now a different problem.
    After removing the code:
    positionabsolute !important;

    The width of the div that wraps the RadTreeView is fixed-size. Therefore, when the mouse
    hovers over a node, the user can’t see the full text of the node.
    [See video that shows the problem]

    I would be glad to get a solution that meets all the requirements of my project.

    Thanks,
    Daniel.
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Sep 2014 Link to this post

    Hello,

    Could you please set the following style in order to make the text of all RadTreeView nodes visible.
    //css
    <style type="text/css">
            .RadTreeView {
                overflow:visible !important;
            }
        </style>



    Regards,
    Boyan Dimitrov
    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.

     
  6. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 28 Sep 2014 in reply to Boyan Dimitrov Link to this post

    Hi Boyan Dimitrov.

    Thank you for the solution you have provided.

    Unfortunately, it doesn't meet my project’s requirements.
    I have attached a project that demonstrates the problem.
    [Attached project]

    Hoping for a solution and thanks,
    Daniel.
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 01 Oct 2014 Link to this post

    Hеllo,

    Please try to modify the following style:
    //css
    .crop {
               width: 250px;
               overflow-x: hidden;
           }

    This way there will be enough space all nodes to be visible.


    Regards,
    Boyan Dimitrov
    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.

     
  8. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 20 Oct 2014 in reply to Boyan Dimitrov Link to this post

    Hi Boyan Dimitrov,

    Thank you for your response.

    However, I have project requirements that must be met. For example, the width must be no more than 150px.
    I would be happy for a solution that meets the project’s requirements.

    Thanks,
    Daniel.
  9. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 23 Oct 2014 Link to this post

    Hеllo Daniel,

    I would like to clarify that such positioning above the scroll bar is not supported scenario. As I mentioned the only solution is to increase the width of the container with the RadTreeView control.


    Regards,
    Boyan Dimitrov
    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