Binding Values of Multiple MultiSelect Instances

[Benjamin]

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

[Dimitar]

Hello Benjamin,

In case you would like to stick to the approach from the currently provided code snippet, I would suggest you to try the following approach:

• Retrieve the selected data for MultiSelect widgets on page load with ajax.
  
  
• Query the DOM and find each MultiSelect container element ( $("#wrapper").find("[data-role='multiselect']") ).
  
  
• Traverse the collection of elements and use the widgetInstance() method to retrieve the current MultiSelect instances and apply the selected values by using the MultiSelect's value() method.

Alternatively, the recommended way would be to use the MultiSelect HtmlHelper that is provided by Telerik UI for ASP.NET MVC and bind each MultISelect widget with the [WidgetName]For method to the ViewModel. This way, the initial values will be selected according to the ViewModel data. You can checkout the following HowTo example, where you can find a working solution in ASP.NET MVC that demonstrates a similar scenario:

https://docs.telerik.com/aspnet-mvc/helpers/multiselect/how-to/use-strongly-typed-posted-with-form  


Regards,
Dimitar
Progress Telerik