Kendo UI multiselect Asp.Net

Hello Experts,
I am new to Kendo UI. I want to bind the Multiselect control from my sql table.


<div class="demo-section">
                <h2>
                    Invite Attendees</h2>
                <label for="required">
                    Required</label>
                <select id="required" multiple="multiple" data-placeholder="Select attendees..." class="mySelect">
                  
                </select>
                 <button class="k-button" id="get">Send Invitation</button>
            </div>

Open in new window



 $.ajax({

                        // the url to the service
                        url: "api/LocalContact",

                        // the format that the data should be in when
                        // it is returned
                        contentType: "json",

                        // the function that executes when the server
                        // responds to this ajax request successfully
                        success: function (data) {
                            $.each(data, function (index, item) {
                                alert(item.Name);
//getting items here but are not binded to multiselect
                                $(".mySelect").append('<option>' + item.Name + '</option>')

                            });
                        } //end of success
                    }); //end of ajax



                    var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");

                    var all = $.map(required.dataSource.data(), function (dataItem) {
                        return dataItem.value;
                    });

                    required.value(all);

                    $("#get").click(function () {
                        alert("Attendees:\n\nRequired: " + required.value());
                        return false;
                    });

Open in new window

LVL 8
Johny BravoAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
What about :
		var required = null;

		$.ajax({
			url: "api/LocalContact",
			contentType: "json",
			success: function(data) {
				$.each(data, function(index, item) {
					$("#required").append('<option>' + item.Name + '</option>')
				});
				required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
				var all = $.map(required.dataSource.data(), function (dataItem) {
					return dataItem.value;
				});
				required.value(all);
			}
		});

		$("#get").click(function() {
			alert("Attendees:\n\nRequired: " + required.value());
			return false;
		});

Open in new window

0
 
Johny BravoAuthor Commented:
Perfect. Thank you
0
All Courses

From novice to tech pro — start learning today.