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

RadTreeView - Nodes are Flashing on Move Hover after Scroll Down

7 Answers 125 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 15 Sep 2014, 08:36 AM
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.

7 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 18 Sep 2014, 10:00 AM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 18 Sep 2014, 01:09 PM
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.
0
Boyan Dimitrov
Telerik team
answered on 23 Sep 2014, 10:56 AM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 28 Sep 2014, 04:11 PM
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.
0
Boyan Dimitrov
Telerik team
answered on 01 Oct 2014, 03:01 PM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 20 Oct 2014, 09:14 AM
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.
0
Boyan Dimitrov
Telerik team
answered on 23 Oct 2014, 07:36 AM
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.

 
Tags
TreeView
Asked by
Daniel
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or