Getting PrimaryId's from a Kendo UI MultiSelect in ASP.Net MVC 4

Question

I'm just starting out in ASP.Net and Kendo and would really appreciate any help you could all give. I'm trying to use a Kendo MultiSelect Widget to display a list of Employees (which I have successfully managed) using a Json method on my controller to return a result set from my view model. What I want to be able to achieve is to gather a list of employeeId's so that I can send them back to the controller for processing. However, I only seem to be able to get hold of the values in the list and not the Id's.

Could someone give me some advice on how to achieve this?

My ViewModel looks like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using TrainingKendoUI.Models;
using System.ComponentModel.DataAnnotations;

namespace TrainingKendoUI.ViewModels
{
    public class EmployeeViewModel
    {
        #region Constructors

        public EmployeeViewModel()
        {

        }

        public EmployeeViewModel(TRAINING_EMPLOYEES model)
        {
            this.employeeId = model.EMPLOYEE_ID;
            this.firstName = model.FIRST_NAME;
            this.lastName = model.LAST_NAME;
            this.email = model.EMAIL;
            this.login = model.LOGIN;
            this.fullName = model.FIRST_NAME + " " + model.LAST_NAME;
        }

        #endregion

        #region Properties

        public int employeeId { get; set; }
        public string firstName { get; set; }
        public string lastName { get; set; }
        public string email { get; set; }
        public string login { get; set; }
        public string fullName { get; set; }

        #endregion
    }
}

My Json method looks like this:

    public JsonResult Employees_Read()
    {
        var model = db.TRAINING_EMPLOYEES;
        var ViewModel = new List<EmployeeViewModel>();

        foreach (var employee in model)
        {
            ViewModel.Add(new EmployeeViewModel(employee));
        }

        return Json(ViewModel, JsonRequestBehavior.AllowGet);
    }

And my view looks like this:

@model IEnumerable<TrainingKendoUI.Models.TRAINING_EMPLOYEES>

<div>
    <h2>Multiselect Test</h2>
    <label for="required">Required</label>
    @(Html.Kendo().MultiSelect()
        .Name("required")
        .DataTextField("fullName")
        .DataValueField("emplolyeeId")
        .Placeholder("Select Employees")
        .Filter(FilterType.Contains)
        .DataSource(source =>
            {
                source.Read(read =>
                    {
                        read.Action("Employees_Read", "Employee");
                    })
                    .ServerFiltering(true);
            })
        )
        <button class="k-button" id="get">Send Invitations</button>
</div>
<script>
    $(document).ready(function () {
        var required = $("#required").data("kendoMultiSelect");

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

        $("#get").click(function () {
            alert("Employees:\n\nIds: " + required.value());
        });
    });
</script>

Many Thanks!

Answer 1

You can use the dataItems method:

// get selected dataItems from the control 
var control = $("#required").data("kendoMultiSelect");
var selectedDataItems = control.dataItems();

// create an array that only contains the selected ids
var ids = [];
$(selectedDataItems).each(function() {
   ids.push(this.employeeId); // you can access any property on your model here
});

( demo )