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

Tree View styling

4 Answers 88 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Andrew Short
Top achievements
Rank 1
Andrew Short asked on 24 Jun 2008, 05:37 PM
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?

4 Answers, 1 is accepted

Sort by
0
Accepted
Kevin Babcock
Top achievements
Rank 1
answered on 24 Jun 2008, 08:56 PM
Hi Andrew,

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

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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>Untitled Page</title> 
    <style type="text/css"
        .RadNode 
        { 
            cursor: hand; 
        } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
                 
        <telerik:RadTreeView ID="RadTreeView1" runat="server"
            <Nodes> 
                <telerik:RadTreeNode Text="Node 1" CssClass="RadNode"
                    <Nodes> 
                        <telerik:RadTreeNode Text="Node 1.1" CssClass="RadNode"/> 
                        <telerik:RadTreeNode Text="Node 1.2" CssClass="RadNode"/> 
                    </Nodes> 
                </telerik:RadTreeNode> 
                <telerik:RadTreeNode Text="Node 2" CssClass="RadNode"
                    <Nodes> 
                        <telerik:RadTreeNode Text="Node 2.1" CssClass="RadNode"/> 
                        <telerik:RadTreeNode Text="Node 2.2" CssClass="RadNode"/> 
                    </Nodes> 
                </telerik:RadTreeNode> 
            </Nodes> 
        </telerik:RadTreeView> 
         
    </form> 
</body> 
</html> 
 

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
0
parimal
Top achievements
Rank 1
answered on 19 Nov 2008, 11:17 PM
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

0
Kevin Babcock
Top achievements
Rank 1
answered on 20 Nov 2008, 06:04 AM
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
0
parimal
Top achievements
Rank 1
answered on 20 Nov 2008, 07:40 AM
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
Tags
TreeView
Asked by
Andrew Short
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
parimal
Top achievements
Rank 1
Share this question
or