Tree View styling

5 posts, 1 answers
  1. Andrew Short
    Andrew Short avatar
    25 posts
    Member since:
    Feb 2008

    Posted 24 Jun 2008 Link to this post

    Is there a way to change the cursor style on a treeview. For example, in the OnMouseOver and OnMouseOut events, I would like to do something like...
    document.style.cursor = "hand".  Essentially I would like the cursor to change when moused over the treeview.  Any ideas?
  2. Answer
    Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 24 Jun 2008 Link to this post

    Hi Andrew,

    You can set the CssClass property on each RadTreeNode and then set a style rule to change the cursor type.

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    3  
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5  
    6 <html xmlns="http://www.w3.org/1999/xhtml"
    7 <head runat="server"
    8     <title>Untitled Page</title> 
    9     <style type="text/css"
    10         .RadNode 
    11         { 
    12             cursor: hand; 
    13         } 
    14     </style> 
    15 </head> 
    16 <body> 
    17     <form id="form1" runat="server"
    18         <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    19                  
    20         <telerik:RadTreeView ID="RadTreeView1" runat="server"
    21             <Nodes> 
    22                 <telerik:RadTreeNode Text="Node 1" CssClass="RadNode"
    23                     <Nodes> 
    24                         <telerik:RadTreeNode Text="Node 1.1" CssClass="RadNode"/> 
    25                         <telerik:RadTreeNode Text="Node 1.2" CssClass="RadNode"/> 
    26                     </Nodes> 
    27                 </telerik:RadTreeNode> 
    28                 <telerik:RadTreeNode Text="Node 2" CssClass="RadNode"
    29                     <Nodes> 
    30                         <telerik:RadTreeNode Text="Node 2.1" CssClass="RadNode"/> 
    31                         <telerik:RadTreeNode Text="Node 2.2" CssClass="RadNode"/> 
    32                     </Nodes> 
    33                 </telerik:RadTreeNode> 
    34             </Nodes> 
    35         </telerik:RadTreeView> 
    36          
    37     </form> 
    38 </body> 
    39 </html> 
    40  

    The default class for the RadTreeNode is 'rtIn', so if you find the process of adding the CssClass property to each element too tedious, you can simply make a style rule for that class instead.

    You should note that the 'hand' cursor is not supported in Firefox. Please check out this link for information on which browsers support which cursors.

    I hope this was helpful. If you have any further questions, please let me know.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. parimal
    parimal avatar
    138 posts
    Member since:
    Feb 2007

    Posted 19 Nov 2008 Link to this post

    Hi,

    I am genarting RAD Tree View programatically.

    DataSet

     

    dsCategoryCards = Database Call;
    if (dsCategoryCards.Tables[0] != null && dsCategoryCards.Tables[0].Rows.Count > 0)

     

    {

    tvCategories.DataTextField =

    "IDNAME";

     

    tvCategories.MaxDataBindDepth = 3;

    tvCategories.DataFieldID =

    "ID";

     

    tvCategories.DataFieldParentID =

    "ParentTreeViewId";

     

    tvCategories.DataValueField =

    "ID";

     

    tvCategories.DataSource = dsCategoryCards.Tables[0];

    tvCategories.DataBind();

    tvCategories.CollapseAllNodes();

    }

    - Node 1
       - Node 2
            Node 3

    I wish to have cursor=Hand for the last child of main parent node i.e. in above example Node 3 Can this be done?

    regards,
    Parimal

  5. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 20 Nov 2008 Link to this post

    Hello Parimal,

    You can do this pretty easily. If you know exactly what node you want to assign the style to, simply navigate to that node during the RadTreeView.OnPreRender event and set its CssClass property. Here is an example which sets the first parent node's last child to the to have a cursor mouse icon. Of course, you can modify this to suit your own needs.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Telerik.Examples._Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
        <title>Example</title> 
        <style type="text/css"
            .RadNode_Last 
            { 
                cursor: hand; 
            } 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
         
            <telerik:RadTreeView ID="RadTreeView1" runat="server" 
                OnPreRender="RadTreeView1_PreRender"
                <Nodes>  
                    <telerik:RadTreeNode Text="Node 1">  
                        <Nodes>  
                            <telerik:RadTreeNode Text="Node 1.1"/>  
                            <telerik:RadTreeNode Text="Node 1.2"/>  
                        </Nodes>  
                    </telerik:RadTreeNode>  
                    <telerik:RadTreeNode Text="Node 2">  
                        <Nodes>  
                            <telerik:RadTreeNode Text="Node 2.1"/>  
                            <telerik:RadTreeNode Text="Node 2.2"/>  
                        </Nodes>  
                    </telerik:RadTreeNode> 
                    <telerik:RadTreeNode Text="Node 3">  
                        <Nodes>  
                            <telerik:RadTreeNode Text="Node 3.1"/>  
                            <telerik:RadTreeNode Text="Node 3.2"/>  
                        </Nodes>  
                    </telerik:RadTreeNode>   
                </Nodes>  
            </telerik:RadTreeView> 
        </form> 
    </body> 
    </html> 
     

    using System; 
    using System.Web.UI; 
     
    namespace Telerik.Examples 
        public partial class _Default : Page 
        { 
            protected void RadTreeView1_PreRender(object sender, EventArgs e) 
            { 
                if (RadTreeView1.Nodes.Count > 0) 
                {                
                    var parentNode = RadTreeView1.Nodes[0]; 
                    if (parentNode.Nodes.Count > 0) 
                    { 
                        var lastIndex = parentNode.Nodes.Count - 1; 
                        var lastNode = parentNode.Nodes[lastIndex]; 
                        lastNode.CssClass = "RadNode_Last"
                    } 
                } 
            } 
        } 
     



    Also, in the future I recommend starting a new thread when you have a new question (rather than putting your question at the end of a related thread). Usually new threads get attention quicker than old ones with a new response, so it might you receive an answer quicker.

    I hope my answer helped you. Let me know if you have any further questions.

    Regards,
    Kevin Babcock
  6. parimal
    parimal avatar
    138 posts
    Member since:
    Feb 2007

    Posted 20 Nov 2008 Link to this post

    HI,

    Thanks for the inputs.

    My requirement is that i need cursor=hand for last node of each main node.

    Node 1
        Node 12
            Node 13
            Node 14
    Node 2
        Node 21
            Node 23
            Node 24

    I wish to have hand curson on Node 13, Node 14 and Node 23, Node 24. Your code gives hand option on Node 14 only. I wish to have hand option on both.

    regards,

    Parimal
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017