jQuery Tree

Bind to the added event by type: jqxTree. Author: http://jqwidgets.com

by redoak2000

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxTree'>

</div>
<div style='margin-top: 10px;'>
    <input type="button" id='Add' value="Add" />
</div>

JavaScript

$('#jqxTree').jqxTree({
    height: '300px',
    width: '300px',
    theme: 'energyblue'
    
});
$('#Add').jqxButton({
    height: '25px',
    width: '100px',
    theme: 'energyblue'
});
$('#Add').click(function () {
    var selectedItem = $('#jqxTree').jqxTree('selectedItem');
    if (selectedItem != null) {
        // adds an item with label: 'item' as a child of the selected item. The last parameter determines whether to refresh the Tree or not.
        // If you want to use the 'addTo' method in a loop, set the last parameter to false and call the 'render' method after the loop.
        $('#jqxTree').jqxTree('addTo', {
            label: 'Item'
        }, selectedItem.element);
    } else {
        $('#jqxTree').jqxTree('addTo', {
            label: 'Item'
        }, null);
    }

});
$('#jqxTree').on('added', function (event) {
    alert("You added new item");
});