ajax - 从下拉列表中传入新值后，Kendo Treeview 展开和复选框不起作用

Question

stackoverflow 和实现树视图的新手。我遇到了一个问题，每当我从下拉列表中选择一个不同的值来填充我的树视图时，展开和复选框不再起作用。但第一次有效。

所以我有 ajax 调用，它会从下拉列表中获取一个参数以返回 JSON 数据来填充我的树。这是我的代码。我一直在为这个错误而努力，我也在 kendo ui 文档中尝试了一些解决方案，但它只是不起作用。真的需要一些帮助。谢谢！

这是我的代码：

dataB1 = @Html.Raw(Json.Encode(ViewData["branchList"]));
reloadNewBranch = @Html.Raw(Json.Encode(ViewData["reloadNewBranch"]));
$('#comboNewBranch').kendoAutoComplete({
    dataSource: dataB2,
    placeholder: "Enter branch name...",
    value: reloadNewBranch
});
//Create TreeView
    function onChange(e) {
        $("body").css("cursor", "progress");
        $('#hiddenPackageArray').val('');
        document.getElementById("textTestpassId").innerHTML = 'At least one(1) template must be selected.';
        $('#treeview').empty();

        $.ajax({
            url: '@Url.Action("LoadOldBranchTemplates", "Home")',
            data: { oldBranchName: $("#comboOldBranch").data("kendoAutoComplete").value() },
            dataType: "json"
        }).done(function (result, textStatus, jqXHR) {

        var viewModel = new kendo.data.HierarchicalDataSource({
            data: result,
            schema: {
                model: {
                    id: "Id",
                    hasChildren: true,
                    children: "Templates"
                }
            }
            });

            $("#treeview").kendoTreeView({
            loadOnDemand: false,
            checkboxes: {
                checkChildren: true
            },
            check: onCheck,
            dataSource: viewModel,
            dataTextField: ["TestPassName", "DisplayName"]
            })

        // gathers IDs of checked nodes
        function checkedNodeIds(nodes, checkedNodes) {
            for (let i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    checkedNodes.push(nodes[i].Id);
                    let filtered = checkedNodes.filter(function (listOfId) {
                        return listOfId != null;
                    });
                    $('#hiddenPackageArray').val(filtered);
                }
                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }
        // show checked node IDs on datasource change
        function onCheck(e) {
            console.log("I'm in onSelect function");
            var checkedNodes = Array();
            var treeView = $("#treeview").data("kendoTreeView");
            var message = String();

            checkedNodeIds(treeView.dataSource.view(), checkedNodes);
            console.log("Checkbox changed :: " + this.text(e.node));

            if (checkedNodes.length > 0) {
                message = checkedNodes.join(" ");
            } else {
                message = "No package(s) are selected.";
                $('#hiddenPackageArray').val('');
            }
            $("#result").html(message);
        }
        $("body").css("cursor", "default");
        })
        .fail(function (xmlHttpRequest, textStatus, errorThrown) {
            $('#mainDiv').append('<p>Status: ' + textStatus + '</p>');
            $('#mainDiv').append('<p>Error: ' + errorThrown + '</p>');
            $('#mainDiv').append('<p>' + xmlHttpRequest + '</p>');
        });
    };

标签： ajaxkendo-uitreeview