I need to style each node of the tree differently based on the data it is bound to. Ultimately, it's really just changing the color of the text so I am not changing much. I am binding it to a datatable and one of the columns could be the "CSS name" , "color" , or like. Can this be done automatically during binding or is this something I have to iterate through the nodes to do?
Hello bobkrug,
you could handle WebDataTree1_NodeBound and then check for some condition and apply css for the particular node:
protected void WebDataTree1_NodeBound(object sender, DataTreeNodeEventArgs e)
{
//Check if the value of the node is equal to 10
if (e.Node.Value == "10")
e.Node.CssClass = "active";
}
}Check this post http://forums.infragistics.com/forums/p/39982/225719.aspx# ,the issue is the same as yoursPlease let me know if you need additional assistance
Is there a way to set the color without using the CSS? It appears by setting the CSS it overrides the CSS set in the styleset I have defined. Ideally I would like to change the color attribute of the CSS that is defined for the node.
Thanks
Hello Bob,Please let me know if you need further assistance with this issue.
Hello Bob,
Lets assume your class which you apply for all nodes has similar code.persistent
background-color: Black;
color: Yellow;
and both(or how many you need) classes you want to apply for every node according to its value are the following two(or more)
.importantBlue
color: Blue !important;
.importantRed
color: Red !important;
Note the “!important” after color rule. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document so it handles the overriding issue. Now when you handle the NodeBound event you can set two CSS classes as shown in the example below:
if (string.IsNullOrEmpty(e.Node.Value))
return;
int len = e.Node.Value.Length-1;
if (((int)(e.Node.Value[len])) % 2 == 0)
e.Node.CssClass = string.Format("persistent {0}", "importantBlue");
else
e.Node.CssClass = string.Format("persistent {0}", "importantRed");
I tried the exact thing you have and it worked fine. However, when I try to set the color of the text it doesn't work. I do see it in the html so it is getting there.
Here's what I have in webDataTree_NodeBound:
e.Node.Attributes.CssStyle.Add(HtmlTextWriterStyle.Color, "Red") e.Node.Attributes.CssStyle.Add(HtmlTextWriterStyle.BackgroundColor, "LightGray") e.Node.Attributes.CssStyle.Add(HtmlTextWriterStyle.FontWeight, "Bold")here's the html snippet:<li id="x:1713330791.1:adr:0" class="igdt_GraniteNodeHolder" style="color:Red;background-color:LightGray;font-weight:Bold;"><img src="ig_res/Granite/images/igdt_FirstPlus.gif" alt="Expand 100()" class="3" /><a class="igdt_GraniteNode igdt_GraniteNodeRoot igdt_GraniteNodeParent" href="#" onclick="{return false;}" tabindex="-1" id="x:1713330791.2:mkr:dtnContent">100()</a></li>Any ideas why it's not applying the color attribute?
it really overrides the CSS but only for the current node. It will not affect other nodes or controls. Other option is to add css attributes:
e.Node.Attributes.CssStyle.Add(HtmlTextWriterStyle.FontWeight, "Bold");
Please let me know if this is working for you.Thank you