Append to treeview with HDS

by PaulSinnema

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div style="border-width: 2; border-color:blue;width: 100%; height: 100%; padding: 2;">
    <button id='appendButton'>Append</button>
    <div id="splitterMOS" class="ctt-autoSize">
        <div id="linkerMOS">
            <div id="containerMOS" class="ctt-autoSize">
                <div id="panelMOS" class="ctt-autoSize"></div>
            </div>
        </div>
        <div id="rechterPAD">
            <div id="containerPAD" class="ctt-autoSize">
                <div id="panelPAD" class="ctt-autoSize"></div>
            </div>
        </div>
    </div>
</div>

CSS

body {
    height: 100%;
}
html {
    height: 100%;
}
#panel1 {
    height: 100%;
}
#horizontal {
    height: 100%;
    margin: 0 auto;
}
#vertical {
    height: 100%;
    margin: 0 auto;
}
#top-pane {
    height: 100%;
}
#left-pane {
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
#right-pane {
    height: 100%;
    background-color: rgba(60, 70, 80, 0.05);
}
.pane-content {
    height: 100%;
    padding: 0 10px;
}

JavaScript

var toAppend = {
    "Data": [{
        "IdWithType": "16017/PadFolderEntity",
            "HasPadChildren": false,
            "OpdrachtgeverId": 0,
            "MOSFolderId": 0,
            "Naam": "Nieuwe map",
            "FolderId": 16016,
            "FolderList": null,
            "ObjectList": null,
            "HasChildren": true,
            "Beschrijving": "Nieuwe map",
            "RootId": 2,
            "Id": 16017,
            "CreatedOn": "\/Date(1359541534902)\/",
            "CreatedBy": 0,
            "ChangedOn": "\/Date(1359541534905)\/",
            "ChangedBy": 0,
            "TypeName": "PadFolderEntity"
    }],
        "Size": 0,
        "Version": {
        "Major": 1,
            "Minor": 1,
            "Build": -1,
            "Revision": -1,
            "MajorRevision": -1,
            "MinorRevision": -1
    },
        "Content": null,
        "StatusCode": 200,
        "ReasonPhrase": "OK",
        "Headers": [],
        "RequestMessage": null,
        "IsSuccessStatusCode": true
};

var PADDataSource = new kendo.data.HierarchicalDataSource({
    data: toAppend,
    schema: {
        data: "Data",
        errors: "Errors",
        model: {
            id: "Id",
            hasChildren: "HasPadChildren"
        }
    }
});

$("#splitterMOS").kendoSplitter({
    orientation: "horizontal",
    panes: [{
        collapsible: true,
        size: "300px",
        scrollable: false
    }, {
        collapsible: false,
        size: "100%",
        scrollable: true
    }]
});

var treeview = $("#panelMOS").kendoTreeView({
    dataSource: PADDataSource,
    dataTextField: "Beschrijving",
    dataValueField: "Id",
    expand: onExpand,
    dragAndDrop: false
}).data('kendoTreeView');

function onExpand(e) {
    var dataItem = this.dataItem(e.node);
    dataItem.loaded(false);
}

$('#appendButton').bind('click', function () {
    treeview.append(toAppend.Data, treeview.select());
});