RadTreeView and CSS

[Mikko]

Hi,

I'm trying to replace ASP.NET Ajax TreeView control with a Telerik component.

For each level, we use different style and backgroud image. We have two issues:

• We would like to move text to the right 20 px. With Ajax we can do it with CSS padding.
• Hower is not working.

Please notice that we need to use different hover, selected etc for each level. It seems that Hover is infact moving text 20 px to the right, but it will also override background image.

Best regards, Mikko

 

[Rumen]

Hi Mikko,

I performed the following test by setting the CssClass and HoveredCssClass properties to the RadTreeNode Child 1.1 and verified that they work as expected and moved the node text to the right:

<style>
    .myClass 
    {
        padding-left: 20px !important;
        border: 1px solid red !important;
    }
    .myHoveredClass 
    {
        padding-left: 40px !important;
        border: 1px solid green !important;
    }
</style>
<telerik:RadTreeView runat="server" RenderMode="Lightweight" ID="RadTreeView1">
    <Nodes>
        <telerik:RadTreeNode Text="Root 1" Expanded="true">
            <Nodes>
                <telerik:RadTreeNode Text="Child 1.1" ImageUrl="images/CheckIcon.png" CssClass="myClass" HoveredCssClass="myHoveredClass"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.2"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.3"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 1.4"></telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Root 2" Expanded="true">
            <Nodes>
                <telerik:RadTreeNode Text="Child 2.1"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.2"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.3"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 2.4"></telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode Text="Root 3" Expanded="true">
            <Nodes>
                <telerik:RadTreeNode Text="Child 3.1"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 3.2"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 3.3"></telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Child 3.4"></telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

For your convenience and for reference I have recorded a short video clip, which also shows how to use the HTML and CSS inspector of Chrome to see what classes and settings are applied to the nodes.

Is your scenario different? If the above information is not enough to resolve the issue, can you provide more details on it along with screenshots/video what is happening on your end.

Regards,
Rumen
Progress Telerik

[Mikko]

Hi Rumen,

Thank you for your help. Just adding "!Important" solved our problems :-)

Best regards, Mikko

[Rumen]

Hi Mikko,

Glad to be of help!

If you want to avoid using the !important rule, you can define selectors with higher specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. 

Best Regards,
Rumen
Progress Telerik

[Mikko]

Hi Rumen,

Is there a way to setup a depth (level) of treeview that is expanded?

Best regards, Mikko

[Rumen]

Hi Mikko,

The RadTreeView node offers a Level property which is accepts an integer value that indicates the node distance from the root node: the root node Level property is zero, children of the root nodes have a level property of "1" and so on.

You can find more information for the properties of the treeview node at https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/radtreeview-nodes/overview.

Regards,
Rumen
Progress Telerik

[Mikko]

Hi Rumen,

I would like to expand nodes level 1 and 2, but keep other nodes closed. How can I do this?

Mikko

[Rumen]

Hi Mikko,

You can find an example at https://stackoverflow.com/questions/30899847/expand-radtreeview-from-serverside. 

The RadTreeViewNode class also has a server method ExpandParentNodes(), which (as the name suggests) expands all the parent nodes of a particular node. Here's a sample code of how you can use it:

You can also expand the nodes with RadTreeView1.Nodes[0].Nodes[0].ExpandParentNodes(); which is a server solution.

Another approach is:

if (RadTreeView1.Nodes[i].Level == 2)
{
          RadTreeView1.Nodes[i].Expanded = true;
}

Regards,
Rumen
Progress Telerik

[Mikko]

Thanks Rumen,

With Ajax TreeView we are using following code:

 

   tv_Documents.ExpandAll()
            
            For Each TN As TreeNode In tv_Documents.Nodes

                For Each CN As TreeNode In TN.ChildNodes
                    
                    If CN.Depth <= sDepth Then
                        CN.Expanded = True
                    Else
                        CN.Expanded = False
                    End If
                    
                   
                    For Each CCN As TreeNode In CN.ChildNodes
                        
                        If CCN.Depth <= sDepth Then
                            CCN.Expanded = True
                        Else
                            CCN.Expanded = False
                        End If
                        
                        
                        For Each CCCN As TreeNode In CCN.ChildNodes
                            
                            If CCCN.Depth <= sDepth Then
                                CCCN.Expanded = True
                            Else
                                CCCN.Expanded = False
                            End If
                            
                        Next
    
                    Next
    
                Next

            Next

Is there a better way to "check" all child nodes in a situation there might thousands of nodes.

[Rumen]

Hi Mikko,

Your code looks OK. The only think you can also try is to use recursion.

If you want to check all nodes there is a .CheckAllNodes() method. You can also get all nodes via GetAllNodes.

Regards,
Rumen
Progress Telerik