HTML Elements Forums Navigation Menu & Tree Tree With Actions Button

Tagged: 

This topic contains 1 reply, has 2 voices, and was last updated by Avatar Yavor Dashev 1 week, 1 day ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #101320
    Avatar
    Mike
    Participant

    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

    #101322
    Avatar
    Yavor Dashev
    Participant

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.