Hi,
I'm working on a user management system in asp.net mvc, where I display all my users in a grid using KendoUI. However, I have a string based list of user roles, which I need to display as a dropdown in my edit view. Since my view is generated based on my model, I'm not really sure how to accomplish this.
Here's how my model looks like:
Here's my grid:
I don't really need to display the column with selected roles in the grid, but what I do need is the possibility to add / edit them from the popup. Preferably as a multiselect list, as a user could have several roles. I've tried following this example, but can't seem to manage to get it right.
See the attached images for a description of how it looks now.
I'm working on a user management system in asp.net mvc, where I display all my users in a grid using KendoUI. However, I have a string based list of user roles, which I need to display as a dropdown in my edit view. Since my view is generated based on my model, I'm not really sure how to accomplish this.
Here's how my model looks like:
public class UserModel{ #region Properties [Display(Name = @"Username")] [Required] public string UserName { get; set; } [Required] public string Name { get; set; } [Display(Name = @"E-mail")] [EmailAddress] public string Email { get; set; } public string Phone { get; set; } public string Company { get; set; } [DataType(DataType.Password)] [Display(Name = @"Password")] [Required] public string PasswordHash { get; set; } [Display(Name= @"Roles")] public List<string> UserRoles { get; set; } [ScaffoldColumn(false)] public string UserRoleIcon { get; set; } [ScaffoldColumn(false)] public string UserRoleIconInverted { get; set; } #endregion public UserModel() { } public UserModel(UserContract userContract) { SetupUserModel(userContract); } private void SetupUserModel(UserContract userContract) { UserName = userContract.UserName; Name = userContract.Name; Email = userContract.Email ?? ""; Phone = userContract.Phone ?? ""; Company = userContract.Company ?? ""; PasswordHash = userContract.PasswordHash ?? ""; UserRoles = new List<string>(); if (userContract.UserRoles != null) { foreach (var userRole in userContract.UserRoles) { UserRoles.Add(userRole); } } SelectUserRoleIcon(UserRoles); } // TODO: Hierarchy on roles and selecting images? private void SelectUserRoleIcon(IEnumerable<string> userRoles) { foreach (var userRole in userRoles) { switch (userRole.ToLower()) { case "administrator": UserRoleIcon = "Administrator.png"; UserRoleIconInverted = "Administrator_Black.png"; break; case "operator": UserRoleIcon = "Operator.png"; UserRoleIconInverted = "Operator_Black.png"; break; case "supervisor": UserRoleIcon = "Supervisor.png"; UserRoleIconInverted = "Supervisor_Black.png"; break; default: UserRoleIcon = "Guest.png"; UserRoleIconInverted = "Guest_Black.png"; break; } } }}Here's my grid:
@(Html.Kendo().Grid<Stimline.Xplorer.Services.Models.User.UserModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.UserName); columns.Bound(p => p.Name); columns.Bound(p => p.Email); columns.Bound(p => p.Phone); columns.Bound(p => p.UserRoles); columns.Command(command => { command.Edit(); }).Width(160); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.PopUp)) .Pageable() .Sortable() .Scrollable() .HtmlAttributes(new { style = "height:430px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.UserName)) .Create(update => update.Action("EditingPopup_Create", "UserManagement")) .Read(read => read.Action("EditingPopup_Read", "UserManagement")) .Update(update => update.Action("EditingPopup_Update", "UserManagement")) //.Destroy(update => update.Action("EditingPopup_Destroy", "Grid")) ) )I don't really need to display the column with selected roles in the grid, but what I do need is the possibility to add / edit them from the popup. Preferably as a multiselect list, as a user could have several roles. I've tried following this example, but can't seem to manage to get it right.
See the attached images for a description of how it looks now.
3 Answers, 1 is accepted
0
Hi Nicklas,
For your convenience I created small example (attached to the current thread) of using both MultiSelect and DropDownList widgets inside custom PopUp editor template which you can use as a baseline to achieve the desired behavior. The project is self explanatory.
Regards,
Vladimir Iliev
Telerik
For your convenience I created small example (attached to the current thread) of using both MultiSelect and DropDownList widgets inside custom PopUp editor template which you can use as a baseline to achieve the desired behavior. The project is self explanatory.
Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Nicklas
Top achievements
Rank 1
Rank 1
answered on 16 May 2014, 11:03 AM
Thanks! I've been able to get it working! :) The only problem now is that I can't seem to populate the actual roles column in the grid with the selected values.
Where UserRoles is a List<Role> in my UserModel.
Console windows says this:
Uncaught TypeError: Cannot read property 'length' of null.
Suggestions?
<script type="text/kendo" id="rolesTemplate"> <ul> #for(var i = 0; i< data.length; i++){# <li>#:data[i].Name#</li> #}# </ul></script><script type="text/javascript"> var rolesTemplate = kendo.template($("#rolesTemplate").html(), { useWithBlock: false });</script><div class="container"> <div class="row"> <div class="col-md-12 sl-table"> @(Html.Kendo().Grid<UserModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.UserName); columns.Bound(p => p.Name); columns.Bound(p => p.Email); columns.Bound(p => p.Phone); columns.Bound(p => p.UserRoles).ClientTemplate("#=rolesTemplate(UserRoles)#"); columns.Bound(p => p.Disabled).Width(150); columns.Command(command => { command.Edit(); }).Width(100); }) .ToolBar(toolbar => toolbar.Create()) .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CustomPopUpTemplate")) .Pageable() .Sortable() .Scrollable() .HtmlAttributes(new { style = "height:500px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(10) .Events(events => events.Error("error_handler")) .Model(model => model.Id(p => p.UserName)) .Create(update => update.Action("EditingPopup_Create", "UserManagement")) .Read(read => read.Action("EditingPopup_Read", "UserManagement")) .Update(update => update.Action("EditingPopup_Update", "UserManagement")) ) ) </div> </div>Where UserRoles is a List<Role> in my UserModel.
Console windows says this:
Uncaught TypeError: Cannot read property 'length' of null.
Suggestions?
0
Hi Nickalas,
From the provided information it seems that the UserRoles are null in the column template. In current case I would suggest to first check if the "data" parameter is not null before executing the loop:
Also you should define default value for the "UserRoles" in the DataSource Model definition. Please check the suggested change below:
If the above changes doesn't help, please provide runable example where the issue is reproduced in order to investigate further current behavior.
Kind Regards,
Vladimir Iliev
Telerik
From the provided information it seems that the UserRoles are null in the column template. In current case I would suggest to first check if the "data" parameter is not null before executing the loop:
<script type="text/kendo" id="rolesTemplate"> <ul> #if(data){# #for(var i = 0; i< data.length; i++){# <li>#:data[i].Name#</li> #}# #}# </ul></script>Also you should define default value for the "UserRoles" in the DataSource Model definition. Please check the suggested change below:
.DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Field(p => p.UserRoles).DefaultValue(new List<string>());If the above changes doesn't help, please provide runable example where the issue is reproduced in order to investigate further current behavior.
Kind Regards,
Vladimir Iliev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.