Root Node styling

8 posts, 0 answers
  1. Mike
    Mike avatar
    14 posts
    Member since:
    Nov 2005

    Posted 04 Aug 2011 Link to this post

    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?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2011 Link to this post

    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.
  3. Mike
    Mike avatar
    14 posts
    Member since:
    Nov 2005

    Posted 05 Aug 2011 Link to this post

    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.


  4. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 09 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  5. Mike
    Mike avatar
    14 posts
    Member since:
    Nov 2005

    Posted 09 Aug 2011 Link to this post

    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.
  6. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 12 Aug 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Mike
    Mike avatar
    14 posts
    Member since:
    Nov 2005

    Posted 17 Aug 2011 Link to this post

    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.
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    651 posts

    Posted 23 Aug 2011 Link to this post

    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

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top