We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Unable to add role names to a user using a dialog template

Good day
I am trying to add roles to users using a dialog template called from a toolbar item on a datagrid 

I have a UserListViewModel and a RoleViewModel

    public class UserListViewModel
    {
        public string Id { get; set; }
        public string UserName { get; set; }
        public string Name { get; set; }
        public string Surname { get; set; }
        public string FirstName { get; set; }
        public string MiddleName { get; set; }
        public string RoleNames { get; set; }
        public Boolean LockoutEnabled { get; set; }
        public string EmployeeNumber { get; set; }
        public List<UserRolesViewModel> UserRoles { get; set; }
    }

    public class UserRolesViewModel
    {
        public string Id { get; set; }
        public string RoleName { get; set; }
        public Boolean HasRole { get; set; }
    }

establishing a one to many relationship between users and roles.

I created a grid

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" actionComplete="complete" toolbarClick="toolbarClick" toolbar=toolbarItems >
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings>
    <e-grid-pagesettings pagesize="10"></e-grid-pagesettings>
    <e-data-manager url="/UserManagement/UserEdit/UsersDataSource" updateUrl="/UserManagement/UserEdit/Update" removeUrl="/UserManagement/UserEdit/Delete" adaptor="UrlAdaptor"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="Id" headerText="ID" isPrimaryKey="true" visible="false"></e-grid-column>
        <e-grid-column field="UserName" headerText="Username" type="string" width="120"></e-grid-column>
        <e-grid-column field="Name" headerText="Name" type="string" width="120"></e-grid-column>
        <e-grid-column field="EmployeeNumber" headerText="Employee No" type="string" width="120"></e-grid-column>
        <e-grid-column field="RoleNames" headerText="Role names" type="string" width="120"></e-grid-column>
        <e-grid-column field="LockoutEnabled" headerText="Locked Out" displayAsCheckBox="true" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

with a modified toolbar

@{
    List<object> toolbarItems = new List<object>();
    toolbarItems.Add("Edit");
    toolbarItems.Add("Delete");
    toolbarItems.Add("Update");
    toolbarItems.Add("Cancel");
    toolbarItems.Add(new { text = "Roles", tooltipText = "Roles", prefixIcon = "e-claim-icon", id = "Roles" });
}

intercepted the toolbar click

    function toolbarClick(args) {
        console.log("args.item.id " + args.item.id);
        if (args.item.id === 'Roles') {
            var data = document.getElementById('Grid').ej2_instances[0].getSelectedRecords();
            $("#EditType").val("Roles");
            document.getElementById('Grid').ej2_instances[0].startEdit(data);
        }
        else if (args.item.id === 'Grid_edit') {
            $("#EditType").val("");
        }
    }

and used a hidden field to determine the edit

<input type="hidden" id="EditType" value="" />

and call one template to edit user information and the other to edit roles

    function complete(args) {
          if (args.requestType === 'beginEdit' || args.requestType === 'add') {
                let spinner = ej.popups.createSpinner({ target: args.dialog.element });
                ej.popups.showSpinner(args.dialog.element);
                let dialog = args.dialog;
                // change the header of the dialog
                dialog.header = args.requestType === 'beginEdit' ? 'Edit Record' : 'New Record';
                if ($("#EditType").val() == "Roles") {
                    dialog.header = "Edit roles for " + JSON.parse(JSON.stringify(args.rowData)).Name
                }
                if (args.requestType === 'beginEdit' && $("#EditType").val() != "Roles") {
                    var ajax = new ej.base.Ajax({
                        url: "@Url.Action("Editpartial", "UserEdit", new { Area = "UserManagement" })", //render the partial view
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({ value: args.rowData })
                    });
                    ajax.send().then(function (data) {
                        appendElement(data, args.form); //Render the edit form with selected record
                        args.form.elements.namedItem('UserName').focus(); //set the focus for editing to username
                        ej.popups.hideSpinner(args.dialog.element);
                    }).catch(function (xhr) {
                        console.log(xhr);
                        ej.popups.hideSpinner(args.dialog.element);
                    });
                }
                else if (args.requestType === 'beginEdit' && $("#EditType").val() == "Roles") {
                    var ajax = new ej.base.Ajax({
                        url: "@Url.Action("EditRolesPartial", "UserEdit", new { Area = "UserManagement" })", //render the partial view
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({ value: args.rowData })
                    });
                    ajax.send().then(function (data) {
                        appendElement(data, args.form); //Render the edit form with selected record
                        ej.popups.hideSpinner(args.dialog.element);
                    }).catch(function (xhr) {
                        console.log(xhr);
                        ej.popups.hideSpinner(args.dialog.element);
                    });
                }
            }
        }

When I select any of the checkboxes created by iterating the list the model is not being updated 

@model CaribPayroll.Areas.UserManagement.Models.UserListViewModel
@*//define the model for store the model values*@
@using Syncfusion.EJ2
    <div>
        <input asp-for="Id" value=@Model.Id disabled type='hidden' />
        <div class="form-row">
            @{ int i = 0; }
            @foreach (var item in Model.UserRoles)
            {
            <div class="form-group col-md-4">
                @{string IDField = "UserRoles_" + i + "_HasRole";}
                <ejs-checkbox id="@IDField" ejs-for="@Model.UserRoles[i].HasRole" label="@item.RoleName" ></ejs-checkbox>
            </div>
                //create two hidden fields for the id and rolename values
                <input type="hidden" asp-for="UserRoles[i].Id" />
                <input type="hidden" asp-for="UserRoles[i].RoleName" />
                i++;
            }
        </div>
    </div>
<ejs-scripts></ejs-scripts>


Loader.
Live Chat Icon For mobile
Up arrow icon