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>
