<div id="orgchart"></div>
<script>
var dataSource = new kendo.data.OrgChartDataSource({
    data: [
        { id: 1, name: "John Smith", title: "CEO", parentId: null },
        { id: 2, name: "Jane Doe", title: "CTO", parentId: 1 },
        { id: 3, name: "Mike Wilson", title: "Developer", parentId: 2 }
    ],
    schema: {
        model: {
            id: "id",
            parentId: "parentId",
            fields: {
                id: { type: "number" },
                parentId: { type: "number", nullable: true },
                name: { type: "string" },
                title: { type: "string", nullable: true }
            }
        }
    }
});

$("#orgchart").kendoOrgChart({
    dataSource: dataSource
});

dataSource.read().then(function() {
    var rootItem = dataSource.at(0);
    
    /* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Initial loaded state:", rootItem.loaded()); // true
    
    // Set loaded to false to allow reloading of child items
    rootItem.loaded(false);
    console.log("After setting to false:", rootItem.loaded()); // false
    
    // Set loaded back to true
    rootItem.loaded(true);
    console.log("After setting to true:", rootItem.loaded()); // true
});
</script>