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

RadTreeView and CSS

9 Answers 178 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Mikko
Top achievements
Rank 1
Veteran
Mikko asked on 02 Nov 2019, 05:47 PM

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

 

9 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 06 Nov 2019, 02:39 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mikko
Top achievements
Rank 1
Veteran
answered on 07 Nov 2019, 06:28 PM

Hi Rumen,

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

Best regards, Mikko

0
Rumen
Telerik team
answered on 08 Nov 2019, 09:01 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mikko
Top achievements
Rank 1
Veteran
answered on 12 Nov 2019, 07:19 PM

Hi Rumen,

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

Best regards, Mikko

0
Rumen
Telerik team
answered on 13 Nov 2019, 08:44 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mikko
Top achievements
Rank 1
Veteran
answered on 13 Nov 2019, 09:11 AM

Hi Rumen,

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

Mikko

0
Rumen
Telerik team
answered on 13 Nov 2019, 01:27 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Mikko
Top achievements
Rank 1
Veteran
answered on 05 Dec 2019, 05:23 PM

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.

0
Rumen
Telerik team
answered on 10 Dec 2019, 11:05 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeView
Asked by
Mikko
Top achievements
Rank 1
Veteran
Answers by
Rumen
Telerik team
Mikko
Top achievements
Rank 1
Veteran
Share this question
or