I have a tree that is 7-8 levels deep. I decided that node levels 0,1,2,3 need to have thier expand/collapse ability disabled and I did it like this:
What I want to know, what property on RadTreeNode lets me change the cursor style? I was thinking it was RadTreeNode.Attributes["cursor"] = "pointer"; but this doesnt seem to work.
J
foreach (RadTreeNode node in radtree.GetAllNodes()) |
{ |
int intTest = node.Level; |
node.Expanded = true; |
if(intTest <= 3) |
{ |
node.Enabled = false; |
node.ForeColor = System.Drawing.Color.Black; |
} |
} |
What I want to know, what property on RadTreeNode lets me change the cursor style? I was thinking it was RadTreeNode.Attributes["cursor"] = "pointer"; but this doesnt seem to work.
J
6 Answers, 1 is accepted
0
Hello J,
You can use this :
node.Style["cursor"] = "pointer";
where "node" is a RadTreeNode object.
Regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You can use this :
node.Style["cursor"] = "pointer";
where "node" is a RadTreeNode object.
Regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
J
Top achievements
Rank 1
answered on 30 Jun 2009, 02:14 PM
Hey Albert, thanks for the quick reply. I tried your suggestion of RadTreeNode.Style["cursor"] and it worked great! But, it doesnt apply the style to the node's button, only the text for that node. It might be to complicated but is there a way to change the cursor style when the OnMouseOver of the expand/collapse image button for like levels x->y, but not levels n->m?
0
Hello J,
You can use the ContentCssClass property in order to achieve this. You should set that property for all nodes of interest. Here is a quick example:
<style type="text/css">
.RadTreeView .MyClass .rtPlus,
.RadTreeView .MyClass .rtMinus,
{
cursor: pointer;
}
</style>
<telerik:RadTreeView runat="server" ID="RadTreeView1">
<Nodes>
<telerik:RadTreeNode Text="Node1" Expanded="true" ContentCssClass="MyClass">
I hope this helps,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You can use the ContentCssClass property in order to achieve this. You should set that property for all nodes of interest. Here is a quick example:
<style type="text/css">
.RadTreeView .MyClass .rtPlus,
.RadTreeView .MyClass .rtMinus,
{
cursor: pointer;
}
</style>
<telerik:RadTreeView runat="server" ID="RadTreeView1">
<Nodes>
<telerik:RadTreeNode Text="Node1" Expanded="true" ContentCssClass="MyClass">
I hope this helps,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
J
Top achievements
Rank 1
answered on 30 Jun 2009, 04:44 PM
Hey Albert I still cant seem to get it to work. In my designer page my intellisense doesnt seem to show a property on Telerik:RadTreeNode for ContentCssClass. The only properties that I see are CssClass, DisabledCssClass, HoveredCssClass, and SelectedCssClass. I think if I'm reading it correctly my Telerik.Web.UI is version 2008.2.723.20, maybe ContentCssClass doesnt exist for this version?
Also the CssClass MyClass, should it have a ',' after .rtMinus in your example? I put the CssClass 'MyClass' in my TreeView.SkinName.css file, is this correct?
I do all my DataBinding via a DataTable on a control that looks like this on my designer page:
J
Also the CssClass MyClass, should it have a ',' after .rtMinus in your example? I put the CssClass 'MyClass' in my TreeView.SkinName.css file, is this correct?
I do all my DataBinding via a DataTable on a control that looks like this on my designer page:
<telerik:RadTreeView |
ID="radtree" runat="server" |
OnDataBound="radtree_DataBound" OnDataBinding="radtree_DataBinding" |
OnNodeExpand="radtree_NodeExpand" |
EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" |
Skin="SkinName" |
> |
<CollapseAnimation Duration="100" Type="OutQuint" /> |
<ExpandAnimation Duration="100" /> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Root RadTreeNode1" CssClass="MyClass"> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" CssClass="MyClass"> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" CssClass="MyClass"> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1" CssClass="MyClass"> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1"> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1"> |
<Nodes> |
<telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1"> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeNode> |
</Nodes> |
</telerik:RadTreeView> |
J
0
Accepted
Hello J,
You need the ContentCssClass property which was implemented later than the version you are using. I suggest upgrading to the current official release. The suggested workaround will not work with the CssClass property as it is applied at the inner html element and the expand arrows cannot be selected via CSS using that custom css class. Anyway you can customize the cursor per level basis:
/*first level*/
.RadTreeView .rtLI .rtPlus,
.RadTreeView .rtLI .rtMunus
{
cursor: pointer;
}
/*second level and below*/
.RadTreeView .rtLI .rtLI .rtPlus,
.RadTreeView .rtLI .rtLI .rtMunus
{
cursor: default;
}
Indeed there should be no comma after .rtMinus. I've made a copy-paste mistake.
Regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
You need the ContentCssClass property which was implemented later than the version you are using. I suggest upgrading to the current official release. The suggested workaround will not work with the CssClass property as it is applied at the inner html element and the expand arrows cannot be selected via CSS using that custom css class. Anyway you can customize the cursor per level basis:
/*first level*/
.RadTreeView .rtLI .rtPlus,
.RadTreeView .rtLI .rtMunus
{
cursor: pointer;
}
/*second level and below*/
.RadTreeView .rtLI .rtLI .rtPlus,
.RadTreeView .rtLI .rtLI .rtMunus
{
cursor: default;
}
Indeed there should be no comma after .rtMinus. I've made a copy-paste mistake.
Regards,
Albert
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
J
Top achievements
Rank 1
answered on 01 Jul 2009, 12:39 PM
Thanks for the reply Albert it for the outdated version i have, the css code worked perfectly.
This might help someone else so here is how it was fixed:
I have a tree 7 levels deep. I wanted the nodes at level 1,2,3,4 to not collapse and have the mouse change to 'default' when hovered over them to indicate that they werent clickable.
To turn off the expand/collapse capability, I bound my TreeView to a DataTable in the Page_Load. Immediately after I iterated thru the nodes via the GetAllNodes method and set the Enabled property to false.
For the css code, I wanted the button image nodes at level 1,2,3,4 to have the cursor be default but have the button image nodes at level 5 and 6 to be the hand:
Maybe this will help someone else.
J
This might help someone else so here is how it was fixed:
I have a tree 7 levels deep. I wanted the nodes at level 1,2,3,4 to not collapse and have the mouse change to 'default' when hovered over them to indicate that they werent clickable.
To turn off the expand/collapse capability, I bound my TreeView to a DataTable in the Page_Load. Immediately after I iterated thru the nodes via the GetAllNodes method and set the Enabled property to false.
radtree.DataBind(); |
foreach (RadTreeNode node in radtree.GetAllNodes()) |
{ |
int intTest = node.Level; |
node.Expanded = true; |
if(intTest <= 3) |
{ |
node.Enabled = false; |
node.ForeColor = System.Drawing.Color.Black; |
} |
} |
For the css code, I wanted the button image nodes at level 1,2,3,4 to have the cursor be default but have the button image nodes at level 5 and 6 to be the hand:
<style type="text/css"> |
.RadTreeView .rtLI .rtPlus, |
.RadTreeView .rtLI .rtMinus, |
{ |
cursor: default; |
} |
.RadTreeView .rtLI .rtLI .rtLI .rtLI .rtLI .rtPlus, |
.RadTreeView .rtLI .rtLI .rtLI .rtLI .rtLI .rtMinus, |
{ |
cursor: hand; |
} |
.RadTreeView .rtLI .rtLI .rtLI .rtLI .rtLI .rtLI .rtPlus, |
.RadTreeView .rtLI .rtLI .rtLI .rtLI .rtLI .rtLI .rtMinus, |
{ |
cursor: hand; |
} |
</style> |
<div style="text-align:left;font-family:Arial;font-size:12pt"> |
<telerik:RadTreeView |
ID="radtree" runat="server" |
OnDataBound="radtree_DataBound" OnDataBinding="radtree_DataBinding" |
OnNodeExpand="radtree_NodeExpand" |
EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" |
Skin="SomeSkin" OnNodeClick="radtree_NodeClick" |
> |
<CollapseAnimation Duration="100" Type="OutQuint" /> |
<ExpandAnimation Duration="100" /> |
</telerik:RadTreeView> |
</div> |
Maybe this will help someone else.
J