Binding Kendo Treeview to Hierarchical DataSource (remote data)

Question

I'm having some trouble getting my kendo TreeView to properly bind to HierarchicalDataSource. Currently, my page is set up where the user is able to make a few selections and then click a button to bind the TreeView based on their selections.

The button click handler looks like this:

    $("#btnAdd").click(function () {
        var treeData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/myURL/",
                    data: { "id": JSON.stringify(multiselect.value()) }, //this is the value from the first selection.
                    datatype: "jsonp",
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "HBClassID",
                    children: {
                        schema: {
                            data: "ActiveStudents",
                            model: {
                                id: "ComboID"
                            }
                        }
                    }
                }
            }
        });

        $("#tvAjaxClass").kendoTreeView({
            dataSource: treeData,
            dataTextField: ["HBFullName", "Student.StudentFullName"],
            checkboxes: {
                template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
                checkChildren: true
            }
        });
    });

The ajax call returns data that looks like this:

            [{
                "HBClassID": 23400, "HBClassDesc": "Johnson Tutoring Group", "CourseNumber": "", "Section": "", "Period": "", "HBFullName": "Johnson Tutoring Group",
                "ActiveStudents":
                    [
                        { "HBClassID": 23400, "StudentID": 21890, "Student": { "UserId": 21890, "UserName": "DFaast", "UserFirstName": "Doyle", "UserLastName": "Faast", "StudentFullName": "Doyle Faast" }, "ComboID": "23400:21890" }
                    ]
            }]

When I hit this function, the ajax call is made, the data is return, and the top level binds fine. Everything seems to work except there are never any child nodes when I expand a parent node. The weird part to me, is that if I remove the transport portion of the HierarchicalDataSource and replace it with local data similar to this:

    $("#btnAdd").click(function () {
        var treeData = new kendo.data.HierarchicalDataSource({
            data: [{
                "HBClassID": 23400, "HBClassDesc": "Johnson Tutoring Group", "CourseNumber": "", "Section": "", "Period": "", "HBFullName": "Johnson Tutoring Group",
                "ActiveStudents":
                    [
         { "HBClassID": 23400, "StudentID": 21890, "Student": { "UserId": 21890, "UserName": "DFaast", "UserFirstName": "Doyle", "UserLastName": "Faast", "StudentFullName": "Doyle Faast" }, "ComboID": "23400:21890" }
                    ]
            }],
            schema: {
                model: {
                    id: "HBClassID",
                    children: {
                        schema: {
                            data: "ActiveStudents",
                            model: {
                                id: "ComboID"
                            }
                        }
                    }
                }
            }
        });

        $("#tvAjaxClass").kendoTreeView({
            dataSource: treeData,
            dataTextField: ["HBFullName", "Student.StudentFullName"],
            checkboxes: {
                template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
                checkChildren: true
            }
        });
    });

then the TreeView binds exactly the way that I want it to. I am able to expand a HBClass and see all of the ActiveStudents within it.

Is there anything that would be different about binding to remote vs. local data?

Anthony Anthony · Accepted Answer · 2014-05-20T15:49:38

I updated my click event to look like this and it works for my situation, however I don't know if this is the correct way to do it.

    $("#btnAdd").click(function () {
        var treeData = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: "/RightPath/Assignment/BindTreeView/",
                    data: { "id": JSON.stringify(multiselect.value()) },
                    datatype: "json",
                    type: "POST"
                }
            },
            schema: {
                model: {
                    id: "ComboID",
                    children: "ActiveStudents"
                }
            }
        });

        $("#tvAjaxClass").kendoTreeView({
            dataSource: treeData,
            dataTextField: ["HBFullName", "Student.StudentFullName"],
            dataValueField: ["HBClassID", "ComboID"],
            checkboxes: {
                template: "<input type='checkbox' name='StudentClassID' value='#= item.id #' />",
                checkChildren: true
            }
        });
    });

Binding Kendo Treeview to Hierarchical DataSource (remote data)

1 Answers