Kendo Multiselect with pre determined values - kendo-ui

Question

I have looked everywhere and cant seem to get this figured out. My issue..
I have 1 kendo dropdown list and 3 kendo mutliselects. each selection filters the next object. Dropdownl => MS1 => MS2 => MS3...
At times, a user may come into this page with a predetermined set of values that need to be selected in the above objects. 1 for the DD and 1+ for the MS.
I can get the dropdown to populate and have the corrected selected item. I can get the first MS to populate with the correct values but not select the values that are needed (0 values are selected) and the next 2 dont work cause i cant get past the first MS properly. I feel like I am running into some kind of sync/async issues that I cant wrap my head around.
See code below. I have included all my data sources, object setups and functions that i felt were relevant (maybe too much). The important function is prePopulateSelectedValues. this is the one that gets called to use the values to select the DD list values. I only included one of the updateLineShopGroupMS (for example) as the other update functions are basically the same. Right now I am stuck on 2 different versions of code which both provide the same results - a promise and non-promise version which you can see in prePopulateSelectedValues.
Thank you in advance
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([]);
}
}