Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Treeview > Override the default css for few nodes
RadControls for ASP.NET are no longer supported (see this page for reference). In case you have inquiries about the Telerik ASP.NET AJAX controls, post them in the pertinent ASP.NET AJAX forums.

Not answered Override the default css for few nodes

Feed from this thread
  • Goutham avatar

    Posted on Mar 23, 2011 (permalink)

    Hi,

    Is it possible to override the default css for few nodes. Like say i have few nodes which is enabled property is set false and i want css of these nodes to be different (not use disabled state css), i want these nodes to use different css and at the same time i dont want effect the default behaviour of the tree node . i.e any node is in disabled state -its css should be in default disabled css.

    I am looking for soimething like where i can explicitly set a css for few nodes, which should override the default css.
    Any help is appreciated

    Thank You,
    Goutham

  • Posted on Mar 23, 2011 (permalink)

    Hello Gautham,

    Try adding following CSS in order to show disabled node desired in color.

    CSS:
    <style type="text/css">
    .RadTreeView_Default .rtDisabled .rtIn
    {
        color: Red!important;
    }
    </style>

    Thanks,
    Shinu.

  • Goutham avatar

    Posted on Mar 23, 2011 (permalink)

    Hello Shinu,

    Thanks for the reply, I should have mentioned this earlier. I am using the RadTreeview 6.3.8 version,and my Css is

    .TreeNode
    {
        font-family: Tahoma;
        font-size: 8pt;
        color: black;  
        padding-left: 3px;
        text-align: left;
    }
     
    .TreeNodeOver
    {
        font-family: Tahoma;
        font-size: 8pt;
        color: black;  
        text-decoration: underline;
        cursor: pointer;
        cursor: hand;
        padding-left: 3px
        text-align: left;
    }
     
    .TreeNodeSelect
    {
        font-family: Tahoma;
        font-size: 8pt;
        color: white;
        background: #316AC5;   
        cursor: pointer;
        cursor: hand;
        margin-left: 3px;  
        text-align: left;
    }
     
    .TreeContextItem
    {
        font-family: Arial;
        font-size:10px;
        cursor: pointer;
        cursor: hand;
        padding-left:4px;
        height:24px;
        background-color:#F6F6F6;
        background-image:url(itemsBg.gif);
        background-repeat:repeat-y;
        width:100%;
        text-align: left;
    }
     
    .TreeContextItemOver
    {
        font-family: Arial;
        font-size:10px;
        cursor: pointer;
        cursor: hand;
        padding-left:4px;
        height:24px;   
        background-color: #FFEEC2
        width:100%;
        text-align: left;
    }
     
    .TreeNodeEdit
    {
      border:1px gray solid;
      font-family: tahoma;
      font-size: 8pt;
      margin-left: 3px
      text-align: left;
    }
     
    .AssociatedObjects
    {
        font-family: Tahoma;
        font-size: 8pt;    
        color: #ffffff;
        cursor: pointer;
        cursor: hand;  
        border-color:#239500 #1C7600 #155800;
        background-color:#63AC39;
        background-image:url("green.png");
        border-style:solid;
        border-width:1px;
        padding:3px 2px 2px;
    }
    .ChildObjects
    {
        font-family: Tahoma;
        font-size: 8pt;    
        color: #ffffff;    
        cursor: pointer;
        cursor: hand;      
        border-style:solid;
        border-width:1px;
        padding:3px 2px 2px;
        background-color:#E48544;
        border-color:#904C23 #904C23 #904C23;
        background-image:url("orange.png");
    }
    .Newbject
    {
        font-family: Tahoma;
        color: #ffffff;    
        cursor: pointer;
        cursor: hand;      
        border-style:solid;
        border-width:1px;
        padding:3px 2px 2px;
        background-color:#E48544;
        border-color:#904C23;
        background-image:url("Blue.png");
    }
    Is there any way i can override in this css

  • Helen Helen admin's avatar

    Posted on Mar 24, 2011 (permalink)

    Hello Goutham,

    The following css will change the disabled state of node with id=RadTreeView1_t2:

    <style type="text/css">
            #RadTreeView1_t2 .TreeNodeDisabled
            {
                color: red !important;
            }
         
    </style>


    Regards,
    Helen
    the Telerik team

  • Goutham avatar

    Posted on Mar 24, 2011 (permalink)

    Hi admin,

    Thank you for the reply,
    I have done the change as you have suggested, but it is not reflecting, Am i missing something. I have put the css in my page inside the style tag as well as inside the treeview style sheet. Here is my code - how i am loading the treeview. As you can see in this code . I am making node.Enabled as false inside the while loop. i want to assign a different style for this node.
    private void LoadPackageObjectsTreeView(IDictionaryEnumerator packageObjects)
          {
              packagableObjectsTreeView.Nodes.Clear();
              CommonLib.PackageObjectBasics packageObjectBasics;
              Dictionary<string, string> treeviewIndex, subNodeIndex;
              RadTreeNode node = null;
              try
              {
                  //To check object is already added to the nodes collection
                  treeviewIndex = new Dictionary<string, string>();
                  subNodeIndex = new Dictionary<string, string>();
                  string displaytext = "";
                  CommonLib.AddSkeltaConfigurationsAndExceptionsNodes(treeviewIndex, packagableObjectsTreeView, true);
                  AddExceptionsNode(treeviewIndex);
     
                  //looping through dictionary.enumerator
                  while (packageObjects.MoveNext())
                  {
                      packageObjectBasics = CommonLib.GetObjectBasicsFromKey(packageObjects.Key.ToString());
                      if (!_PackagablesTypes.ContainsKey(packageObjectBasics.Type))
                          _PackagablesTypes.Add(packageObjectBasics.Type, packageObjectBasics.Type);
                      displaytext = _PackagablesTypes[packageObjectBasics.Type];
                      //checking if node is already added to tree
                      if (!treeviewIndex.ContainsKey(displaytext))
                      {
                          treeviewIndex.Add(packageObjectBasics.Type, displaytext);
                          //Adding for the first time Ex - root node -type-  Workflow
                          node = new RadTreeNode(CommonLib.LocalizeTreeNode(displaytext), displaytext);
                          node.ImageUrl = CommonLib.GetImagePath(displaytext, packageObjectBasics.Name);
                          node.Enabled = false;
                          //node.CssClass = "TreeNode";
                          packagableObjectsTreeView.Nodes.Add(node);
                          //Maintain this collection to check in clientside this node should be non clickable
                          if (!_RootNodes.Contains(CommonLib.LocalizeTreeNode(displaytext)))
                              _RootNodes.Add(CommonLib.LocalizeTreeNode(displaytext));
                          //Adding Child nodes Ex - IBM Workflow version 1
                          if (packageObjectBasics.Version != string.Empty)
                          {
                              //For Versioned List- display treenode text as name_version
                              node = new RadTreeNode(packageObjectBasics.Name + '_' + packageObjectBasics.Version, packageObjectBasics.Name + '_' + packageObjectBasics.Version);
                              if (packageObjectBasics.IsFolder)
                                  node.ImageUrl = CommonLib.GetImagePath("folder", packageObjectBasics.Name);
                              node.ToolTip = CommonLib.GetTooltip(packageObjectBasics);
                              ChangeNodeCSS(node, packageObjectBasics);
                              CommonLib.FindNodeAndAdd(packagableObjectsTreeView, displaytext, node);
                          }
                          else
                          {
                              if (packageObjectBasics.Type.ToUpperInvariant() == _EventAssociations || packageObjectBasics.Type.ToUpperInvariant() == _BAMWorkflow)
                                  AddEventAssociationsAndBAMWorkflowAttributesNodes(packagableObjectsTreeView, packageObjects, packageObjectBasics, subNodeIndex, displaytext, true, string.Empty);
                              else if (packageObjectBasics.Type.ToUpperInvariant() == _GlobalWorkItemLayout)
                                  AddGlobalWorkItemLayoutAttributesToNode(packagableObjectsTreeView, packageObjects, packageObjectBasics, displaytext, true, string.Empty);
                              else if (packageObjectBasics.Type.ToUpperInvariant() == _Calendar)
                                  CheckAddResourceCalendarAttributesToNode(packagableObjectsTreeView, packageObjects, packageObjectBasics, displaytext, true, string.Empty);
                              else
                              {
                                  node = new RadTreeNode(packageObjectBasics.Name, packageObjectBasics.Name);
                                  if (packageObjectBasics.IsFolder)
                                      node.ImageUrl = CommonLib.GetImagePath("folder", packageObjectBasics.Name);
                                  node.ToolTip = CommonLib.GetTooltip(packageObjectBasics);
                                  ChangeNodeCSS(node, packageObjectBasics);
                                  CommonLib.FindNodeAndAdd(packagableObjectsTreeView, displaytext, node);
                              }
                          }
                      }
                      else
                      {
                          //Adding sub nodes Ex - IBM Workflow version 1
                          if (packageObjectBasics.Version != string.Empty)
                          {
                              node = new RadTreeNode(packageObjectBasics.Name + '_' + packageObjectBasics.Version, packageObjectBasics.Name + '_' + packageObjectBasics.Version);
                              if (packageObjectBasics.IsFolder)
                                  node.ImageUrl = CommonLib.GetImagePath("folder", packageObjectBasics.Name);
                              node.ToolTip = packageObjectBasics.Type + ": " + packageObjectBasics.Name;
                              ChangeNodeCSS(node, packageObjectBasics);
                              CommonLib.FindNodeAndAdd(packagableObjectsTreeView, displaytext, node);
                          }
                          else
                          {
                              if (packageObjectBasics.Type.ToUpperInvariant() == _EventAssociations || packageObjectBasics.Type.ToUpperInvariant() == _BAMWorkflow)
                                  AddEventAssociationsAndBAMWorkflowAttributesNodes(packagableObjectsTreeView, packageObjects, packageObjectBasics, subNodeIndex, displaytext, true, string.Empty);
                              else if (packageObjectBasics.Type.ToUpperInvariant() == _GlobalWorkItemLayout)
                                  AddGlobalWorkItemLayoutAttributesToNode(packagableObjectsTreeView, packageObjects, packageObjectBasics, displaytext, true, string.Empty);
                              else if (packageObjectBasics.Type.ToUpperInvariant() == _Calendar)
                                  CheckAddResourceCalendarAttributesToNode(packagableObjectsTreeView, packageObjects, packageObjectBasics, displaytext, true, string.Empty);
                              else
                              {
                                  node = new RadTreeNode(packageObjectBasics.Name, packageObjectBasics.Name);
                                  node.ToolTip = CommonLib.GetTooltip(packageObjectBasics);
                                  if (packageObjectBasics.IsFolder)
                                      node.ImageUrl = CommonLib.GetImagePath("folder", packageObjectBasics.Name);
                                  ChangeNodeCSS(node, packageObjectBasics);
                                  CommonLib.FindNodeAndAdd(packagableObjectsTreeView, displaytext, node);
                              }
                          }
                      }
                  }
                  packagableObjectsTreeView.ExpandAllNodes();
                  ContextMenuForPackagingObjectsTreeView(packagableObjectsTreeView);
                  //changeTheDisabledNodeCss(packagableObjectsTreeView);
              }
              catch (Exception ex)
              {
                  throw new Exception(ex.Message);
              }
          }

  • Helen Helen admin's avatar

    Posted on Mar 28, 2011 (permalink)

    Hi Goutham,

    To our regret custom CSS classes are not applied for disabled nodes. I suggest you change only the disabled state for all nodes:

    <style type="text/css">
             .TreeNodeDisabled
            {
                color: red !important;
            }
    </style>

    Regards,
    Helen
    the Telerik team

  • Goutham avatar

    Posted on Mar 28, 2011 (permalink)

    Hi admin,

    I have simple question. How do I cancel the Click event from the client side for Treeview node click. I dont have the OnClientNodeClick event in my version of Rad Treeview. AfterClientClick is available. i am looking for the client side api which cancels the click event.
    As I googled it many times still not able find it. Any help is appreciated.
    Thank You.

  • Posted on Mar 28, 2011 (permalink)

    Hello Gautham,

    OnClientNodeClick is available for RadTreeView for ASP.NET AJAX and BeforeClientClick is the same event for for RadTreeView for ASP.NET.
    BeforeClientClick is fired prior to node clicking. You can cancel the event by simply return false from the event.

    Check out the following documentation for more on this.
    Client-Side JavaScript Events

    Thanks,
    Shinu

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET > Treeview > Override the default css for few nodes