Kendo UI Cascading Dropdown initial value not setting up - kendo-ui

Question

I have cascade dropdownlists and when trying to define initial value (under cascade, too) instead to call the ajax controller methods with parent selected value it's passing blank values.
I have equirement like, i can save my last search values and store it int database and after coming to that screen again, values will be selected by default.
Everything is in Javascript means storing the values/ retriving and applying to controls :
My Cascade dropdown code :
<div style="width: 400px; clear: both; float: left; position: relative; display: table-cell;">
<ul style="width: 450px; clear: both; float: none;">
<li>
<div class="editor-row">
<div class="editor-label-short">Home Country</div>
<div class="editor-field">
#(Html.Kendo().DropDownList()
.Name("HOME_COUNTRY_ID")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select Home Country")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source => source.Read(read => read.Action("GetCountryJSON", "Employee")))
)
</div>
</div>
</li>
<li>
<div class="editor-row">
<div class="editor-label-short">Home City</div>
<div class="editor-field">
#(Html.Kendo().DropDownList()
.Name("HOME_CITY_ID")
.HtmlAttributes(new { style = "width:200px" })
.OptionLabel("Select Home City")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source => source.Read(read => read.Action("GetCityByCountryJSON", "Employee")
.Data("getCountryId"))
.ServerFiltering(true))
.AutoBind(false)
.CascadeFrom("HOME_COUNTRY_ID")
)
</div>
</div>
</li>
</ul>
</div>
Javacript Code which assigning Values in Page load means After Dom ready:
function applyvaluetoControls() {
setdefaultvaluestoControls();
$.each(activeLayout.controls, function(index) {
$.each(options.emementArray, function(innerindex) {
if (options.emementArray[innerindex].attr("id") === activeLayout.controls[index]["id"]) {
if ((options.emementArray[innerindex]).is(':checkbox')) {
options.emementArray[innerindex].prop('checked', activeLayout.controls[index]["value"]);
} else {
if (options.emementArray[innerindex].attr("data-role") !== undefined && options.emementArray[innerindex].attr("data-role") === "dropdownlist") {
// console.log(options.emementArray[innerindex].data('kendoDropDownList'));
if (options.emementArray[innerindex].data('kendoDropDownList').options.cascadeFrom !== "") {
console.log($("#" + options.emementArray[innerindex].data('kendoDropDownList').options.cascadeFrom).val());
options.emementArray[innerindex].data('kendoDropDownList').dataSource.read({ CompanyId: $("#" + options.emementArray[innerindex].data('kendoDropDownList').options.cascadeFrom).val() });
options.emementArray[innerindex].data('kendoDropDownList').value(activeLayout.controls[index]["value"]);
} else {
options.emementArray[innerindex].data('kendoDropDownList').enable();
options.emementArray[innerindex].data('kendoDropDownList').value(activeLayout.controls[index]["value"]);
}
console.log(activeLayout.controls[index]["id"]);
console.log(activeLayout.controls[index]["value"]);
} else {
options.emementArray[innerindex].val(activeLayout.controls[index]["value"]);
}
}
}
});
});
}
Console Log:
HOME_COUNTRY_ID // Parent Control Id
322 // It Setting the value to Parent
// Blank value when I am trying to read the value Parent Control (Country)
City : // Parent triggering Chile but with Blank Value
HOME_CITY_ID // Child
342 // Value
City : 322 // after coming out of loop it's again calling Child with Parent selected value
and It's wiping out intial selected value of child.
Any help will be highly appreciated!!

Answer 1

ChildrenUsing these properties from your example in your child drop down you are instructing the drop down to:
.AutoBind(false) //<--Don't do any data retrieval until asked or clicked
.OptionLabel("Select Home City") //<--If the value is null display this and value will be ""
.CascadeFrom("HOME_COUNTRY_ID") //<--Get my values using the DataValueField from this control and refresh when it changes
I bet by having the cascade on like that you will need a configuration similar to this fictitious scenario:
Parent DropDown Config
.Name("ddlParent")
.OptionLabel((#Model.ForceParentSelect) ? "" : "All Parents")
.Value(Model.ParentID.HasValue ? Model.ParentID.Value.ToString() : "")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetParents", "Parent");
});
})
Child DropDown Config
<script>
function filterChild{ return { ParentID: $("#ddlParent").val() }; }
</script>
.Name("ddlChild")
.OptionLabel((#Model.ForceChildSelect) ? "" : "All Childs")
.Value(Model.ChildID.HasValue ? Model.ChildID.Value.ToString() : "")
.AutoBind(Model.ParentID.HasValue)
.CascadeFrom(Model.ParentID.HasValue ? "" : "ddlParent")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetChildren", "Child")
.Data("filterChild");
})
})