I have built (loaded data into) a WebDataTree suing JavaScript but I cannot find a way of formatting the Nodes using CSS. I have tried the following:
Overwriting the node properties immediately after a node is created:
function setTreeClasses(tree, CssClassName) {tree._ActiveCssClass = CssClassName;tree._DisabledCssClass = CssClassName;tree._GroupCssClass = CssClassName;tree._HoverCssClass = CssClassName;tree._nodeCssClass = CssClassName;tree._ParentCssClass = CssClassName;tree._RootCssClass = CssClassName;tree._SelectedCssClass = CssClassName;tree._nodeActiveCssClass = CssClassName;tree._nodeDisabledCssClass = CssClassName;tree._nodeGroupCssClass = CssClassName;tree._nodeHoverCssClass = CssClassName;tree._nodeParentCssClass = CssClassName;tree._nodeRootCssClass = CssClassName;tree._nodeSelectedCssClass = CssClassName;tree._controlActiveCssClass = CssClassName;tree.controlStylePrefix = "";}
I have also intercepted the node Added and Adding events and tried to explicitly set CssClass there.
The problem seems to be that there are no (documented) properties or methods for setting the node CssClass, only methods for setting the hover and selected node styles.
Any help gratefully received.
Paul Shearing
VS 2010IG 10.3 WebDataTreeCLR 4.0
Hi Paul,
to my understanding you are trying to replace the styling of the current theme. All you have to do is to open the webdatatree.css in the ig_res folder and edit the CSS classes inside with your custom styling.
You can also create a new theme by adding new folder like MyTheme to ig_res and copy the webdatatree.css file and edit it as you like. Then you can specify the theme name by applying it in the stylesetname property. You can edit the specific theme css using the AppStylist application.
Hope this helps.
Thanks,
Lubomir
Thank you Lubomir.
Your understanding is correct in that I need to override the default theme but I need to have control over the styling of individual nodes. Changing the theme will change the style for all nodes. I need to be able to do the following for individual nodes, using BLOCKED SCRIPT
This is because the status of nodes changes based on previous selections, the level in the hierarchy, whether nodes relate to existing or absent items in the database etc.
Surely there must be a way of overriding the style for a specific node in JavaScript?
If not by normal means, is there a way of getting to the inner html so that i can write explicit HTML codes? I don't like doing this but if the control doesn't give me sufficient Methods or Properties I am prepared to program this the hard way.
Kind regards
Paul
Thanks Lobomir,
I shall be programming this later in the week and I'll let you know how I get on.
It seems pretty obvious to me that there will be many situations where a developer needs to change the appearance of one or more nodes so it would be very useful to have the ability to style individual nodes using CSS via javascript. Perhaps worth considering in a future release?
if you want to configure on a per node basis you have to modify the node style. This can be done on the client side by calling node.get_element().style.backgroundColor = "blue"; The get_element() will return the DOM element of the node in this case LI element. You could then apply whatever styling you want to that node. You could also access the anchor of the node by calling node.get_styleElement().
Lubo