Root Node styling

[Mike]

In my tree I have a root node that all other nodes fall under.  I want this to act as a header and have different styles (background image, hover effect, etc..) than the rest of the tree. Is this possible and what classes would I use to achieve this?

[Shinu]

Hello Dan,

You can achieve this by setting CSS class for the RootNode as shown below.
aspx:

<telerik:RadTreeView  ID="RadTreeView1" runat="Server" >
  <Nodes>
     <telerik:RadTreeNode Text="Root" runat="server" CssClass="MyClass">
     <Nodes>
      . . . .
     </Nodes>
     </telerik:RadTreeNode>
  </Nodes>
</telerik:RadTreeView>

CSS:

<style type="text/css">
.MyClass
 {
   background-image:url("Images/Image1.PNG");
   color:Red !important;
 }
<style

Thanks,
Shinu.

[Mike]

I have tried what you suggested but it is still not working.  It almost works when I select the node but not before that.  My css class is applied to the root node and the css is as follows:

    <style type="text/css">
  .Root  {
   background-image: url("/images/leftMenuMainBg.jpg") !important;
   height:26px !important;
   Width:300px !important;
   
  }

  .RadTreeView_Default .rtSelected .rtIn 
  { 
      background-image: none !important; 
      color: #000000 !important; 
      border: none !important; 
      background-color: #A2EA8B   !important;
      padding: 3px 2px 2px 3px !important;
      height:26px;
     }
    
     .RadTreeView_Default .rtSelected .rtIn         { 
           background-image: none !important; 
           color: #000000 !important; 
           border: none !important; 
           background-color: transparent  !important;
           padding: 3px 2px 2px 3px !important;
           height:26px;
          
     }
    
  .RadTreeView_Default .rtHover .rtIn 
  { 
      padding: 3px 2px 2px 3px !important; 
      color: #000000 !important; 
      border: none !important; 
      background-color: #A2EA8B !important; 
      background-image: none !important;
  }
   
     div.RadTreeView_Default
  {
      background-color:#f5f5f5
  }

You can see my screenshots of when the node is selected and not selected.  You will also notice the hover affect on my root node which I do not want.

[Ivan Zhekov]

Hello Dan,

The problem was that the selector was not specific enough to override the embedded selectors.

Below I have attached a single page that demonstrates how styling should be achieved.


Kind regards, Ivan Zhekov
the Telerik team

[Mike]

Hi There,

I have implemented your example and that did not work either.  It looks like the width can't be set beyond the text.  Try your example and try to increase the width or put a background image longer than the text and it will not work.

[Ivan Zhekov]

Hi Dan Swayze,

Could you attach a screenshot of what you want to achieve, or post a link for it?

As I stated in my previous reply, that's the way styling should be achieved. It was a generic example, not a production ready example.

It will be helpful to see what you mean by "header" (as in the root item to be header) and width beyond of the text.

If you indeed want a header, why not use external element that toggles the tree view?

Greetings,
Ivan Zhekov
the Telerik team

[Mike]

I did attach a screenshot.  See above for file root-not-selected.jpg.

The background graphic does not go beyond the text of the header(root) node.

[Ivan Zhekov]

Hi Dan Swayze,

I have attached a new sample page that shows some of the styling you want to achieve. Have in mind that the area you want to highlight is used in our selectors and anything but background-color might break the design visually.

Regards,
Ivan Zhekov
the Telerik team