1
Answer

User Permission - Handling multiple Checkboxes in single row

Ninad Shinde

Ninad Shinde
6y
3.3k
1
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
  1. <div class="card">  
  2. <div class="card-header">  
  3. <h4 class="card-title">User Rights Header</h4>  
  4. </div>  
  5. <div class="card-body">  
  6. <button class="btn btn-default" (click)="AddNew()" >Add New</button>  
  7. <div style="overflow: hidden;" *ngIf="!entryMode" class="table-responsive">  
  8. <data-table name="user-rights-grid"  
  9. headerTitle="UserRightsHeader"  
  10. [items]="items"  
  11. [itemCount]="itemCount"  
  12. (reload)="reloadItems($event)"  
  13. >  
  14. <data-table-column>  
  15. <ng-template #dataTableHeader let-item="item">  
  16. <i><button class="btn btn-sm btn-danger" (click)="DeleteSelected()">Delete Selected</button></i>  
  17. </ng-template>  
  18. <ng-template #dataTableCell let-item="item">  
  19. <input type="checkbox" (change)="selected(item, $event)">  
  20. </ng-template>  
  21. </data-table-column>  
  22. <data-table-column  
  23. [property]="'UserRightsName'"  
  24. [header]="'Name'"  
  25. [sortable]="true"  
  26. [resizable]="true">  
  27. </data-table-column>  
  28. <data-table-column  
  29. [property]="'AuthenticationType'"  
  30. [header]="'Authentication'"  
  31. >  
  32. </data-table-column>  
  33. <data-table-column header="View">  
  34. <ng-template #dataTableHeader let-item="item">  
  35. <i>View</i>  
  36. </ng-template>  
  37. <ng-template #dataTableCell let-item="item">  
  38. <button (click)="ViewUser(item.UserRightsID)" class="btn btn-sm btn-primary">View</button>  
  39. </ng-template>  
  40. </data-table-column>  
  41. <data-table-column header="Detele">  
  42. <ng-template #dataTableHeader let-item="item">  
  43. <i>Delete</i>  
  44. </ng-template>  
  45. <ng-template #dataTableCell let-item="item">  
  46. <button (click)="Delete(item, true)" class="btn btn-sm btn-danger">Delete</button>  
  47. </ng-template>  
  48. </data-table-column>  
  49. <data-table-column header="EditRights" >  
  50. <ng-template #dataTableCell let-item="item" data-visible="true">  
  51. <button (click)="ViewRights(item.UserRightsID,item.UserRightsName)" class="btn btn-sm btn-info">Edit Rights</button>  
  52. </ng-template>  
  53. </data-table-column>  
  54. </data-table>  
  55. </div>  
  56. <!-- This form is for Rights Header -->  
  57. <div *ngIf="entryMode">  
  58. <div class="modal-header">  
  59. <h4 class="modal-title pull-left">Edit User Rights Header Information</h4>  
  60. <button type="button" class="close pull-right" aria-label="Close" (click)="closeEntry()">  
  61. <span aria-hidden="true">×</span>  
  62. </button>  
  63. </div>  
  64. <div class="modal-body">  
  65. <form name="EditUserRights" (change)="FormChanged()" role="form" (submit)="saveUser()">  
  66. <table class="editForm table-responsive" id="editForm">  
  67. <tr class="tr">  
  68. <td style="padding-left: 0px" colspan="2">  
  69. <table>  
  70. <tr class="tr">  
  71. <th class="editForm">  
  72. User Rights Name  
  73. </th>  
  74. <td style="padding-left: 10px">  
  75. <input type="text" name="rightsname" id="rightsname" class="form-control" [(ngModel)]="itemToEdit.UserRightsName" placeholder="User Rights Name" required="required">  
  76. </td>  
  77. <th style="padding-left: 8px" class="editForm">  
  78. Default Store  
  79. </th>  
  80. <td>  
  81. <input type="text" name="defaultstore" id="defaultstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultStore" placeholder="Enter Default Store" required="required">  
  82. </td>  
  83. <th style="padding-left: 8px" class="editForm">  
  84. Default Sub Store  
  85. </th>  
  86. <td>  
  87. <input type="text" name="defaultsubstore" id="defaultsubstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultSubStore" placeholder="Default Sub Store" required="required">  
  88. </td>  
  89. </tr>  
  90. <br>  
  91. <tr class="tr">  
  92. <th style="padding-left: 8px" class="editForm">  
  93. Default Receipt Book  
  94. </th>  
  95. <td>  
  96. <input type="text" name="defaultreceiptbook" id="defaultreceiptbook" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultReceiptBook" placeholder="Enter Receipt Book" required="required">  
  97. </td>  
  98. <th style="padding-left: 8px" class="editForm">  
  99. Default Cost Centre  
  100. </th>  
  101. <td>  
  102. <input type="text" name="defaultcostcentre" id="defaultcostcentre" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultCostCentre" placeholder="Enter Default Store" required="required">  
  103. </td>  
  104. <th>Active:</th>  
  105. <td style="float : left;">  
  106. <label><input name="options" ng-control="options" type="radio" [value]="true" [(ngModel)]="itemToEdit.Activate"> Yes</label><br/>  
  107. <label><input name="options" ng-control="options" type="radio" [value]="false" [(ngModel)]="itemToEdit.Activate" > No</label><br/>  
  108. </td>  
  109. </tr>  
  110. <tr class="tr">  
  111. <th>Authentication</th>  
  112. <td style="padding-left: 10px">  
  113. <div>  
  114. <input type="checkbox" id="Addition" name="Addition" [(ngModel)]="itemToEdit.Add"> Add<br>  
  115. <input type="checkbox" id="Modification" name="Modification" [(ngModel)]="itemToEdit.Modify"> Modify<br>  
  116. <input type="checkbox" id="Deletion" name="Deletion" [(ngModel)]="itemToEdit.Deactivate"> Deactivate<br>  
  117. <input type="checkbox" id="View" name="View" [(ngModel)]="itemToEdit.View"> View  
  118. </div>  
  119. </td>  
  120. </tr>  
  121. </table>  
  122. </td>  
  123. </tr>  
  124. <tr>  
  125. <td colspan="2">  
  126. <div class="row" *ngIf="showValidation">  
  127. <div class="small-12 columns error">  
  128. <div class="alert alert-danger" [innerHTML]="validationMessage"></div>  
  129. </div>  
  130. </div>  
  131. <div class="row">  
  132. <div class="small-12 columns error">  
  133. </div>  
  134. </div>  
  135. </td>  
  136. </tr>  
  137. <tr>  
  138. <td>  
  139. <button type="submit" [disabled] = "isInProgress" class="btn btn-primary block full-width m-b">Save</button>  
  140. </td>  
  141. <td>  
  142. <button type="button" class="btn btn-default block full-width m-b" (click)="closeEntry()">  
  143. Cancel  
  144. </button>  
  145. </td>  
  146. </tr>  
  147. </table>  
  148. </form>  
  149. </div>  
  150. </div>  
  151. <!-- This form is for Rights Details -->  
  152. <div *ngIf="entryMode1">  
  153. <div class="modal-header">  
  154. <h4 class="modal-title pull-left">Edit User Rights Details</h4>  
  155. <button type="button" class="close pull-right" aria-label="Close" (click)="closeEntry()">  
  156. <span aria-hidden="true">×</span>  
  157. </button>  
  158. </div>  
  159. <div class="modal-body">  
  160. <form name="EditUserRights" (change)="FormChanged()" role="form" (submit)="saveUser()">  
  161. <table class="editForm table-responsive" id="editForm">  
  162. <tr class="tr">  
  163. <td style="padding-left: 0px" colspan="2">  
  164. <table>  
  165. <tr class="tr">  
  166. <th class="editForm">  
  167. User Rights Name  
  168. </th>  
  169. <td style="padding-left: 10px">  
  170. <input type="text" name="rightsname" id="rightsname" class="form-control" [(ngModel)]="itemToEdit.UserRightsName" placeholder="User Rights Name" required="required">  
  171. </td>  
  172. <th style="padding-left: 8px" class="editForm">  
  173. Default Store  
  174. </th>  
  175. <td>  
  176. <input type="text" name="defaultstore" id="defaultstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultStore" placeholder="Enter Default Store" required="required">  
  177. </td>  
  178. <th style="padding-left: 8px" class="editForm">  
  179. Default Sub Store  
  180. </th>  
  181. <td>  
  182. <input type="text" name="defaultsubstore" id="defaultsubstore" (keypress)="alphabetOnly($event)" autocomplete="off" class="form-control" [(ngModel)]="itemToEdit.DefaultSubStore" placeholder="Default Sub Store" required="required">  
  183. </td>  
  184. </tr>  
  185. <br>  
  186. <tr class="tr">  
  187. <th>Active:</th>  
  188. <td style="float : left;">  
  189. <label><input name="options" ng-control="options" type="radio" [value]="true" [(ngModel)]="itemToEdit.Activate"> Yes</label><br/>  
  190. <label><input name="options" ng-control="options" type="radio" [value]="false" [(ngModel)]="itemToEdit.Activate" > No</label><br/>  
  191. </td>  
  192. </tr>  
  193. <tr class="tr">  
  194. <th>Authentication</th>  
  195. <td style="padding-left: 10px">  
  196. <div>  
  197. <input type="checkbox" id="Addition" name="Addition" [(ngModel)]="itemToEdit.Add"> Add<br>  
  198. <input type="checkbox" id="Modification" name="Modification" [(ngModel)]="itemToEdit.Modify"> Modify<br>  
  199. <input type="checkbox" id="Deletion" name="Deletion" [(ngModel)]="itemToEdit.Deactivate"> Deactivate<br>  
  200. <input type="checkbox" id="View" name="View" [(ngModel)]="itemToEdit.View"> View  
  201. </div>  
  202. </td>  
  203. </tr>  
  204. </table>  
  205. </td>  
  206. </tr>  
  207. <tr>  
  208. <td colspan="2">  
  209. <div class="row" *ngIf="showValidation">  
  210. <div class="small-12 columns error">  
  211. <div class="alert alert-danger" [innerHTML]="validationMessage"></div>  
  212. </div>  
  213. </div>  
  214. <div class="row">  
  215. <div class="small-12 columns error">  
  216. </div>  
  217. </div>  
  218. </td>  
  219. </tr>  
  220. <tr>  
  221. <td>  
  222. <button type="submit" [disabled] = "isInProgress" class="btn btn-primary block full-width m-b">Save</button>  
  223. </td>  
  224. <td>  
  225. <button type="button" class="btn btn-default block full-width m-b" (click)="closeEntry()">  
  226. Cancel  
  227. </button>  
  228. </td>  
  229. </tr>  
  230. </table>  
  231. </form>  
  232. </div>  
  233. </div>  
  234. </div>  
  235. </div> 
userrights.component.ts
  1. import { Component, OnInit } from '@angular/core';
  2. import { DataTableResource } from 'angular5-data-table';
  3. import { ValidateService } from 'services/validate.service';
  4. import { MiscService } from 'services/misc.service';
  5. import { UserHeaderService } from 'services/user-header.service';
  6. import { CommonService } from 'services/common.service';
  7. import { Globals } from 'Global/globals';
  8. import { CustomizeService } from 'services/customize.service';
  9. import { RightsHeaderService } from 'services/rights-header.service';
  10. import { NgxPaginationModule } from 'ngx-pagination';
  11. import { from } from 'rxjs';
  12. import { FORMERR } from 'dns';
  13. declare var $: any;

  15. @Component({
  16. selector: 'app-rights-header',
  17. templateUrl: './rights-header.component.html',
  18. styleUrls: ['./rights-header.component.scss']
  19. })
  20. export class RightsHeaderComponent implements OnInit {
  21. today: string;
  22. itemResource = new DataTableResource([]);
  23. itemResource1 = new DataTableResource([]);
  24. items = [];
  25. items1 = [];
  26. itemCount = 0;
  27. entryMode = false;
  28. entryMode1 = false;
  29. validationMessage = '';
  30. showValidation = false;
  31. isInProgress = false;
  32. deleting = false;
  33. itemToEdit =
  34. {
  35. "UserRightsID":0,
  36. "UserRightsName": "",
  37. "AuthenticationType": "",
  38. "Add":false,
  39. "Modify":false,
  40. "Deactivate":false,
  41. "View":false,
  42. "DefaultStore":"",
  43. "DefaultSubStore":"",
  44. "DefaultReceiptBook":"",
  45. "DefaultCostCentre":"",
  46. "Activate": true
  47. };

  49. itemToEditRights = {
  50. "UserRightsID":0,
  51. "UserRightsName": "",
  52. "AuthenticationType": "",
  53. "Add":false,
  54. "Modify":false,
  55. "Deactivate":false,
  56. "View":false,
  57. "DefaultStore":"",
  58. "DefaultSubStore":"",
  59. "Activate": true
  60. };
  61. selectedRows = [];
  62. messages: any;
  63. showSuccess: boolean;
  64. authentication: string[];
  65. client: string[];
  66. location: string[];
  67. employee: string[];
  68. doctor: string[];
  69. id : string;
  70. name : string;

  72. constructor(private validateService : ValidateService,
  73. private miscService: MiscService,
  74. private rightsService: RightsHeaderService,
  75. private commonService: CommonService,
  76. globals: Globals,
  77. private customizeService: CustomizeService
  78. ) {
  79. this.loadMessages();
  80. this.loadUser();
  81. //this.loadDetails();
  82. }

  84. loadMessages(){
  85. this.customizeService.getMessages().subscribe(data => {
  86. this.messages = data;
  87. });
  88. }

  90. loadUser() {
  91. this.rightsService.getUser().subscribe(data => {
  92. this.items = data;
  93. this.itemResource = new DataTableResource(data);
  94. this.itemResource.count().then(count => this.itemCount = count);

  96. setTimeout(function(){
  97. this.reloadItems({});
  98. }.bind(this), 100);
  99. });
  100. }

  102. loadDetails() {
  103. this.rightsService.getDetails().subscribe(data => {
  104. this.items1 = data;
  105. this.itemResource1 = new DataTableResource(data);
  106. this.itemResource1.count().then(count => this.itemCount = count);

  108. setTimeout(function(){
  109. this.reloadItems({});
  110. }.bind(this), 100);
  111. });
  112. }



  116. //Saving User data
  117. saveUser(){
  118. this.isInProgress = true;
  119. this.rightsService.saveUser(this.itemToEdit).subscribe(data => {
  120. this.loadUser();
  121. //this.loadDetails();
  122. alert(this.messages['msg_Success']);
  123. this.entryMode = false;
  124. this.isInProgress = false;
  125. });
  126. }

  128. //getUsers() get called on click of edit rights button
  129. getUser(id)
  130. {
  131. debugger;

  133. }

  135. // validates the form when user enter some values.
  136. FormChanged(){
  137. if(this.validationMessage != ''){
  138. var inValidateResult = this.validateService.validate(this.itemToEdit);
  139. if(inValidateResult){
  140. this.validationMessage = inValidateResult;
  141. this.showValidation = true;
  142. this.isInProgress = true;
  143. }
  144. else{
  145. this.validationMessage = '';
  146. this.showValidation = false;
  147. this.isInProgress = false;
  148. }
  149. }
  150. }

  152. // used to open new form.
  153. AddNew(){
  154. this.itemToEdit =
  155. {
  156. "UserRightsID":0,
  157. "UserRightsName": "",
  158. "AuthenticationType": "",
  159. "Add":false,
  160. "Modify":false,
  161. "Deactivate":false,
  162. "View":false,
  163. "DefaultStore":"",
  164. "DefaultSubStore":"",
  165. "DefaultReceiptBook":"",
  166. "DefaultCostCentre":"",
  167. "Activate": true
  168. };
  169. this.entryMode = true;
  170. }

  172. ViewRights(id,name)
  173. {
  174. this.itemToEditRights =
  175. {
  176. "UserRightsID":id,
  177. "UserRightsName": name,
  178. "AuthenticationType": "",
  179. "Add":false,
  180. "Modify":false,
  181. "Deactivate":false,
  182. "View":false,
  183. "DefaultStore":"",
  184. "DefaultSubStore":"",
  185. "Activate": true
  186. };
  187. this.entryMode = true;
  188. }

  190. // used to get customer w.r.t id.
  191. ViewUser(UserRightsID) {
  192. debugger;
  193. if(this.deleting){
  194. return;
  195. }
  196. this.rightsService.getUserById(UserRightsID).subscribe(data =>{
  197. // var datePipe = new DatePipe('en-US');

  199. // data.DOB = datePipe.transform(data.DOB, 'yyyy-MM-dd');
  200. this.itemToEdit = data;
  201. });
  202. this.entryMode = true;
  203. }

  205. // Deletes customer.
  206. Delete(item, showSuccess = false){
  207. this.deleting = true;
  208. this.showSuccess = showSuccess;
  209. this.DeleteById(item.UserRightsID)
  210. }

  212. // Deletes customer on the basis of id.
  213. DeleteById(id){
  214. this.rightsService.DeleteUser(id).subscribe(data => {
  215. if(this.showSuccess){
  216. this.showSuccess = false;
  217. alert(this.messages['msg_Delete']);
  218. this.loadUser();
  219. }
  220. this.deleting = false;
  221. });
  222. }

  224. // used to close entry mode.
  225. closeEntry(){
  226. this.AddNew();
  227. this.ViewRights(this.id,this.name);
  228. this.entryMode = false;
  229. }

  231. //Selected Users
  232. selected(item, params){
  233. debugger;
  234. const myArr: any = [item.length][5];
  235. if(params.checked)
  236. {

  238. this.selectedRows.push(item.UserRightsID + params.name);

  240. var arr = this.selectedRows;
  241. }
  242. else{
  243. this.selectedRows = this.selectedRows.filter(ele => { return ele != item.UserRightsID });
  244. }
  245. }

  247. // this will be used to delete multiple customers.
  248. DeleteSelected(){
  249. if(this.selectedRows.length == 0){
  250. alert(this.messages['msg_DeleteSelection']);
  251. return;
  252. }
  253. var con = confirm(this.messages['cnfm_Delete']);
  254. if(con){
  255. for(var i = 0; i < this.selectedRows.length; i++){
  256. this.showSuccess = i == this.selectedRows.length - 1;
  257. this.DeleteById(this.selectedRows[i]);
  258. }
  259. }
  260. }

  262. // This method would be used to get latest set of records when added, updated or deleted.
  263. reloadItems(params) {
  264. this.itemResource.query(params).then(items => this.items = items);
  265. }

  267. ngOnInit() {
  268. // Getting Client from Common Service.
  269. this.commonService.getClientList(this.client).subscribe(data =>{
  270. debugger;
  271. this.client = data as string [];
  272. this.itemToEdit = data;
  273. });

  275. // Getting Location from Service.
  276. this.commonService.getLocationList(this.location).subscribe(data =>{
  277. debugger;
  278. this.location = data as string [];
  279. this.itemToEdit = data;
  280. });

  282. // Getting Authentication type from Misc.
  283. this.miscService.getAuthenticationType().subscribe(data =>{
  284. this.authentication = data as string [];
  285. this.itemToEdit = data;
  286. });

  288. //Getting Employee from Common
  289. this.commonService.getEmploeeList(this.employee).subscribe(data =>{
  290. this.employee = data as string[];
  291. this.itemToEdit = data;
  292. });


  295. }

  297. //Allow to enter only Number
  298. numberOnly(event) : boolean {
  299. const charCode = (event.which) ? event.which : event.keyCode;
  300. if(charCode < 48 || charCode > 57)
  301. {
  302. return false;
  303. }
  304. return true;
  305. }

  307. //Allow to enter only Aplhabets
  308. alphabetOnly(event) : boolean {
  309. const charCode = (event.which) ? event.which : event.keyCode;
  310. if((charCode < 65 || charCode > 90) && (charCode < 97 || charCode > 122) && ( charCode != 32))
  311. {
  312. return false;
  313. }
  314. return true;
  315. }
  316. }
Userrights.service.ts
  1. import { Injectable } from '@angular/core';
  2. import {Router} from '@angular/router';
  3. import { Http, Headers } from '@angular/http';
  4. import { catchError, map } from 'rxjs/operators';
  5. import { environment } from '../environments/environment';

  7. @Injectable()
  8. export class RightsHeaderService {

  10. isSessionVaild = true;
  11. constructor(private http: Http, public router: Router) { this.isSessionVaild = true; }

  13. // Loads all User
  14. getUser(){
  15. debugger;
  16. let headers = new Headers();
  17. headers.append('Content-Type', 'application/json');
  18. headers.append('Access-Control-Allow-Origin', '*');
  19. headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
  20. return this.http.get(environment.apiUrl + 'Rights', { headers: headers })
  21. .pipe(map(data => data.json()),
  22. catchError((error: any) => {
  23. throw error;
  24. }));
  25. }

  27. redirectToRights(url)
  28. {
  29. debugger;
  30. var myurl = `${url}`;
  31. this.router.navigateByUrl(myurl).then(e => {
  32. if (e) {
  33. console.log("Navigation is successful!");
  34. } else {
  35. console.log("Navigation has failed!");
  36. }
  37. });
  38. }

  40. // Loads all Details of Component and Authentication
  41. getDetails(){
  42. debugger;
  43. let headers = new Headers();
  44. headers.append('Content-Type', 'application/json');
  45. headers.append('Access-Control-Allow-Origin', '*');
  46. headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
  47. return this.http.get(environment.apiUrl + 'Demo', { headers: headers })
  48. .pipe(map(data => data.json()),
  49. catchError((error: any) => {
  50. throw error;
  51. }));
  52. }

  54. // Loads User on the basis of id.

  56. getUserById(id){
  57. debugger;
  58. let headers = new Headers();
  59. headers.append('Content-Type', 'application/json');
  60. headers.append('Access-Control-Allow-Origin', '*');
  61. headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
  62. return this.http.get(environment.apiUrl + 'Rights/'+id, { headers: headers })
  63. .pipe(map(data => data.json()),
  64. catchError((error: any) => {
  65. throw error;
  66. }));
  67. }

  69. // Saves/updates User.
  70. saveUser(Rights){
  71. debugger;
  72. let headers = new Headers();
  73. headers.append('Content-Type', 'application/json');
  74. headers.append('Access-Control-Allow-Origin', '*');
  75. headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT');
  76. return this.http.post(environment.apiUrl + 'Rights', Rights, { headers: headers })
  77. .pipe(map(data => data.json()),
  78. catchError((error: any) => {
  79. throw error;
  80. }));
  81. }

  83. // Deletes Doctor on the basis of id.
  84. DeleteUser(id){
  85. debugger;
  86. let headers = new Headers();
  87. headers.append('Content-Type', 'application/json');
  88. headers.append('Access-Control-Allow-Origin', '*');
  89. headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  90. return this.http.delete(environment.apiUrl + 'Rights/'+id, { headers: headers })
  91. .pipe(map(data => data.json()),
  92. catchError((error: any) => {
  93. throw error;
  94. }));
  95. }
  96. }
Answers (1)
Next Recommended Forum