Kendo UI

jQuery + Kendo UI + MockJax + Knockout

by whoamiwho

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="treeview">
</div>

JavaScript

$("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true
        },

        dataSource: [{
            id: 1,
            text: "My Documents",
            expanded: true,
            spriteCssClass: "rootfolder",
            items: [{
                id: 2,
                text: "Kendo UI Project",
                expanded: true,
                spriteCssClass: "folder",
                items: [{
                    id: 3,
                    text: "about.html",
                    spriteCssClass: "html"
                }, {
                    id: 4,
                    text: "index.html",
                    spriteCssClass: "html"
                }, {
                    id: 5,
                    text: "logo.png",
                    spriteCssClass: "image"
                }]
            }, {
                id: 6,
                text: "New Web Site",
                expanded: true,
                spriteCssClass: "folder",
                items: [{
                    id: 7,
                    text: "mockup.jpg",
                    spriteCssClass: "image"
                }, {
                    id: 8,
                    text: "Research.pdf",
                    spriteCssClass: "pdf"
                }, ]
            }, {
                id: 9,
                text: "Reports",
                expanded: true,
                spriteCssClass: "folder",
                items: [{
                    id: 10,
                    text: "February.pdf",
                    spriteCssClass: "pdf"
                }, {
                    id: 11,
                    text: "March.pdf",
                    spriteCssClass: "pdf"
                }, {
                    id: 12,
                    text: "April.pdf",
                    spriteCssClass: "pdf"
                }]
            }]
        }]
    });

    // function that gathers IDs of checked nodes
    function checkedNodeIds(nodes, checkedNodes) {
        for (var i = 0; i <...