How to place clickable image next to node text & on click of it capture some value from user.
Hi there,
You can find a very good example of how to do what you're trying to achieve here: igTree node templates
Thank you for using the Infragistics forums!
Hello,
These are depending on the css styles applied. You could inspect the existing css applied and modify it in a way to better suit your needs.
You could find the default styling/css classes used at: https://www.igniteui.com/help/api/2014.2/ui.igtree
In this case in particular, you could refer to the following:
ui-state-hover - Class defining the hover state style of the node.
ui-state-active - Class defining the selected state style of the node.
Hi Ivaylo ,
Thanks for Response. I was able to add image & make it clickable .
but when user hovers on the node , whole node is getting highlighted(Text & image after text) , which confuses end user whether they clicked on note text or node image. is there way to take off hover & selection option for node text & maintain both for image after the text.
Hello and welcome to the community!
If you want to use the existing inbuilt functionality, you could reference the existing online sample and documentation regarding how to add custom images to the igTree nodes prior to the text of each node. https://www.igniteui.com/help/igtree-configure-node-images
What is more, if you require to add the images at the end of each node’s text, you could use templating for this.Samples and online documentation how to achieve this could be found at:Setting up Node Template in the jQuery igTree – notice a downloadable code sample is included.API reference for the related option in use - nodeContentTemplate Additional blog article describing “How to use templates to style the different nodes of the Ignite UI Tree control” could be found here
In general, binding click event handler could be done using something similar to following:$('img').bind('click', function (evt) { alert(evt.target); }); http://api.jquery.com/click/ http://api.jquery.com/bind/
Or just use the existing igTree API and handle nodeClick event, to achieve similar functionality when clicking the node, instead the actual image at the end of the node.