I have multiple MultiSelect Instances:
@foreach (var group in Model.WellnessGroups)
{
<div class="hpanel hblue">
<div class="panel-heading hbuilt">
@group.Name
</div>
<div data-groupId="@group.Id" class="panel-body" style="display: block;">
<select multiple data-groupId="@group.Id" class="groupMultiSelect"></select>
</div>
</div>
}
Each MultiSelect instance is wrapped in a groupId.
I would like for each MultiSelect instance to reflect in it's placeholder/value the specific items that have been saved to the database under that id.
I have an ajax call to a controller that will save the selected values on each "select" event so that when I select an employee, the ajax call grabs the employeeId and groupId and saves it into the database:
$(".groupMultiSelect").kendoMultiSelect({
placeholder: "Select Employees",
dataTextField: "displayName",
dataValueField: "objectId",
dataSource: dataSource,
autoBind: true,
select: function(e) {
var employeeId = e.dataItem.objectId;
var wellnessGroupId = $(this).closest("div").prevObject[0].element[0].getAttribute('data-groupId');
wellnessGroupId = parseInt(wellnessGroupId);
$.ajax({
url: "@Url.Action("SaveEmployeeToGroup")",
cache: false,
data: {
employeeId: employeeId,
wellnessGroupId: wellnessGroupId
},
type: "Post",
}).done(function(res) {
toastr.success("Employee Saved to Wellness Group");
}).fail(function(err) {
toastr.error("There was a problem saving this entry.);
});
},
value: {
//TODO: bind values of each multiselect field to reflect data that has been saved.
}
});
});