I am binding to a igTree using JSON binding. I would like to set different colors on individual nodes. For example, the first node is red, the second is blue, the third is green etc. The color is used to indicate a status for the data the node represents. Can someone give me an idea of how to do this, or if it can be done?
Hello Bill,
Yes, such functionality is possible. One way of achieving it is by adding the custom logic in the "rednered" event. For any particular case the logic will be different, but basically you just need to find each node by a certain selector and paint it's "background" property with the value you desire. You can refer to the attached sample to understand how exactly that should be done. You just need to specify the "js" and "css" paths to the source files.
If you have any additional questions, please don't hesitate to ask.
Thanks,
Martin Stoev
Hello again Bill,
I'm checking to see if you need some further assistance on this matter. If there are some questions I might answer, please feel free to ask.
Thanks for the reply. Unfortunately, the rendered event does not work in my situation. The Color is a property of the data that I am binding to the tree. Here is what I tried:
rendered: function (evt, ui) {
$("li > a").css("background", ui.node.data.Color);
}
In this event (unlike the nodeClick event) the ui variable does not have a node property, so I don't have access to the data for the individual node. Perhaps I need to loop through all of the nodes in the tree and set the color that way?
I resolved the issue by looping through the nodes and setting the color. Thanks for your help.
I'm just checking did you manage to resolve that? If you have any additional questions I'll be happy to help.
Yes - there is no "node" property in the "ui" variable, since the "rendered" event if fired just once when the tree is rendered. What you should do is what you proposed - loop through all the nodes and match them with some criteria to the "Color" property of you data. However there is another solution if you are using the "loadOnDemand" setting. If that's true for you, you can use the "nodePopulated" event for coloring the nodes. From that event you can use the "ui.data" object to match to your "Color" property.
You can always refer to the API reference, if you need more information about the options, events and their arguments.
Hope this helps,