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

Tree View styling

4 Answers 128 Views

TreeView

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

4 Answers, 1 is accepted

Accepted

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

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Tree View styling

4 Answers, 1 is accepted