Dropdown list in Grid not getting bind with changed value

3 posts, 0 answers
  1. Sandip
    Sandip avatar
    2 posts
    Member since:
    Apr 2019

    Posted 25 Feb 2020 Link to this post

    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. Sandip
    Sandip avatar
    2 posts
    Member since:
    Apr 2019

    Posted 25 Feb 2020 Link to this post

    Its holding with olddata. Not reflecting new data. Sorry for typo
  3. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 27 Feb 2020 Link to this post

    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:

    https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/editor-templates#creating-custom-editors-for-bound-properties

    Regards,
    Alex Hajigeorgieva
    Progress Telerik

    Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Back to Top