User Permission - Handling multiple Checkboxes in single row

Hi guyz,

I am designing USER PERMISSION component in AngularJS 6 and ASP.NET MVC 5

I want to Design screen like this in AngularJS,

When i am using ngModel - then all checkboxes are getting selected

Please suggest solutions... Waiting for help desperately...

Here is my code for UserRights.htm

<div class="card">
<div class="card-header">
<h4 class="card-title">User Rights Headerh4>
div>
<div class="card-body">
<button class="btn btn-default" (click)="AddNew()" >Add Newbutton>
<div style="overflow: hidden;" *ngIf="!entryMode" class="table-responsive">
<data-table name="user-rights-grid"
headerTitle="UserRightsHeader"
[items]="items"
[itemCount]="itemCount"
(reload)="reloadItems($event)"
>
<data-table-column>
<ng-template #dataTableHeader let-item="item">
<i><button class="btn btn-sm btn-danger" (click)="DeleteSelected()">Delete Selectedbutton>i>
ng-template>
<ng-template #dataTableCell let-item="item">
<input type="checkbox" (change)="selected(item, $event)">
ng-template>
data-table-column>
<data-table-column
[property]="'UserRightsName'"
[header]="'Name'"
[sortable]="true"
[resizable]="true">
data-table-column>
<data-table-column
[property]="'AuthenticationType'"
[header]="'Authentication'"
>
data-table-column>
<data-table-column header="View">
<ng-template #dataTableHeader let-item="item">
<i>Viewi>
ng-template>
<ng-template #dataTableCell let-item="item">
<button (click)="ViewUser(item.UserRightsID)" class="btn btn-sm btn-primary">Viewbutton>
ng-template>
data-table-column>
<data-table-column header="Detele">
<ng-template #dataTableHeader let-item="item">
<i>Deletei>
ng-template>
<ng-template #dataTableCell let-item="item">
<button (click)="Delete(item, true)" class="btn btn-sm btn-danger">Deletebutton>
ng-template>
data-table-column>
<data-table-column header="EditRights" >
<ng-template #dataTableCell let-item="item" data-visible="true">
<button (click)="ViewRights(item.UserRightsID,item.UserRightsName)" class="btn btn-sm btn-info">Edit Rightsbutton>
ng-template>
data-table-column>
data-table>
div>
<div *ngIf="entryMode">
<div class="modal-header">
<h4 class="modal-title pull-left">Edit User Rights Header Informationh4>
<button type="button" class="close pull-right" aria-label="Close" (click)="closeEntry()">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body">
<form name="EditUserRights" (change)="FormChanged()" role="form" (submit)="saveUser()">
<table class="editForm table-responsive" id="editForm">
<tr class="tr">
<td style="padding-left: 0px" colspan="2">
<table>
<tr class="tr">
<th class="editForm">
User Rights Name
th>
<td style="padding-left: 10px">
<input type="text" name="rightsname" id="rightsname" class="form-control" [(ngModel)]="itemToEdit.UserRightsName" placeholder="User Rights Name" required="required">
td>
<th style="padding-left: 8px" class="editForm">
Default Store
th>
<td>
<input type="text" name="defaultstore" id="defaultstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultStore" placeholder="Enter Default Store" required="required">
td>
<th style="padding-left: 8px" class="editForm">
Default Sub Store
th>
<td>
<input type="text" name="defaultsubstore" id="defaultsubstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultSubStore" placeholder="Default Sub Store" required="required">
td>
tr>
<br>
<tr class="tr">
<th style="padding-left: 8px" class="editForm">
Default Receipt Book
th>
<td>
<input type="text" name="defaultreceiptbook" id="defaultreceiptbook" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultReceiptBook" placeholder="Enter Receipt Book" required="required">
td>
<th style="padding-left: 8px" class="editForm">
Default Cost Centre
th>
<td>
<input type="text" name="defaultcostcentre" id="defaultcostcentre" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultCostCentre" placeholder="Enter Default Store" required="required">
td>
<th>Active:th>
<td style="float : left;">
<label><input name="options" ng-control="options" type="radio" [value]="true" [(ngModel)]="itemToEdit.Activate"> Yeslabel><br/>
<label><input name="options" ng-control="options" type="radio" [value]="false" [(ngModel)]="itemToEdit.Activate" > Nolabel><br/>
td>
tr>
<tr class="tr">
<th>Authenticationth>
<td style="padding-left: 10px">
<div>
<input type="checkbox" id="Addition" name="Addition" [(ngModel)]="itemToEdit.Add"> Add<br>
<input type="checkbox" id="Modification" name="Modification" [(ngModel)]="itemToEdit.Modify"> Modify<br>
<input type="checkbox" id="Deletion" name="Deletion" [(ngModel)]="itemToEdit.Deactivate"> Deactivate<br>
<input type="checkbox" id="View" name="View" [(ngModel)]="itemToEdit.View"> View
div>
td>
tr>
table>
td>
tr>
<tr>
<td colspan="2">
<div class="row" *ngIf="showValidation">
<div class="small-12 columns error">
<div class="alert alert-danger" [innerHTML]="validationMessage">div>
div>
div>
<div class="row">
<div class="small-12 columns error">
div>
div>
td>
tr>
<tr>
<td>
<button type="submit" [disabled] = "isInProgress" class="btn btn-primary block full-width m-b">Savebutton>
td>
<td>
<button type="button" class="btn btn-default block full-width m-b" (click)="closeEntry()">
Cancel
button>
td>
tr>
table>
form>
div>
div>
<div *ngIf="entryMode1">
<div class="modal-header">
<h4 class="modal-title pull-left">Edit User Rights Detailsh4>
<button type="button" class="close pull-right" aria-label="Close" (click)="closeEntry()">
<span aria-hidden="true">×span>
button>
div>
<div class="modal-body">
<form name="EditUserRights" (change)="FormChanged()" role="form" (submit)="saveUser()">
<table class="editForm table-responsive" id="editForm">
<tr class="tr">
<td style="padding-left: 0px" colspan="2">
<table>
<tr class="tr">
<th class="editForm">
User Rights Name
th>
<td style="padding-left: 10px">
<input type="text" name="rightsname" id="rightsname" class="form-control" [(ngModel)]="itemToEdit.UserRightsName" placeholder="User Rights Name" required="required">
td>
<th style="padding-left: 8px" class="editForm">
Default Store
th>
<td>
<input type="text" name="defaultstore" id="defaultstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultStore" placeholder="Enter Default Store" required="required">
td>
<th style="padding-left: 8px" class="editForm">
Default Sub Store
th>
<td>
<input type="text" name="defaultsubstore" id="defaultsubstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultSubStore" placeholder="Default Sub Store" required="required">
td>
tr>
<br>
<tr class="tr">
<th>Active:th>
<td style="float : left;">
<label><input name="options" ng-control="options" type="radio" [value]="true" [(ngModel)]="itemToEdit.Activate"> Yeslabel><br/>
<label><input name="options" ng-control="options" type="radio" [value]="false" [(ngModel)]="itemToEdit.Activate" > Nolabel><br/>
td>
tr>
<tr class="tr">
<th>Authenticationth>
<td style="padding-left: 10px">
<div>
<input type="checkbox" id="Addition" name="Addition" [(ngModel)]="itemToEdit.Add"> Add<br>
<input type="checkbox" id="Modification" name="Modification" [(ngModel)]="itemToEdit.Modify"> Modify<br>
<input type="checkbox" id="Deletion" name="Deletion" [(ngModel)]="itemToEdit.Deactivate"> Deactivate<br>
<input type="checkbox" id="View" name="View" [(ngModel)]="itemToEdit.View"> View
div>
td>
tr>
table>
td>
tr>
<tr>
<td colspan="2">
<div class="row" *ngIf="showValidation">
<div class="small-12 columns error">
<div class="alert alert-danger" [innerHTML]="validationMessage">div>
div>
div>
<div class="row">
<div class="small-12 columns error">
div>
div>
td>
tr>
<tr>
<td>
<button type="submit" [disabled] = "isInProgress" class="btn btn-primary block full-width m-b">Savebutton>
td>
<td>
<button type="button" class="btn btn-default block full-width m-b" (click)="closeEntry()">
Cancel
button>
td>
tr>
table>
form>
div>
div>
div>
div>

userrights.component.ts

import { Component, OnInit } from '@angular/core';
import { DataTableResource } from 'angular5-data-table';
import { ValidateService } from 'services/validate.service';
import { MiscService } from 'services/misc.service';
import { UserHeaderService } from 'services/user-header.service';
import { CommonService } from 'services/common.service';
import { Globals } from 'Global/globals';
import { CustomizeService } from 'services/customize.service';
import { RightsHeaderService } from 'services/rights-header.service';
import { NgxPaginationModule } from 'ngx-pagination';
import { from } from 'rxjs';
import { FORMERR } from 'dns';
declare var $: any;
@Component({
selector: 'app-rights-header',
templateUrl: './rights-header.component.html',
styleUrls: ['./rights-header.component.scss']
})
export class RightsHeaderComponent implements OnInit {
today: string;
itemResource = new DataTableResource([]);
itemResource1 = new DataTableResource([]);
items = [];
items1 = [];
itemCount = 0;
entryMode = false;
entryMode1 = false;
validationMessage = '';
showValidation = false;
isInProgress = false;
deleting = false;
itemToEdit =
{
"UserRightsID":0,
"UserRightsName": "",
"AuthenticationType": "",
"Add":false,
"Modify":false,
"Deactivate":false,
"View":false,
"DefaultStore":"",
"DefaultSubStore":"",
"DefaultReceiptBook":"",
"DefaultCostCentre":"",
"Activate": true
};
itemToEditRights = {
"UserRightsID":0,
"UserRightsName": "",
"AuthenticationType": "",
"Add":false,
"Modify":false,
"Deactivate":false,
"View":false,
"DefaultStore":"",
"DefaultSubStore":"",
"Activate": true
};
selectedRows = [];
messages: any;
showSuccess: boolean;
authentication: string[];
client: string[];
location: string[];
employee: string[];
doctor: string[];
id : string;
name : string;
constructor(private validateService : ValidateService,
private miscService: MiscService,
private rightsService: RightsHeaderService,
private commonService: CommonService,
globals: Globals,
private customizeService: CustomizeService
) {
this.loadMessages();
this.loadUser();
//this.loadDetails();
}
loadMessages(){
this.customizeService.getMessages().subscribe(data => {
this.messages = data;
});
}
loadUser() {
this.rightsService.getUser().subscribe(data => {
this.items = data;
this.itemResource = new DataTableResource(data);
this.itemResource.count().then(count => this.itemCount = count);
setTimeout(function(){
this.reloadItems({});
}.bind(this), 100);
});
}
loadDetails() {
this.rightsService.getDetails().subscribe(data => {
this.items1 = data;
this.itemResource1 = new DataTableResource(data);
this.itemResource1.count().then(count => this.itemCount = count);
setTimeout(function(){
this.reloadItems({});
}.bind(this), 100);
});
}
//Saving User data
saveUser(){
this.isInProgress = true;
this.rightsService.saveUser(this.itemToEdit).subscribe(data => {
this.loadUser();
//this.loadDetails();
alert(this.messages['msg_Success']);
this.entryMode = false;
this.isInProgress = false;
});
}
//getUsers() get called on click of edit rights button
getUser(id)
{
debugger;
}
// validates the form when user enter some values.
FormChanged(){
if(this.validationMessage != ''){
var inValidateResult = this.validateService.validate(this.itemToEdit);
if(inValidateResult){
this.validationMessage = inValidateResult;
this.showValidation = true;
this.isInProgress = true;
}
else{
this.validationMessage = '';
this.showValidation = false;
this.isInProgress = false;
}
}
}
// used to open new form.
AddNew(){
this.itemToEdit =
{
"UserRightsID":0,
"UserRightsName": "",
"AuthenticationType": "",
"Add":false,
"Modify":false,
"Deactivate":false,
"View":false,
"DefaultStore":"",
"DefaultSubStore":"",
"DefaultReceiptBook":"",
"DefaultCostCentre":"",
"Activate": true
};
this.entryMode = true;
}
ViewRights(id,name)
{
this.itemToEditRights =
{
"UserRightsID":id,
"UserRightsName": name,
"AuthenticationType": "",
"Add":false,
"Modify":false,
"Deactivate":false,
"View":false,
"DefaultStore":"",
"DefaultSubStore":"",
"Activate": true
};
this.entryMode = true;
}
// used to get customer w.r.t id.
ViewUser(UserRightsID) {
debugger;
if(this.deleting){
return;
}
this.rightsService.getUserById(UserRightsID).subscribe(data =>{
// var datePipe = new DatePipe('en-US');
// data.DOB = datePipe.transform(data.DOB, 'yyyy-MM-dd');
this.itemToEdit = data;
});
this.entryMode = true;
}
// Deletes customer.
Delete(item, showSuccess = false){
this.deleting = true;
this.showSuccess = showSuccess;
this.DeleteById(item.UserRightsID)
}
// Deletes customer on the basis of id.
DeleteById(id){
this.rightsService.DeleteUser(id).subscribe(data => {
if(this.showSuccess){
this.showSuccess = false;
alert(this.messages['msg_Delete']);
this.loadUser();
}
this.deleting = false;
});
}
// used to close entry mode.
closeEntry(){
this.AddNew();
this.ViewRights(this.id,this.name);
this.entryMode = false;
}
//Selected Users
selected(item, params){
debugger;
const myArr: any = [item.length][5];
if(params.checked)
{
this.selectedRows.push(item.UserRightsID + params.name);
var arr = this.selectedRows;
}
else{
this.selectedRows = this.selectedRows.filter(ele => { return ele != item.UserRightsID });
}
}
// this will be used to delete multiple customers.
DeleteSelected(){
if(this.selectedRows.length == 0){
alert(this.messages['msg_DeleteSelection']);
return;
}
var con = confirm(this.messages['cnfm_Delete']);
if(con){
for(var i = 0; i < this.selectedRows.length; i++){
this.showSuccess = i == this.selectedRows.length - 1;
this.DeleteById(this.selectedRows[i]);
}
}
}
// This method would be used to get latest set of records when added, updated or deleted.
reloadItems(params) {
this.itemResource.query(params).then(items => this.items = items);
}
ngOnInit() {
// Getting Client from Common Service.
this.commonService.getClientList(this.client).subscribe(data =>{
debugger;
this.client = data as string [];
this.itemToEdit = data;
});
// Getting Location from Service.
this.commonService.getLocationList(this.location).subscribe(data =>{
debugger;
this.location = data as string [];
this.itemToEdit = data;
});
// Getting Authentication type from Misc.
this.miscService.getAuthenticationType().subscribe(data =>{
this.authentication = data as string [];
this.itemToEdit = data;
});
//Getting Employee from Common
this.commonService.getEmploeeList(this.employee).subscribe(data =>{
this.employee = data as string[];
this.itemToEdit = data;
});
}
//Allow to enter only Number
numberOnly(event) : boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if(charCode < 48 || charCode > 57)
{
return false;
}
return true;
}
//Allow to enter only Aplhabets
alphabetOnly(event) : boolean {
const charCode = (event.which) ? event.which : event.keyCode;
if((charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122) && ( charCode != 32))
{
return false;
}
return true;
}
}

Userrights.service.ts

import { Injectable } from '@angular/core';
import {Router} from '@angular/router';
import { Http, Headers } from '@angular/http';
import { catchError, map } from 'rxjs/operators';
import { environment } from '../environments/environment';
@Injectable()
export class RightsHeaderService {
isSessionVaild = true;
constructor(private http: Http, public router: Router) { this.isSessionVaild = true; }
// Loads all User
getUser(){
debugger;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
return this.http.get(environment.apiUrl + 'Rights', { headers: headers })
.pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}
redirectToRights(url)
{
debugger;
var myurl = `${url}`;
this.router.navigateByUrl(myurl).then(e => {
if (e) {
console.log("Navigation is successful!");
} else {
console.log("Navigation has failed!");
}
});
}
// Loads all Details of Component and Authentication
getDetails(){
debugger;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
return this.http.get(environment.apiUrl + 'Demo', { headers: headers })
.pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}
// Loads User on the basis of id.
getUserById(id){
debugger;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
return this.http.get(environment.apiUrl + 'Rights/'+id, { headers: headers })
.pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}
// Saves/updates User.
saveUser(Rights){
debugger;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
return this.http.post(environment.apiUrl + 'Rights', Rights, { headers: headers })
.pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}
// Deletes Doctor on the basis of id.
DeleteUser(id){
debugger;
let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Access-Control-Allow-Origin', '*');
headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
return this.http.delete(environment.apiUrl + 'Rights/'+id, { headers: headers })
.pipe(map(data => data.json()),
catchError((error: any) => {
throw error;
}));
}
}