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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Platform:

Replies:

150560 Jan 11,2020 06:43 AM UTC ASP.NET Core - EJ 2 0
loading
Tags: DataGrid
Ronald Walcott
Asked On January 11, 2020 06:43 AM UTC

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>


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon