Hi I would like to develop a user management screen using Telerik grid having one drop down column from which user can able select the role. But when user selecting any role from dropdown its not getting bind in backend. Please find attached code below.
Role.cshtml (Its under ..\Views\Shared\EditorTemplates)
@model IT_GRCData_Service.ViewModel.RoleOptionViewModel
@(Html.Kendo().DropDownList().Name("roleOption")
.DataTextField("PortalRoleName")
.DataValueField("PortalRoleId")
.DataSource(d => d
.Read(r => r.Action("Index", "Role"))
)
.ValuePrimitive(true)
.AutoBind(true)
)
RoleControler.cs
public class RoleController : Controller
{
private GRCPortalEntities db = new GRCPortalEntities();
public JsonResult Index()
{
var roleOption = db.PORTAL_ROLE.Select(s => new RoleOptionViewModel
{
PortalRoleId = s.PORTAL_ROLE_ID,
PortalId = s.PORTAL_ID,
PortalRoleName = s.PORTAL_ROLE_NAME,
PortalRoleDescription = s.PORTAL_ROLE_DESCRIPTION,
IsActive = s.IS_ACTIVE
});
roleOption = roleOption.Where(r => r.IsActive);
return this.Json(roleOption, JsonRequestBehavior.AllowGet);
}
}
RoleOptionViewModel.cs
public class RoleOptionViewModel
{
public int PortalRoleId { get; set; }
public int PortalId { get; set; }
public string PortalRoleName { get; set; }
public string PortalRoleDescription { get; set; }
public bool IsActive { get; set; }
}
Above are used for dropdown template..
Below are used for grid design..
UseManagementViewModel.cs
public class UserManagementViewModel
{
public string Guid { get; set; }
public string UserName { get; set; }
public string PwCPreferredEmail { get; set; }
public int PortalUserId { get; set; }
public bool IsActive { get; set; }
[UIHint("Role")]
public RoleOptionViewModel RoleOptionViewModelProperty { get; set; }
}
UserManagement\Index.cshtml
@using IT_GRCData_Service.ViewModel;
@{
ViewBag.Title = "User Management";
}
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title" style="font-size: 14px; ">
<b style="padding-right:50px">User Management</b>
</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px">help?</div>
</div>
<div class="panel-body">
@(Html.Kendo().Grid<UserManagementViewModel>()
.Name("gridUserManagement")
.Columns(columns =>
{
columns.Bound(c => c.UserName).Title("User Name");
columns.Bound(c => c.PwCPreferredEmail).Title("Preferred Mail");
columns.Bound(c => c.Guid).Title("User Guid");
columns.Bound(c => c.RoleOptionViewModelProperty).ClientTemplate("#: RoleOptionViewModelProperty.PortalRoleName #").Title("Role");
columns.Bound(c => c.IsActive).Title("Is Active").ClientTemplate("<input type='checkbox' #= IsActive ? checked='checked' :'' # />");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(t => t.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.PortalUserId);
model.Field(p => p.UserName).Editable(false);
model.Field(p => p.Guid).Editable(false);
model.Field(p => p.PwCPreferredEmail).Editable(false);
//model.Field(p => p.RoleOptionViewModelProperty).Editable(true);
model.Field(p => p.RoleOptionViewModelProperty).DefaultValue(ViewData["roleOption"] as IT_GRCData_Service.ViewModel.RoleOptionViewModel);
})
.PageSize(20)
.Create(update => update.Action("EditingPopup_Create", "Scoring"))
.Read(read => read.Action("User_Read", "UserManagement"))
.Update(update => update.Action("User_Update", "UserManagement"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Scoring"))
)
)
</div>
<script type="text/javascript">
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
UserManagementController .cs
public class UserManagementController : Controller
{
private GRCPortalEntities db = new GRCPortalEntities();
// GET: UserManagement
public ActionResult Index()
{
ViewData["roleOption"] = db.PORTAL_ROLE.Select(s => new RoleOptionViewModel
{
PortalRoleId = s.PORTAL_ROLE_ID,
PortalId = s.PORTAL_ID,
PortalRoleName = s.PORTAL_ROLE_NAME,
PortalRoleDescription = s.PORTAL_ROLE_DESCRIPTION,
IsActive = s.IS_ACTIVE
}).First();
return View();
}
public ActionResult Editing_Popup()
{
return View();
}
public ActionResult User_Read([DataSourceRequest] DataSourceRequest request)
{
try
{
var userListQuery = db.PORTAL_USER.AsQueryable();
userListQuery = userListQuery.Where(s => s.PORTAL_USER_ROLE.PORTAL_ROLE_ID > 0);
var userList = userListQuery.Select(p => new UserManagementViewModel
{
UserName = p.UNIQUE_NAME,
Guid = p.USER_GUID,
PwCPreferredEmail = p.PWC_PREFERRED_EMAIL,
IsActive = p.IS_ACTIVE,
PortalUserId = p.PORTAL_USER_ID,
RoleOptionViewModelProperty = new RoleOptionViewModel
{
PortalRoleId = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_ID,
PortalId = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ID,
PortalRoleName = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_NAME,
PortalRoleDescription = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_DESCRIPTION,
IsActive = p.PORTAL_USER_ROLE.PORTAL_ROLE.IS_ACTIVE
}
});
var userListResult = userList.ToDataSourceResult(request);
return Json(userListResult);
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult User_Update([DataSourceRequest] DataSourceRequest request, UserManagementViewModel userObj)
{
if (userObj != null && ModelState.IsValid)
{
userObj.RoleOptionViewModelProperty //Data not binding with dropdown selection change
}
return Json(new[] { userObj }.ToDataSourceResult(request, ModelState));
}
}
In User_Update dropdown selection change not bunding with old data. Its holding with new data
2 Answers, 1 is accepted
Rank 1
Hello, Sandip,
Thank you for the provided code snippets and explanations.
It appears that the editor does not follow the naming convention. The Name() must be the same as the property name so the binding can occur:
@(Html.Kendo().DropDownList().Name("RoleOptionViewModelProperty")This is explained in the documentation:
Regards,
Alex Hajigeorgieva
Progress Telerik