Hi Mike,
For your case I have made a code snippet to showcase how this can be achieved.
In you HTML file:
<smart-tree id=”tree”>
<smart-tree-items-group>
<i class=”material-icons”></i> Attractions
<smart-tree-item>Movies <button id=”menuItemButton” >Click Me</button> </smart-tree-item>
<smart-tree-item>Circus <button id=”anotherMenuItemButton”>Click Me</button> </smart-tree-item>
<smart-tree-item>Concerts</jqx-tree-item>
<smart-tree-item>Monuments</jqx-tree-item>
</smart-tree-items-group>
</smart-tree>
In your CSS file(this is for positioning the button to the right side) :
.smart-tree .smart-tree-item-label-element > span{
width: 100%;
height: 100%;
}
.smart-tree .smart-tree-item-label-element span button{
position: absolute;
right: 0;
}
And in your JavaScript file:
var button = document.getElementById(‘menuItemButton’)
var button2 = document.getElementById(‘anotherMenuItemButton’)
button.onclick= function(){
console.log(‘Button clicked’)
alert(‘The button in the menu tree was clicked’)
}
button2.onclick= function(){
console.log(‘Button clicked’)
alert(‘The button in the menu tree was clicked’)
}
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/