Hide node icon conditional based

Nov 1, 2012 at 6:58 AM


In Tree I have added icon against each node which i want to display on condition.

Please let me know how to accomplish this scenario.





Nov 1, 2012 at 12:23 PM

You can supply node templates so it is enough to add your icon to the node template. To make it appear disappear according to conditions maybe done in different ways.  you can use show/hide of jquery but they make the element completely disappear so also the space of the icon disappear causing the whole content of the node do change position. This can effect can be avoided by puttin th icon into another div with a fixed width. Anyway I prefer add/removing a Css class from a div of a fixed width. The class to be added contains the icon as background-Image.


In order to decide when to show or not the image...this depends on the data you have to process to evaluate the condition. If the condotion can be evaluated on the server side...it is easy you put an if in the node template that add or remove the above class. If the condition must be evaluated on the client side because it may depend on the user input you have to intercepts the tree events of node creation. Whenever a node is created your handler will be passed the created Itme so you can process it with jQuery. Obviously if the the Icon depends also on the user input you have to place also a "change" handler in the Html node containing the tree that due to events bubbling will intercept all change event in the three. Then you add a css class in the root of the template of each node, so in the change event you can get the root of the template that contains the triggering input fields, you can do: $(evt.target).closest(".myClass") to get the root of the template.