RadTreeView and CSS

10 posts, 0 answers
  1. Mikko
    Mikko avatar
    16 posts
    Member since:
    Jun 2012

    Posted 02 Nov 2019 Link to this post

    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

     

  2. Rumen
    Admin
    Rumen avatar
    14165 posts

    Posted 06 Nov 2019 Link to this post

    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.
  3. Mikko
    Mikko avatar
    16 posts
    Member since:
    Jun 2012

    Posted 07 Nov 2019 in reply to Rumen Link to this post

    Hi Rumen,

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

    Best regards, Mikko

  4. Rumen
    Admin
    Rumen avatar
    14165 posts

    Posted 08 Nov 2019 Link to this post

    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.
  5. Mikko
    Mikko avatar
    16 posts
    Member since:
    Jun 2012

    Posted 12 Nov 2019 in reply to Rumen Link to this post

    Hi Rumen,

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

    Best regards, Mikko

  6. Rumen
    Admin
    Rumen avatar
    14165 posts

    Posted 13 Nov 2019 Link to this post

    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.
  7. Mikko
    Mikko avatar
    16 posts
    Member since:
    Jun 2012

    Posted 13 Nov 2019 in reply to Rumen Link to this post

    Hi Rumen,

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

    Mikko

  8. Rumen
    Admin
    Rumen avatar
    14165 posts

    Posted 13 Nov 2019 Link to this post

    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.
  9. Mikko
    Mikko avatar
    16 posts
    Member since:
    Jun 2012

    Posted 05 Dec 2019 in reply to Rumen Link to this post

    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.

  10. Rumen
    Admin
    Rumen avatar
    14165 posts

    Posted 10 Dec 2019 Link to this post

    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.
Back to Top