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.
}
});
});