kendo ui mvvm: dynamically update multiselect datasource inside View Model' s change event - mvvm

Question

I have a View with two multiselect widgets whose values (region_edu_admin, edu_admin) and datasources (region_edu_admins_ds, edu_admins_ds) are binded (through data-bind) to a ViewModel. Inside region_edu_admin's change event (regionEduAdminChanged) i am trying to reload edu_admin's widget datasource, that is edu_admins_ds, by using the set method. Though i do get inside newEduAdminsDS(), the datasource does not get reloaded. Any ideas on what i' m missing here would be much appreciated! You can see the code below:
/* View Model */
var LabsSearchVM = kendo.observable({
region_edu_admins_ds: newRegionEduAdminsDS(),
edu_admins_ds: newEduAdminsDS(),
region_edu_admin: "",
edu_admin: "",
regionEduAdminChanged: function(e) {
this.set("edu_admins_ds", newEduAdminsDS());
}
});
/* View */
<label for="region_edu_admin">Περιφερειακή Διεύθυνση Εκπαίδευσης</label>
<select id="sl_region_edu_admin"
name="region_edu_admin"
data-role="multiselect"
data-auto-bind="false"
data-value-primitive="true"
data-text-field="name"
data-value-field="name"
data-bind="source: region_edu_admins_ds, value: region_edu_admin, events: {change : regionEduAdminChanged }"
data-filter="contains"
multiple="multiple">
</select>
<label for="edu_admin">Διεύθυνση Εκπαίδευσης</label>
<select id="sl_edu_admin"
name="edu_admin"
data-role="multiselect"
data-auto-bind="false"
data-text-field="name"
data-value-field="name"
data-bind="source: edu_admins_ds, value: edu_admin"
data-filter="contains"
multiple="multiple">
</select>
/* newEduAdminsDS() function */
function newEduAdminsDS() {
var edu_admins_ds = new kendo.data.DataSource({
transport: {
read: {
url: "api/edu_admins",
type: "GET",
dataType: "json"
}
},
schema: {
data: "data",
model: {
id: "edu_admin_id",
fields: {
edu_admin_id: { editable: false },
name: { editable: false },
region_edu_admin_id: { editable: false },
region_edu_admin: { editable: false }
}
}
}
});
return edu_admins_ds;
}

Answer 1

You do not need to re-create the DataSource. All you need to do is tell it to read() again to reload the data. Change the regionEduAdminChanged function in your observable to this:
regionEduAdminChanged: function(e) {
this.edu_admins_ds.read();
}