I am having an issue with the mutliselect not being populated. Here is my read action which is used to populate the user grid with a list of users. Each of the users can have one or more roles. The RoleId is not an interger.
public ActionResult User_Read([DataSourceRequest] DataSourceRequest request)
{
var adminRole = RoleManager.FindByNameAsync("Admin").Result;
var roles = RoleManager.Roles;
var currentUser = HttpContext.User;
var isAdmin = currentUser.IsInRole("Admin");
IQueryable<ApplicationUser> users;
if (isAdmin)
users = UserManager.Users;
else
users = UserManager.Users.Where(e => e.Roles.Any(r => r.RoleId != adminRole.Id));
var result = users.Select(
u =>
new UserViewModel
{
Id = u.Id,
FirstName = u.FirstName,
LastName = u.LastName,
Email = u.Email,
EmailConfirmed = u.EmailConfirmed,
IsAccountLocked = u.LockoutEndDateUtc == null ? false : u.LockoutEndDateUtc > DateTime.Now,
RolesList = u.Roles.Select(ur =>
new SelectListItem {
Value = ur.RoleId,
Text = (roles.FirstOrDefault(r => r.Id == ur.RoleId).Name)
}
)
});
return Json(result.ToDataSourceResult(request));
}
@(Html.Kendo().Grid<iTrak.Web.Models.UserViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.Email);
columns.Bound(p => p.EmailConfirmed);
columns.Bound(p => p.IsAccountLocked);
columns.Bound(p => p.RolesList).Hidden(true);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar =>
{
//toolbar.Create();
toolbar.Template(@<text>
<a class="k-button k-button-icontext k-grid-add" href="/iTrak/UsersAdmin/User_Read?grid-mode=insert"><span class="k-icon k-i-add"></span>Add</a>
</text>);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("User").Window(w => w.Title("Edit User").Width(700).Height(500)))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events =>
{
events.Error("onErrorHandler");
events.RequestEnd("onGridRequestEnd");
})
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("User_Create", "UsersAdmin").Data("onUserCreate"))
.Read(read => read.Action("User_Read", "UsersAdmin"))
.Update(update => update.Action("User_Update", "UsersAdmin"))
.Destroy(update => update.Action("User_Destroy", "UsersAdmin"))
)
)
Here is my grid
@(Html.Kendo().Grid<iTrak.Web.Models.UserViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName);
columns.Bound(p => p.LastName);
columns.Bound(p => p.Email);
columns.Bound(p => p.EmailConfirmed);
columns.Bound(p => p.IsAccountLocked);
columns.Bound(p => p.RolesList).Hidden(true);
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
})
.ToolBar(toolbar =>
{
//toolbar.Create();
toolbar.Template(@<text>
<a class="k-button k-button-icontext k-grid-add" href="/iTrak/UsersAdmin/User_Read?grid-mode=insert"><span class="k-icon k-i-add"></span>Add</a>
</text>);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("User").Window(w => w.Title("Edit User").Width(700).Height(500)))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events =>
{
events.Error("onErrorHandler");
events.RequestEnd("onGridRequestEnd");
})
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("User_Create", "UsersAdmin").Data("onUserCreate"))
.Read(read => read.Action("User_Read", "UsersAdmin"))
.Update(update => update.Action("User_Update", "UsersAdmin"))
.Destroy(update => update.Action("User_Destroy", "UsersAdmin"))
)
)
I have a user template which is used to edit the user
@model iTrak.Web.Models.UserViewModel
<div>
@Html.HiddenFor(m => m.Id)
<div class="form-group">
@Html.LabelFor(m => m.FirstName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.LastName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.EmailConfirmed, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.Kendo().CheckBoxFor(m => m.EmailConfirmed).HtmlAttributes(new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.RolesList, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@(Html.Kendo().MultiSelectFor(m => m.RolesList)
.HtmlAttributes(new { style = "width: 250px" })
.ClearButton(true)
.AutoClose(false)
.DataTextField("RoleName")
.DataValueField("RoleId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Role_Read", "RolesAdmin");
});
})
)
</div>
</div>
</div>
Role read action to populate the list
public ActionResult Role_Read()
{
IQueryable<IdentityRole> roles = RoleManager.Roles;
var result = roles.Select(n => new
{
RoleId = n.Id,
RoleName = n.Name
}).OrderBy(o => o.RoleName);
return Json(result, JsonRequestBehavior.AllowGet);
}
UserViewModel
public class UserViewModel
{
public string Id { get; set; }
[DisplayName("First Name")]
[Required(AllowEmptyStrings = false, ErrorMessage = "First Name required")]
public string FirstName { get; set; }
[DisplayName("Last Name")]
[Required(AllowEmptyStrings = true, ErrorMessage = "Last Name required")]
public string LastName { get; set; }
[DisplayName("Email")]
[Required(AllowEmptyStrings = false, ErrorMessage = "Email required")]
[Display(Name = "Email")]
[EmailAddress]
public string Email { get; set; }
[DisplayName("Email Confirmed")]
public bool EmailConfirmed { get; set; }
[DisplayName("Is Account Locked")]
public bool IsAccountLocked { get; set; }
[DisplayName("Roles")]
public IEnumerable<SelectListItem> RolesList { get; set; }
}
The MultiSelectFor is populated with the list of roles from the database, but I can't get the list populated with the selected values from the user. I have tried the value but this is expecting a list of integers. How do i populate the MultiSelect when the user edits a user? Also do i need to have the hidden roles column in the grid?
Regards
Graham