kendo-ui - 具有预定值的剑道多选

Question

我到处寻找，似乎无法弄清楚这一点。我的问题..

我有 1 个剑道下拉列表和 3 个剑道多重选择。每个选择过滤下一个对象。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([]);
}

}

标签： kendo-uipromisekendo-multiselect