Remove selected item with checkbox

Question

I'm looking for a multiple delete for selected item thanks to a checkbox. I use this link https://github.com/swimlane/ngx-datatable/blob/master/demo/selection/selection-chkbox-template.component.ts to create my list. Then I created a delete button at the top of my page with this html :

<button (click)="onRemoveRow(selected)">Remove First Row</button>
<ngx-datatable
#table
class='material'
[columns]="columns"
[columnMode]="'force'"
[rowHeight]="'auto'"
[rows]='temp'
[headerHeight]="50"
[footerHeight]="50"
[limit]="5"
[rowClass]="getRowClass"
[selected]="selected"
[selectionType]="'checkbox'"
(select)='onSelect($event)'>
  <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
  </ngx-datatable-column>
  <ngx-datatable-column name="Site" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Site 
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Filiere" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Filiere
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="Type" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     Type
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name="TypeSource" >
    <ng-template let-value="value" let-sort="sortFn" ngx-datatable-header-template>
     TypeSource
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
  </ngx-datatable>

However, I don't succeed to use the function onRemoveRow(selected) to deleted the selected rows. I tried to use a restriction between all rows and the selected rows but I really don't found a solution. I'm just searching an advice or a better way to do it, if someone has an idea.

Dharmendra Prajapati Dharmendra Prajapati · Accepted Answer · 2019-01-14T10:36:53

You Can follow like this.

Here implement this in HTML:

    <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
     <div>
   <button class="mt-1 mr-1 ml-1 mb-1" md-raised-button color="primary"(click)="addcontact()">New</button>
    <button class="btn btn-success mr-1 mb-1"  style="float: right;"  [disabled]="buttonDisabled" (click)="multiplecontactdel()">Delete</button>   
   </div>
   <div class="pt-2 pb-2 pl-2 pr-2 mat-white box-inset mb-2">
    </div>
             <div class="force-card-content">
                <div class="table-responsive">
                        <ngx-datatable
                        class="material"
                        [selectionType]="'checkbox'"  
                        (activate)="onActivate($event)"
                        (select)='onSelectNew($event)'
                        [selected]="selected"
                        [rows]="rows"    
                        [sortType]="'multi'"
                        [columnMode]="'flex'"
                        [headerHeight]="50"
                        [footerHeight]="50"
                        [rowHeight]="auto"
                        [limit]="10">                        
                        <ngx-datatable-column name="Email" prop="WorkEmail" [flexGrow]="4"></ngx-datatable-column> 
                        <ngx-datatable-column name="Account Name" prop="AccountName" [flexGrow]="4" ></ngx-datatable-column>                         
                        <ngx-datatable-column [flexGrow]="1"  [headerCheckboxable]="true"
                        [checkboxable]="true" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
                        </ngx-datatable-column>   
                      </ngx-datatable>                    
                </div>  
            </div>
  </div>
  </div>

And implement this in Codebehind:

    "use strict";
import { Component, OnInit, ViewEncapsulation, ViewContainerRef } from '@angular/core';
import { Router } from "@angular/router";
import { Http, RequestOptions, Headers, Response } from '@angular/http';
import { PageTitleService } from '../../core/page-title/page-title.service';
import { fadeInAnimation } from "../../core/route-animation/route.animation";
import { ApiService } from '../../api/api.service';
import { ToastsManager } from 'ng2-toastr/ng2-toastr';
import { MdDialogRef, MdDialog, MdDialogConfig } from "@angular/material";
import { AlertsService, DemoDialog3 } from '../../api/alerts.service';
@Component({
  selector: 'ms-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {
    "[@fadeInAnimation]": 'true'
  },
  animations: [fadeInAnimation]
})
export class ContactsComponent implements OnInit {
  dialogRef: MdDialogRef<DemoDialog3>;
  result: string;
  buttonDisabled: boolean;  
  tdata: any;
  mdeleteid = [];
  rows = [];
  temp = [];
  filteredData = [];
  data = []; 
  selected = []; 
  selectedContacts = []; 
  constructor(private router: Router, private api: ApiService) {

    this.fetch1((data) => {      
      this.temp = [...data];      
      this.rows = data;
      this.filteredData = data;      
    });
  }
  ngOnInit() {this.buttonDisabled = true;}
  fetch1(cb) {
    this.pageTitleService.setTitle("Contacts");
    var $scope = this;
    var Tid = localStorage.TenantId;
    this.api.postPromise('api/Contacts/GetContacts?Tid=' + Tid, null).then(
      function (data) {cb(data);},
      function (err) {
        console.log(err);
        alert("Error");
      });
  }
  onSelectNew({ selected }) {
    var $scope = this;
    if (selected.length > 0) {this.buttonDisabled = false;}
    else { this.buttonDisabled = true; }
    this.selected.splice(0, this.selected.length);
    this.selected.push(...selected);
  } 
multiplecontactdel() {    
    var $scope = this;
    $scope.selectedContacts.push(...this.selected);         
        this.api.postPromise('api/Contacts/ContactsMultipleDelete', $scope.selectedContacts).then( //getting data from api
          function (data) {           
            if (data.Message == "Successfull") {
              $scope.selectedContacts = [];
              $scope.toastr.success("Contact Deleted Successfully");
              $scope.fetch1((data) => {
                $scope.temp = [...data];
                $scope.rows = data;
              });              
            }
            else {
              $scope.toastr.success("Cant't delete");             
            }
          },
          function (err) {console.log(err);});      
    this.selected = [];
  }
 }

Remove selected item with checkbox

2 Answers