Load on demand - Error: property 'length' is not defined

[Amit]

Hello,

I am trying to load the children of node when the user expands the node in an MVC 4 application. The razor and controller  code is below -
I get an error about a length property not found at the line -         treeview.append(result, node);
Error
(window.kendo.jQuery);(function(e,t){function n(e){return function(t){var n=t.children(".k-animation-container");return n.length||(n=t),n.children(e)

Thanks in advance,

Amit

<script type="text/javascript">
    function loadChildrenForEntity(entityId) {

        dataSource = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    cache: false,
                    url: "@Url.Action("GetChildrenForEntity", "Admin")",
                    dataType: "json",
                    data: function () {
                        return {
                            entityID: entityId
                        };
                    }
                }
            },
            schema: {
                model: {
                    id: "ItemHID",
                    hasChildren: "HasChildren"
                }
            }
        });

        $("#entityDetails").kendoTreeView({
            dataSource: dataSource,
            //            select: onSelect,
            expand: onExpand,
            dataTextField: "DisplayName"
        }).data("kendoTreeView");
    }

    function onExpand(e) {
        var treeview = $('#entityDetails').data('kendoTreeView');
        var node = e.node;
        var data = treeview.dataItem(node);
        //alert('id = ' + data.id);
        $.ajax({
            url: "@Url.Action("GetChildrenForEntity", "Admin")",
            //type: "POST",
            datatype: "json",
            data: { entityID: data.id },
            success: function (result) {
                DisplayChildNodes(result, node)
            }
        });
    }

    function DisplayChildNodes(result, node) {
        var treeview = $('#entityDetails').data('kendoTreeView');
        treeview.append(result, node);
    }
</script>

The code in the controller is -
        public ActionResult Detail()
        {
            return PartialView();
        }

        public ActionResult GetChildrenForEntity(int entityID)
        {
            //entityID = -1000001;
            List<EntityTreeItem> list;
            list = new FDCRouteServiceClient().ListChildrenForEntity(entityID);
            var returnList = list.Select(r =>
                new RouteTreeViewModel
                {//todo - amit k - have RouteTreeViewModel derive from a base class EntityTreeViewModelBase
                    DisplayName = string.Format("{0} ({1})", r.EntName, r.EntTypeName),
                    ItemHID = r.EntHID,
                    //ParentHID = entityID,
                    HasChildren = r.HasChildren.Equals("1") ? true : false,
                    //ItemTypeCode = r.ItemTypeCode.Trim(),
                    //RouteHID = r.RouteHID,
                    //ParentTypeCode = r.ParentTypeCode
                }).ToList();

            return Json(returnList, JsonRequestBehavior.AllowGet);
        }

[Alexander Valchev]

Hello Amit,

The append method of the TreeView is designed to append a single node. From your code it seems that you are trying to append multiple items which is not supported.

Instead please consider using the build-in remote binding of the Hierarchical DataSource component. For more information check the following help topics:

• Creating a HierarchicalDataSource bound to a homogeneous remote data service
• Binding a HierarchicalDataSource to remote data with multiple service end-points

Regards,
Alexander Valchev
Telerik