Hi there,
We are facing difficulty to add an action button on tree items. Our functionality demands an action button on the right side, on every node of the tree, on click of the same, two or three actions are there like edit/delete or add subnode, etc.
Anyone Help is really approeciated
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/
.
