从下拉列表中传入新值后,Kendo Treeview展开并且复选框不起作用

时间:2018-11-07 02:02:44

标签: ajax kendo-ui treeview

stackoverflow的新功能并实现了treeview。我遇到一个问题,即每当我从下拉列表中选择一个不同的值(将填充我的树状视图)时,expand和复选框均不再起作用。但是第一次可以。

因此,我有一个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>');
        });
    };

0 个答案:

没有答案