stcyuvoronin/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Tree</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gijgo@1.9.10/css/gijgo.min.css" crossorigin="anonymous" />
</head>
<body>
    <div class="container-fluid">
        <div class="py-3">
            <button id="tree-expand" class="btn btn-primary">Expand</button>
            <button id="tree-collapse" class="btn btn-secondary">Collapse</button>
        </div>
        <div id="tree"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.10/js/gijgo.min.js"></script>

    <script type="text/javascript">
        (function() {
            'use strict';

            var $tree = $('#tree');
            var $treeExpandBtn = $('#tree-expand');
            var $treeCollapseBtn = $('#tree-collapse');

            $(function () {
                $tree.tree({
                    uiLibrary: 'bootstrap4',
                    dataSource: '/api/Tree',
                    primaryKey: 'name',
                    childrenField: 'nodes',
                    textField: 'name'
                });

                $treeExpandBtn.on('click', function() { $tree.expandAll(); });
                $treeCollapseBtn.on('click', function() { $tree.collapseAll(); });
            });
        })();
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Tree</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" crossorigin="anonymous" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gijgo@1.9.10/css/gijgo.min.css" crossorigin="anonymous" />
	</head>
	<body>
	<div class="container-fluid">
	<div class="py-3">
	<button id="tree-expand" class="btn btn-primary">Expand</button>
	<button id="tree-collapse" class="btn btn-secondary">Collapse</button>
	</div>
	<div id="tree"></div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.10/js/gijgo.min.js"></script>

	<script type="text/javascript">
	(function() {
	'use strict';

	var $tree = $('#tree');
	var $treeExpandBtn = $('#tree-expand');
	var $treeCollapseBtn = $('#tree-collapse');

	$(function () {
	$tree.tree({
	uiLibrary: 'bootstrap4',
	dataSource: '/api/Tree',
	primaryKey: 'name',
	childrenField: 'nodes',
	textField: 'name'
	});

	$treeExpandBtn.on('click', function() { $tree.expandAll(); });
	$treeCollapseBtn.on('click', function() { $tree.collapseAll(); });
	});
	})();
	</script>
	</body>
	</html>