Binding Values of Multiple MultiSelect Instances

2 posts, 0 answers
  1. Benjamin
    Benjamin avatar
    1 posts
    Member since:
    Sep 2017

    Posted 12 Jan Link to this post

    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.
                    }
                });
            });     
  2. Dimitar
    Admin
    Dimitar avatar
    352 posts

    Posted 16 Jan Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top