Uncaught TypeError: Cannot read property 'dataSource' of undefined

Question

I'm trying to get the KendoTree view working with checkbox options. I have copied the exact same code and added:

<link href="kendo/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/kendo.default.min.css" rel="stylesheet" />
<script src="kendo/jquery.min.js" />
<script src="kendo/kendo.all.min.js" />

<script>
    $("#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 < nodes.length; i++) {
            if (nodes[i].checked) {
                checkedNodes.push(nodes[i].id);
            }

            if (nodes[i].hasChildren) {
                checkedNodeIds(nodes[i].children.view(), checkedNodes);
            }
        }
    }

    // show checked node IDs on datasource change
    $("#treeview").data("kendoTreeView").dataSource.bind("change", function() {
        var checkedNodes = [],
            treeView = $("#treeview").data("kendoTreeView"),
            message;

        checkedNodeIds(treeView.dataSource.view(), checkedNodes);

        if (checkedNodes.length > 0) {
            message = "IDs of checked nodes: " + checkedNodes.join(",");
        } else {
            message = "No nodes checked.";
        }

        $("#result").html(message);
    });
</script>

It is giving me -

Uncaught TypeError: Cannot read property 'dataSource' of undefined.

Any help would be great.

Thanks. Sonu

Answer 1

Nope- I cannot get it to work.. I'm using FlatUI theme so it might be the issue with the theme.

        Uncaught TypeError: Cannot read property 'dataSource' of undefined index2.html:211
        (anonymous function) index2.html:211
        i.extend.trigger kendo.all.min.js:9
        nt.extend._process kendo.all.min.js:11
        nt.extend._change kendo.all.min.js:11
        b.isFunction.i jquery.min.js:3
        i.extend.trigger kendo.all.min.js:9
        (anonymous function) kendo.all.min.js:11
        i.extend.trigger kendo.all.min.js:9
        (anonymous function) kendo.all.min.js:11
        i.extend.trigger kendo.all.min.js:9
        nt.extend._process kendo.all.min.js:11
        nt.extend._change kendo.all.min.js:11
        b.isFunction.i jquery.min.js:3
        i.extend.trigger kendo.all.min.js:9
        (anonymous function) kendo.all.min.js:11
        i.extend.trigger kendo.all.min.js:9
        (anonymous function) kendo.all.min.js:11
        i.extend.trigger kendo.all.min.js:9
        nt.extend._process kendo.all.min.js:11
        nt.extend._change kendo.all.min.js:11
        b.isFunction.i jquery.min.js:3
        i.extend.trigger kendo.all.min.js:9
        (anonymous function) kendo.all.min.js:11
        i.extend.trigger kendo.all.min.js:9
        nt.extend.set kendo.all.min.js:11
        Rt.extend.set kendo.all.min.js:11
        v.extend._checkboxChange kendo.all.min.js:24
        b.isFunction.i jquery.min.js:3
        b.event.dispatch jquery.min.js:3
        v.handle

Answer 2

Seems to me you missed the control from your html, works for me : http://jsfiddle.net/vojtiik/L38KA/1/

<div id="treeview">
</div>