title: Using Kendo MultiSelect with Kendo UI Grid in ASP.NET MVC
body: <p>This is related to <a href="https://stackoverflow.com/questions/20620129/how-to-resolve-issues-with-crud-operations-in-an-asp-net-mvc-kendo-ui-grid">another question I asked</a> about recently. I'm trying to bind user role information to a grid, and I'm assigning roles to a user. Each user can be in multiple roles within the database, and these should be edited using a Kendo UI MultiSelect.</p>
  
  <p>When I select the roles required and post back to the controller, the array of "RoleBasicModel" objects contains the required number of roles, but all their properties are empty. </p>
  
  <p>The models are defined as:</p>
  
  <pre><code>public class UserInfo
  {
      public string UserId { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
      public string UserName { get; set; }
      public string Roles { get; set; }
      public IEnumerable&lt;RoleBasicModel&gt; RoleList { get; set; }
  }
  public class RoleBasicModel
  {
      public string Id { get; set; }
      public string Text { get; set; }
  }
  </code></pre>
  
  <p>The grid is setup as: </p>
  
  <pre><code>    @(Html.Kendo().Grid&lt;Models.UserInfo&gt;()
      .Name("userGrid")
      .Columns(columns =&gt;
      {
          columns.Bound(p =&gt; p.UserName);
          columns.Bound(p =&gt; p.FirstName);
          columns.Bound(p =&gt; p.LastName);
          columns.Bound(p =&gt; p.Roles).EditorTemplateName("RoleListEditor").Template(p =&gt; p.RoleList);
          columns.Command(command =&gt; { command.Edit(); command.Destroy(); });
      })
      .Filterable()
      .Sortable()
      .Resizable(r =&gt; r.Columns(true))
      .Editable(editable =&gt; { editable.Mode(GridEditMode.InLine); editable.DisplayDeleteConfirmation("Are you sure you want to remove this user?"); })
      .HtmlAttributes(new { style = "min-height:90px;max-height:450px;" })
      .DataSource(dataSource =&gt; dataSource
          .Ajax()
          .Events(events =&gt; events.Error("error_handler"))
          .Model(model =&gt;
          {
              model.Id(p =&gt; p.UserId);
              model.Field(p =&gt; p.UserId).Editable(false);
              model.Field(p =&gt; p.FirstName).Editable(true);
              model.Field(p =&gt; p.LastName).Editable(true);
              model.Field(p =&gt; p.UserName).Editable(false);
              model.Field(p =&gt; p.RoleList).Editable(true);
          }
          ).Read(read =&gt; read.Action("GetAllUsers", "Admin").Type(HttpVerbs.Get))
          .Update(update =&gt; update.Action("UpdateUser", "Admin").Type(HttpVerbs.Post))
          .Destroy(update =&gt; update.Action("DeleteUser", "Admin").Type(HttpVerbs.Post))
      )
  )
  </code></pre>
  
  <p>And my editor template, which uses the Kendo MultiSelect, is defined as:</p>
  
  <pre><code>@Html.Kendo().MultiSelect().Name("RoleList").DataTextField("Text").DataValueField("Id").BindTo((IEnumerable&lt;Models.RoleBasicModel&gt;)ViewData["uroles"]).Placeholder("No role selected")
  </code></pre>
  
  <p>Is there any obvious reason why the data sent back to the server is empty? I'm suspecting I'm missing something from the MultiSelect control that'll define the correct model to use. I have referred to <a href="http://www.kendoui.com/code-library/mvc/grid/using-multiselect-in-grid.aspx" rel="nofollow noreferrer">the test project</a> that is often cited as an answer to similar questions, but I've had no joy with that either.</p>
  
  <p>As requested, (an abridged version of) the controller I'm using:</p>
  
  <pre><code> public ActionResult ManageUsers()
      {            
          PopulateRoles();
          return View();
      }
  
      private void PopulateRoles()
      {
          ViewData["uroles"] = new ApplicationDbContext().Roles.Select(r =&gt; new RoleBasicModel { Text = r.Name, Id = r.Id }).ToList();
      }
  
      [AcceptVerbs(HttpVerbs.Get)]
      public ActionResult GetAllUsers([DataSourceRequest]DataSourceRequest request)
      {
          using (var context = new ApplicationDbContext())
          {
              var allUsers = context.Users.ToList().Select(x =&gt;
                  new UserInfo
                  {
                      UserName = x.UserName,
                      UserId = x.Id,
                      FirstName = x.FirstName,
                      LastName = x.LastName,
                      RoleList = x.Roles.Select(p =&gt; new RoleBasicModel { Text = p.Role.Name, Id = p.RoleId }),
                      Roles = string.Join(", ", x.Roles.Select(p =&gt; p.Role.Name).ToList())
                  }).ToList();
              return Json(allUsers.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
          }
      }
  
      [AcceptVerbs(HttpVerbs.Post)]
      public ActionResult UpdateUser([DataSourceRequest] DataSourceRequest request, UserInfo user)
      {
          if (user != null &amp;&amp; ModelState.IsValid)
          {
              using (var context = new ApplicationDbContext())
              {
  // Do something with the user details
              }
          }
  
          return Json(new[] { user }.ToDataSourceResult(request, ModelState));
      }
  </code></pre>
  
  <p>EDIT: Upon viewing the data posted back to the server, it appears as if the array of selected objects isn't parsed correctly. The format should be <strong>RoleList[0].Id:123456</strong> but is instead <strong>RoleList[0][Id]:123456</strong>. I'm thinking this could be a problem with the MultiSelect control, rather than any code I've written?</p>