jstreegrid/tests/components/dynamic-root-node-test.html

grid plugin for jstree

		<script type="text/javascript">
		$(document).ready(function () {

		    // Will work fine with following added
		    //var data = [{id:"ded",text:"Works fine",type:"default"}];

		    // This will cause a bug when
		    var data = [{text:"abc"}],
		        types = {
		            "#": {
		                "max_children": 1,
		                "max_depth": 4,
		                "valid_children": ["root"]
		            },
		            "root": {
		                "icon": "/static/3.0.2/assets/images/tree_icon.png",
		                "valid_children": ["default"]
		            },
		            "default": {
		                "valid_children": ["default", "file"]
		            },
		            "file": {
		                "icon": "glyphicon glyphicon-file",
		                "valid_children": []
		            },

		        },
		        grid = {
		            columns: [
		                { width: 210, header: "Nodes", title: "_DATA_" },
		                { cellClass: "col1", value: "price", width: 60, header: "Price", title: "price" },
		                { cellClass: "col2", value: "size", header: "Qty", title: "size" }
		            ],
		            resizable: false
		        };
		    //Display tree
		    $("#tree_good").jstree({
		        "core": {
		            data: data,
		             "check_callback": true
		        },
		        grid: grid,
		        "types": types,
		        plugins: ["themes", "json", "grid", "dnd","contextmenu"]
		        // remove "grid" from above and it works fine with empty data
		    });
		    $("#tree_only").jstree({
		        "core": {
		            data: [],
		             "check_callback": true
		        },
		        grid: grid,
		        "types": types,
		        plugins: ["themes", "json", "dnd","contextmenu"]
		    });
		    $("#tree_bad").jstree({
		        "core": {
		            data: [],
		             "check_callback": true
		        },
		        grid: grid,
		        "types": types,
		        plugins: ["themes", "json", "grid", "dnd","contextmenu"]
		        // remove "grid" from above and it works fine with empty data
		    });

		    //Add action on menu
		    $(".menu input").click(function () {
		        debugger;
		        var tree = $(this).closest(".wrapper").find(".mytree");
		        switch (this.id) {
		            case "remove":
		                var id = $("div#tree").jstree("get_selected");
		                tree.jstree("delete_node", id);
		                break;
		            case "add_folder":
		                tree.jstree("create_node", null, null, "last", "create_node", true);
		                break;
		            default: break;
		        }
		    });

		});
		</script>

		<h2>Tree Grid Dynamic Root Test</h2>

			<div class="container-fluid">
			  <div class="row">
			    <div class="col-md-12">


						<div class="wrapper">
						    <div class="menu">
						        <input id="add_folder" type="button" value="add node"/>
						        <input id="remove" type="button" value="remove node"/>
						    </div>
						    <div>Tree with preset nodes (works)</div>
						    <div class="mytree" id="tree_good"></div>
						</div>

						<hr/>

						<div class="wrapper">
						    <div class="menu">
						        <input id="add_folder" type="button" value="add node"/>
						        <input id="remove" type="button" value="remove node"/>
						    </div>
						    <div>Tree with no nodes (fails)</div>
						    <div class="mytree" id="tree_bad"></div>
						</div>

						<hr/>

						<div class="wrapper">
						    <div class="menu">
						        <input id="add_folder" type="button" value="add node"/>
						        <input id="remove" type="button" value="remove node"/>
						    </div>
						    <div>Tree without grid (works)</div>
						    <div class="mytree" id="tree_only"></div>
						</div>
						</div>

			  </div>
			</div>