Kendo Multiselect с предварительно установленными значениями

Question

Я искал повсюду и, кажется, не могу понять это.Моя проблема ..

У меня есть 1 раскрывающийся список кендо и 3 мутлиселекта кендо.каждый выбор фильтрует следующий объект.Dropdownl => MS1 => MS2 => MS3 ...

Иногда пользователь может зайти на эту страницу с заранее определенным набором значений, которые необходимо выбрать в вышеуказанных объектах.1 для DD и 1+ для MS.

Я могу получить раскрывающийся список для заполнения и получить исправленный выбранный элемент.Я могу заставить первую MS заполнить правильные значения, но не выбрать нужные значения (выбраны 0), а следующие 2 не работают, потому что я не могу правильно пройти первую MS.Я чувствую, что сталкиваюсь с какими-то проблемами синхронизации / асинхронности, которые я не могу обернуть вокруг себя.

См. Код ниже.Я включил все свои источники данных, настройки объектов и функции, которые, по моему мнению, были актуальны (может быть, слишком много).Важной функцией является prePopulateSelectedValues.это тот, который вызывается для использования значений для выбора значений в списке DD.Я включил только одну из updateLineShopGroupMS (например), так как остальные функции обновления в основном те же.Прямо сейчас я застрял на 2 разных версиях кода, которые обе дают одинаковые результаты - версию с обещанием и без обещания, которую вы можете увидеть в 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([]);
}

}