When I create a row dynamically, the checkbox which is within the row needs to be checked if the "AutoInclude all in Group" checkbox is checked. The row is created fine as well as its checkbox, and as I step through the code, I see that the checked value I am trying to assign to the checkbox is correct, however setting the checkbox checked property does not work. I realize this may be a DOM issue. I have looked for an event when table row added, so that I could add a listener to check the checkbox at that point, but cannot find that event.
Please see my code and advise. I appreciate any input on this!
addUserToGroup(groupName) {
var userEmail = document.getElementById(groupName + "_userLookupEmail").value;
var groupCheckBox = document.getElementById(groupName + '_checkbox');
if (userEmail == '') {
return alert("No user selected from Users Search Box.")
}
var table = document.getElementById(groupName);
var row;
var cell_item;
var cell_autoInclude;
var cellTrash;
var returnValue = this.VerifyUserIsNotAlreadyInGroup(groupName, userEmail);
if (returnValue == "") {
// create new row at desired position
// using length -2 because the last row is a checkbox to make entire group autocomplete, and want to insert above that
row = table.getElementsByTagName('tbody')[0].insertRow(table.rows.length - 2)
// Insert new cells (<td> elements) at the <tr> element:
cell_item = row.insertCell(0);
cell_item.innerHTML = userEmail;
document.getElementById(groupName + "_userLookup").value = "";
document.getElementById(groupName + "_userLookupEmail").value = "";
cell_autoInclude = row.insertCell(1);
//TODO Karrie - 07/18/23 Need to fix the fact that the checked state is not holding for the checkbox
cell_autoInclude.innerHTML = "<span style='display: block; text-align: center; padding-top: 0px;'><label class='label' style='margin-left: 0px'><input id='" + groupName
+ '-' + userEmail + '_checkbox' + "' type=checkbox checked='" + groupCheckBox.checked + "' style='margin-left: 0px'></label></span>";
cellTrash = row.insertCell(2);
cellTrash.innerHTML = "<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'><i id='"
+ groupName + 'x' + userEmail + '_trash' + "' class='fa fa-trash' style='margin-left: 0')></i></span>"
}
And the template:
<template id="email-template">
<div class="container border col-md-12" style="margin-top:10px;">
<tabs style="padding-top:10px;">
<tab title="Task Summary">
<table id="emailGroupsTable" class="table userForm" style="margin-bottom:0px">
<!--class userForm must be here for nedLookup!!-->
<thead>
<tr>
<th>Email Groups</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<template v-for="emailGroupMembers in emailGroupMembersAllList">
<tr class="emailGroup-header" @click="toggleEmailGroup(emailGroupMembers.EmailGroup.Id)" :title="`Click to collapse/expand the ${emailGroupMembers.EmailGroup.GroupName} Email Group`">
<td colspan="5"><b>{{emailGroupMembers.EmailGroup.GroupName}}</b> <i :class="['fa', opened.includes(emailGroupMembers.EmailGroup.Id) ? 'fa-chevron-down' : 'fa-chevron-up']"></i></td>
</tr>
<tr v-if="opened.includes(emailGroupMembers.EmailGroup.Id)">
<td class="col-md-5">
<table style="width:100%">
<tr>
<td>
<table :id="emailGroupMembers.EmailGroup.GroupName" class="table table-striped table-bordered">
<thead>
<tr>
<th style="width: 10%">{{emailGroupMembers.EmailGroup.GroupName}} Members</th>
<th style="width: 10%; text-align: center;">AutoInclude</th>
<th style="width: 10%; text-align: center;">Delete</th>
</tr>
</thead>
<tr v-for="user in emailGroupMembers.EmailGroup.EmailGroupUsers">
<td class="col-md-8">{{user.Email}}</td>
<td class="userEmail col-md-2">
<span style='display: block; text-align: center; padding-top: 0;'>
<label class="label" style='margin-left: 0'>
<input :id="emailGroupMembers.EmailGroup.GroupName + '-' + user.Email + '_checkbox'" type="checkbox"
:checked="user.AutoInclude" style='margin-left: 0'
@click="manageIndividualCheckboxSelect(emailGroupMembers.EmailGroup.GroupName + '-' + user.Email)">
</label>
</span>
</td>
<td class="col-md-2">
<span style='display: block; text-align: center; padding-top: 0;' class='trash-icon'>
<i :id="emailGroupMembers.EmailGroup.GroupName + 'x' + user.Email + '_trash'" class='fa fa-trash' style='margin-left: 0'></i>
</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>
<input :id="emailGroupMembers.EmailGroup.GroupName + '_checkbox'" type="checkbox"
:checked="emailGroupMembers.EmailGroup.AutoInclude"
@click="manageGroupCheckboxSelect(emailGroupMembers.EmailGroup.GroupName)"> AutoInclude Entire Group
</label>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col-md-5">
<table style="width:100%;">
<tr>
<td>
<table style="margin-bottom:20px">
<tr>
<td class="col-md-4" style="padding-right:5px">
<label style="display: inline-block;">Group Name:</label>
<input :id="emailGroupMembers.EmailGroup.GroupName + '_name'" type="text" :value="emailGroupMembers.EmailGroup.GroupName" style="width:100%" class="form-control" />
</td>
<td class="col-md-8">
<label>Group Description:</label>
<input :id="emailGroupMembers.EmailGroup.GroupDescription + '_description'" type="text" :value="emailGroupMembers.EmailGroup.GroupDescription" style="width:100%" class="form-control" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="col-md-10">
<label>User Lookup</label>
<input type="text" :id="emailGroupMembers.EmailGroup.GroupName + '_userLookup'"
:name="emailGroupMembers.EmailGroup.GroupName + '_userLookup'" value=""
class="nedLookup form-control"
placeholder="Last Name, FirstName" />
<input :id="emailGroupMembers.EmailGroup.GroupName + '_userLookupEmail'" type="hidden" data-ned="Email" />
</td>
<td class="col-md-2">
<button type="button" style="margin-top:24px" class="btn btn-primary" @click="addUserToGroup(emailGroupMembers.EmailGroup.GroupName)" role="button">
Add User to Group
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="col-md-1" style="vertical-align:bottom">
<button type="button" class="btn btn-danger" @click="deleteGroup(emailGroupMembers.EmailGroup)" role="button">
Delete Group
</button>
</td>
<td class="col-md-1" style="vertical-align:bottom">
<button type="button" class="btn btn-primary" @click="saveExistingGroup(emailGroupMembers.EmailGroup)" role="button">
Save Group
</button>
</td>
</tr>
</template>
</tbody>
</table>
<div class="text-center" style="border-top:solid; border-width: thin; border-color:gainsboro">
<btn type="button" class="btn btn-primary" style="margin-bottom:10px; margin-top:10px" @click="addNewEmailGroup" role="button"><i class="fa fa-plus-circle"></i> Add Email Group </btn>
</div>
</tab>
<!-- Survey Email settings-->
<tab title="Survey">
<table class="table">
<thead>
<tr>
<th>Coming Soon</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</tab>
</tabs>
</div>
</template>
<style scoped>
.emailGroup-header {
cursor: pointer;
}
.emailGroup-header:hover {
background-color: #E7E7E7;
}
.trash-icon i {
color: #e74c3c;
cursor: pointer;
}
</style>
I need to set the dynamically added checkbox inside of the dynamically added row, to checked, based off of the group's checkbox checked value.
