Kendo Multiselect具有预定值

Question

我到处都看了看，似乎无法弄清楚。我的问题。

我有1个剑道下拉列表和3个剑道mutliselects。每个选择都会过滤下一个对象。 Dropdownl => MS1 => MS2 => MS3 ...

有时，用户可能会进入带有需要在上述对象中选择的一组预定值的页面。 DD为1，MS为1 +。

我可以填充下拉菜单并选择更正的项目。我可以使第一个MS填充正确的值，但不能选择所需的值（选择了0个值），接下来的2个无效，因为我无法正确通过第一个MS。我觉得自己遇到了一些同步/异步问题，无法解决。

请参见下面的代码。我包括了所有我认为相关的数据源，对象设置和功能（可能太多了）。重要的功能是prePopulateSelectedValues。这是被调用以使用值来选择DD列表值的那个。我只包括了一个updateLineShopGroupMS（例如），因为其他更新功能基本相同。现在，我受困于两个提供相同结果的不同版本的代码-您可以在prePopulateSelectedValues中看到的承诺版本和非承诺版本。

提前谢谢

var lineShopGroupDataSource = new kendo.data.DataSource({
serverFiltering: false,
transport: {
    read: {
        url: "/Base/GetLineShopGroupsFilteredByLocationGroup",
        type: "GET",
        dataType: "json",
        data: function (e) {
            return {
                LocationGroupId: getDropDownLists("LocationGroupId").value()
            };
        }
    }
}
});

var locationGroupDataSource = new kendo.data.DataSource({
transport: {
    read: {
        type: "GET",
        dataType: "json",
        url: '/Base/GetLocationGroupNames',
        data: function (e) {
            return {
                LocationGroupId: getDropDownLists("LocationGroupId").value()
            };
        }
    }
}
});

var substationDataSource = new kendo.data.DataSource({
transport: {
    read: {
        type: "GET",
        dataType: "json",
        url: '/Base/GetSubstationFilteredByLineShopGroup',
        data: function (e) {
            let ids = getMultiSelect("LineShopGroup").value();
            return {
                LineShopIds: ids.toString()
            };
        }
    }
}
});

var circuitDataSource = new kendo.data.DataSource({
transport: {
    read: {
        type: "GET",
        dataType: "json",
        url: '/Base/GetCircuitFilteredBySubstation',
        data: function (e) {
            let ids = getMultiSelect("Substation").value();
            return {
                SubstationIds: ids.toString()
            };
        }
    }
}
});

function setUpCircuit() {
$("#Circuit").kendoMultiSelect({
    autoBind: false,
    enable: false,
    placeholder: "Select Circuit(s)...",
    dataTextField: "Text",
    dataValueField: "Value",
    dataSource: circuitDataSource,
    filter: "contains",
    change: function () {

        getHiddenCircuitList();
    }
});
}

function setUpSubstation() {
$("#Substation").kendoMultiSelect({
    autoBind: false,
    enable: false,
    dataTextField: "Text",
    dataValueField: "Value",
    placeholder: "Select Substation(s)...",
    dataSource: substationDataSource,
    filter: "contains",
    change: function () {
        if (document.getElementById('Circuit')) {
            updateCircuitMS();
        }
        getHiddenSubstationList();
    }
});
}

function setUpLineShopGroup() {
$("#LineShopGroup").kendoMultiSelect({
    autoBind: false,
    dataTextField: "Text",
    dataValueField: "Value",
    headerTemplate: "<label style='padding-left: 10px;'><input type='checkbox' id='selectAllLineShopGroups'> Select All</label>",
    dataSource: lineShopGroupDataSource,
    placeholder: "Select Line Shop/Group...",
    change: function () {
        if (document.getElementById('Substation')) {
            updateSubstationMS();
        }

        checkAllFlag("LineShopGroup");
        getHiddenLineShopList();
    }
});
}

function setUpLocationGroupId() {
$("#LocationGroupId").kendoDropDownList({
    autoBind: true,
    dataTextField: "Text",
    dataValueField: "Value",
    optionLabel: "Select Location Group...",
    dataSource: locationGroupDataSource,
    change: function () {
        if (document.getElementById('LineShopGroup')) {
            updateLineShopGroupMS();
        }
    }
});
 }

function prePopulateSelectedValues(locGroupList, lineShopGroupsList, substationList, circuitList) {

if (locGroupList !== "0") {
    var locGrpDD = $('#LocationGroupId').data('kendoDropDownList');
    var lineShopMS;

    $("#LocGroupString").val(locGroupList);
    locGrpDD.value(locGroupList);

    if (document.getElementById('LineShopGroupString')) {
        debugger
        var promise = new Promise(function (resolve, reject) {
            debugger
            resolve(function () {
                updateLineShopGroupMS();
            });
        });

        promise.then(function() {
            //we have our result here
            debugger
            var lineShopMS = $('#LineShopGroup').data('kendoMultiSelect');
            return lineShopMS; //return a promise here again
        }).then(function(result) {
            //handle the final result
            debugger
            $("#LineShopGroupString").val(lineShopGroupsList);
            result.value([lineShopGroupsList]);
        }).catch(function (reason) {
                debugger
        });
    }
    if (document.getElementById("SubstationString")) {
        updateSubstationMS();
        var substationMS = $('#Substation').data('kendoMultiSelect');
        $("#SubstationString").val(substationList);
        substationMS.value(substationList);
    }
    if (document.getElementById("CircuitsString")) {
        updateCircuitMS();
        var circuitMS = $('#Circuit').data('kendoMultiSelect');
        $("#CircuitsString").val(circuitList);
        substationMS.value(circuitList);
    }
}
}

function updateLineShopGroupMS() {
var msObj = getMultiSelect('LineShopGroup');
var ddValue = getDropDownLists('LocationGroupId').value();
if (ddValue !== '') {
    msObj.enable();
    lineShopGroupDataSource.read();
}
else {
    msObj.enable(false);
    msObj.value([]);
}

}