RadTreeView - Nodes are Flashing on Move Hover after Scroll Down

[Daniel]

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.

[Boyan Dimitrov]

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

 

 

[Daniel]

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:

position: absolute !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.

[Boyan Dimitrov]

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

 

 

[Daniel]

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.

[Boyan Dimitrov]

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

 

 

[Daniel]

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.

[Boyan Dimitrov]

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