or
<div class="form-group"> @Html.Label("User Role(s)") @{ (Html.Kendo().MultiSelectFor(model => model.SelectedRoles) .Name("SelectedRoles") .HtmlAttributes(new {style = "width: 400px"}) .Placeholder("Please select role(s)...") .DataTextField("Name") .DataValueField("Id") .DataSource(source => { source.Read(read => { read.Url("/api/gmcmembership/roles").Type(HttpVerbs.Get); }); }) .Value(Model.SelectedRoles) .AutoBind(false) ).Render(); }</div>using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;namespace GMCWebApplication.Areas.admin.Models{ public class UserDetailViewModel { [HiddenInput] public string Id { get; set; } public int CompanyCode { get; set; } public string UserType { get; set; } public int Question1 { get; set; } public int Question2 { get; set; } public string Question1Answer { get; set; } public string Question2Answer { get; set; }// public string PasswordHash { get; set; } public string PhoneNumber { get; set; } public string NewPassword { get; set; } public List<UserRoleViewModel> SelectedRoles { get; set; } public List<UserRoleViewModel> AllRoles { get; set; } }}using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace GMCWebApplication.Areas.admin.Models{ public class UserRoleViewModel { public string Id { get; set; } public string Name { get; set; } }}[System.Web.Http.HttpGet][System.Web.Http.Route("roles")]public IHttpActionResult GetRoles(){ try { var list = new List<UserRoleViewModel>(); using (var context = new ApplicationDbContext()) { list = context.Roles.Select(p => new UserRoleViewModel { Id = p.Id, Name = p.Name }) .ToList<UserRoleViewModel>(); } return Ok(list); } catch (Exception ex) { Elmah.ErrorSignal.FromCurrentContext().Raise(ex); return InternalServerError(); }}@(Html.Kendo().Grid(Model) .Name("ServiceGrid") .Pageable(action => action.Enabled(true) .ButtonCount(8) /*.PageSizes(new[] {25, 100, 500}) TODO this yields an error in the current Telerik */ .Refresh(true)) .DataSource(data => data .Ajax() .Events(events => events.Error("grid_onError")) .Model(model => { model.Id(m => m.Name); }) .Read(read => read.Action("Get", "Service")) .Group(g => g.Add(f => f.Host)) ) .Columns(column => { column.Bound(ci => ci.FriendlyName).Title("Service"); column.Bound(ci => ci.Host).Hidden(); column.Bound(ci => ci.Status); column.Command(cmd => cmd.Custom("Restart Service").Click("onClickRestartService")).Width(120).Title("Actions"); }))Uncaught TypeError: undefined is not a functionkendo.web.min.js:11 ht.extend.pageSizejquery-2.1.1.js:7328 (anonymous function)jquery-2.1.1.js:375 jQuery.extend.eachjquery-2.1.1.js:139 jQuery.fn.jQuery.eachjquery-2.1.1.js:7320 jQuery.fn.extend.valkendo.web.min.js:20 u.extend.initkendo.web.min.js:29 ut.ui.DataBoundWidget.extend._pageablekendo.web.min.js:28 ut.ui.DataBoundWidget.extend.initkendo.web.min.js:10 (anonymous function)pageSize:function(e){var n=this;return e!==t?(n._query({pageSize:e,page:1}),t):n.take()},sortUncaught TypeError: undefined is not a functionkendo.dataviz.min.js:12 ht.extend.successkendo.dataviz.min.js:12 n.trigger.n.online.n.transport.read.successkendo.dataviz.min.js:11 n.successjquery-2.1.1.js:3073 firejquery-2.1.1.js:3185 self.fireWithjquery-2.1.1.js:8251 donejquery-2.1.1.js:8598 (anonymous function)a._pristineData=e.slice(0),a._detachObservableParents()