Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Treeview > CSS class of TreeView

• Scott English

  Posted on Jan 16, 2006 (permalink)

  How do I set the CSS class of the TreeView?
  
  I want to specify a background color and a border for the entire TreeView (not just certain nodes). I want to do it using a .NET Theme--the theme .skin file will set the appropriate property on on the TreeView.  I can use a .skin file to set properties like NodeCssClass, but there isn't a CssClass property for the tree as a whole.

• INACTIVE_Rumen INACTIVE_Rumen

  Posted on Jan 17, 2006 (permalink)

  Hi Scott,
  
  You just need to locate the Style.css file in the Skin folder of the respective skin you are using (~/RadControls/TreeView/Skins/{SkinName}) and modify the respective Css style (for diffrent node states). For example if you want to remove the underlining of nodes for the over staqte, just locate TreeNodeOver style and remove text-decoration definition.
  
  ...
  .TreeNodeOver
  {
   font-family: Tahoma;
   font-size: 8pt;
   color: black;
   text-decoration: underline;
   cursor: pointer;
   cursor: hand;
   padding-left: 3px; 
  }
  ...
  
  More info in our "Skins" help topic online:
  http://www.telerik.com/help/radtreeview/5.1/Creating_Custom_Skins.html
  
  All the best,
  Elton
  the telerik team

  
  www.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

  
  
  
  Sincerely yours,
  Elton
  the telerik team

  
  www.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

• Surbhi Singhal

  Posted on Mar 9, 2006 (permalink)

  Hi,
  
  I have a treeview on my page and I want to change the Font Size and Color of Nodes (or Tree itself). I dont want to change in the Skins (in RadControls Folder) as on my deployment server RadControls are installed in GAC and also RadControls Folder will be shared by many applications. So I cant change it.
  Any solution ??
  
  Thanks
  Surbhi

• Nick Nick

  Posted on Mar 10, 2006 (permalink)

  
  Hi Surbhi,
  
  The only way to change the tree-nodes' appearance is by editing the css styles in the skin folder. Since you need to share the same skins between many applications, I suggest that you create your custom skin for the treeview that you need to edit. Please follow the link below to find more details about how to create custom skins:
  http://www.telerik.com/help/radtreeview/5.1.Net2/Creating_Custom_Skins.html 
  
  Hope this helps.
  
  Regards,
  Nick
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sharepointcontrols.com | www.sitefinity.com | www.mcmscontrols.com

• Jim Liu

  Posted on Mar 5, 2007 (permalink)

  I don't think the OP's question was really answered.  And now it's my question too.  Here it is stated a slightly different way:
  
  How do I set the background color of the entire treeview area using a skin's .CSS.  We have these style tags available to us:
      .TreeNode
      .TreeNodeOver
      .TreeNodeSelect
      .TreeNodeDisabled
  
  But all of these apply to the TreeNodes, not the container div of the tree itself.  Is there a way to get at that container div?
  Thanks.
  

• Chip

  Posted on Mar 6, 2007 (permalink)

  You can use the treeview ID to set the background color (or whatever else) of the div. For example (if RadTreeView1 is the ID):

  #RadTreeView1 div

  {

  ...

  }

  That's what I used for my page.

• Peter Peter

  Posted on Mar 6, 2007 (permalink)

  Hello Jim,
  
  Please try the following:
  
  

  <form id="form1" runat="server">

  <script>

  function BeforeHightlight(node)

  {

  var divEl = document.getElementById(node.ClientID);

  divEl.style.backgroundColor = "red";

  }

  function AfterHightlight(node)

  {

  var divEl = document.getElementById(node.ClientID);

  divEl.style.backgroundColor = "gray";

  }

  </script>

  <div>

  <radT:RadTreeView ID="RadTreeView1" style="background:gray" runat="server" Skin="Classic" Width="300px" BeforeClientHighlight="BeforeHightlight"

  AfterClientMouseOut="AfterHightlight">

  <Nodes>

  <radT:RadTreeNode runat="server" Text="New Item">

  <Nodes>

  <radT:RadTreeNode runat="server" Text="New Item">

  </radT:RadTreeNode>

  </Nodes>

  </radT:RadTreeNode>

  <radT:RadTreeNode runat="server" Text="New Item">

  <Nodes>

  <radT:RadTreeNode runat="server" Text="New Item">

  </radT:RadTreeNode>

  <radT:RadTreeNode runat="server" Text="New Item">

  </radT:RadTreeNode>

  <radT:RadTreeNode runat="server" Text="New Item">

  </radT:RadTreeNode>

  </Nodes>

  </radT:RadTreeNode>

  </Nodes>

  </radT:RadTreeView>

  </div>

  </form>

  
  
  All the best,
  Peter
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sitefinity.com

• Jim Liu

  Posted on Mar 6, 2007 (permalink)

  Ok.  That worked.  Thanks.
  Next question:
  
  Is there a way to link that to a CSS class instead of using an inline style?
  We tried replacing the style="..." attribute with a class="..." attribute in the treeview control declaration, but that didn't seem to work no matter where we placed the CSS class definition (either in the tree skin's CSS or in our own CSS).  Is there way to do this?
  Thanks.
  

• Nick Nick

  Posted on Mar 7, 2007 (permalink)

  Hi Jim,
  
  You should use the style property inline to make it work with the treeview.
  
  Regards,
  Nick
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sitefinity.com

• Stuart Hemming MVP

  Posted on Mar 7, 2007 (permalink)

  Why is that?
  
  --
  Stuart
  

• Jim Liu

  Posted on Mar 7, 2007 (permalink)

  Stuart,
  The inline style is only necessary for controlling the style of the container div that holds all the tree nodes.  In our case, we're using it to set the background color underneath the entire tree area.
  
  BTW, Telerik, I would suggest attaching a style tag to this div in the treeview and adding it to the .CSS in the tree skins in future versions.  The use of the inline style seems like more of a work-around than the way things should be done, wouldn't you agree?
  

• Mike Master

  Posted on Mar 7, 2007 (permalink)

  You may use CssClass / CssClassSelect per TreeNode
  
  <radt:radtreenode Text="Text1" CssClass="CustomCss" CssClassSelect="CustomSelectCss"></radt:radtreenode>

This css classes can be defined in the page and do not need to be in RadControls folder.
  
  There is online example here
  http://www.telerik.com/demos/aspnet/TreeView/Examples/Appearance/CustomNodeStyle/DefaultCS.aspx
  

• Stuart Hemming MVP

  Posted on Mar 8, 2007 (permalink)

  My question was aimed at Nick; I wondered why it had to be an inline style.
  
  --
  Stuart
  

• Dimitar Milushev Dimitar Milushev

  Posted on Mar 9, 2007 (permalink)

  Hi Stuart,
  
  The reason is that inline styles override most CSS style definitions and are recommended for simple styling.
  
  Sincerely yours,
  Dimitar Milushev
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sitefinity.com

• Stuart Hemming MVP

  Posted on Mar 9, 2007 (permalink)

  OIC,
  
  Thanks Dimitar.
  
  I understood from Jim Liu that putting it in a class didn't work but couldn't understand why.
  
  In truth even with your answer I'm not sure I understand how it works, but I think I know why it does now.
  
  
  --
  Stuart
  

• Kevin Carter

  Posted on Mar 24, 2007 (permalink)

  Can someone answer the original question of this thread?
  
  How do I set the CSS class of the TreeView?
  I want to specify a background color and a border for the entire TreeView (not just certain nodes). I want to do it using a .NET Theme--the theme .skin file will set the appropriate property on on the TreeView.  I can use a .skin file to set properties like NodeCssClass, but there isn't a CssClass property for the tree as a whole.
  
  I also want to set the Height and Width based on the CSS Class/Theme, NOT THE CONTROL.  Setting it on the control is not an option because theme 1 may need it to be 20x20 px and theme 2 200x100.

• Kevin Master

  Posted on Mar 24, 2007 (permalink)

  You can place Css style directly on the root <radt:radtreeview ... /> tag. For example:
  
  ...
  <radt:radtreeview
     runat="server"
     ID="RadTreeView1"
     style="border: 1px solid red;  ... "
  ...
  
  This works fine in my projects. Setting CssClass will not work (will not be applied on the root tag I believe).

• IUswimmer

  Posted on Jul 19, 2007 (permalink)

  RE: Chip
  FYI - I got this working for row style, but had to tweak it to:
  
  #<%= RadTreeView1.ClientID%> div
  {
  style here
  }

• IUswimmer

  Posted on Jul 19, 2007 (permalink)

  I'm in a bind on the tree view style.   Three issues:
  

  1. How can I set the style of the entire row (node div) for the selected node?  I can only seem to access the node itself, and not the 100% width of the treeview.
  2. How can I apply the link action and mouseover commands to change the style on the entire row and not just the node text?
  3. Also, what's the best way to expand all the parent nodes of a selecte node?  ...say the selected node is three levels deep.

  Thanks.  -Mike

• IUswimmer

  Posted on Jul 23, 2007 (permalink)

  I have opened I support ticket on this issue (above).

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Treeview > CSS class of TreeView