How to select multiple rows in ng2-smart-table component with checkbox?

Question

I am using ng2-smart-table from https://akveo.github.io/ng2-smart-table/#/documentation

Live Demo: http://akveo.com/ngx-admin/pages/tables/smart-table

Please help me with below questions:

1. I want to select multiple rows and call one function so where I need to write this code in ng2-smart-table?

2. Can I select multiple rows and call one function on selected rows ?

I have written below code in .ts and .html files:

smart-table-component.ts:

 actions: {
      add: false,
      edit: true,
      delete: false,
      custom: [{ name: 'ourCustomAction'}],
      position: 'left',
      columnTitle: 'Actions'

    },   

    mode: 'external',

smart-table-component.html:

   <nb-card-body>
    <ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData"
     (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)">
    </ng2-smart-table>
  </nb-card-body>

Pomelo

Answer 1

1- I want to select multiple rows and call one function so where I need to write this code in ng2-smart-table?

Answer:

For selecting multiple rows in ng2-smart-table, you need to add configuration in your settings Object.

Example:

settings = {
    // This `selectMode` is the configuration for selecting multiple rows in the table using checkbox
    selectMode: 'multi',
    delete: {
      confirmDelete: true,

      deleteButtonContent: 'Delete data',
      saveButtonContent: 'save',
      cancelButtonContent: 'cancel'
    },
    add: {
      confirmCreate: true,
    },
    edit: {
      confirmSave: true,
    },
    columns: {
      // columns configuration
    },
  };

2- Can I select multiple rows and call one function on selected rows ?

ng2-smart-table have an event to get userSelectedRows, we can use that event to get all the selected rows and then call a function to do something with all selected rows.

Example:

• Step1: Add event handler in the template

<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table> 

• Step2: Create event handler in component.ts to get the selected rows

onUserRowSelect(event) {
    this.selectedRows = event.selected;
}

• Step3: Create button and call a function to do something with selected rows

Button in html

<button (click)="onClick()"> Get Selected </button>

Click handler in component.ts

onClick() {
    // It will console all the selected rows
    console.log(this.selectedRows);
  }

Here you can see this in working: https://stackblitz.com/edit/example-ng2-smart-table-18qsws

Jingo

when you add multi selectmode, you lose the ability to call row by click on row itself, it only gets called by clicking the checkbox – Consumptive

@AbhijeetKhangarot that's the issue I'm facing right now ! – Gallager

Answer 2

I am not too familiar with this library but following should help:

html

<button (click)="logAllSelectedRows()">log All selected</button>
<ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)" (rowSelect)="rowSelectedHandler($event)">

ts

  selectedRows = [];
  rowSelectedHandler(rowData:{isSelected:boolean, data:any}){
    if(rowData.isSelected === false){
      /*remove row*/
      this.selectedRows = this.selectedRows.filter((rowItem)=>rowItem .id !== rowData.data.id)
    }else {
      /*add row*/
      this.selectedRows = [...this.selectedRows, ...rowData.data];
      console.log('added rowdata');
    }
  }

  logAllSelectedRows(){
      console.log(this.selectedRows);
  }

Cilium

Answer 3

In your ng2-smart-table settings ([settings]="settings"), add this line to enable selecting more than one row:

selectMode: 'multi',

Then, in your template, add the (userRowSelect) event to your ng2-smart-table:

<ng2-smart-table [settings]="settings" allowFiltering='true' allowPaging='true' [source]="windchillData" (deleteConfirm)="onDeleteConfirm($event)" (custom)="onCustomAction($event)" (edit)="onEdit($event)" (userRowSelect)="onUserRowSelect($event)"></ng2-smart-table>

In your component, update the list of selected rows at every (userRowSelect):

private selectedRows: any;

// ...

onUserRowSelect(event) {
    this.selectedRows = event.selected;
}

Still in the component, add a function that does what you want with the selected rows:

public doSomething() {
    // Do something with `this.selectedRows`
}

Add a button, and call your function when it is clicked!

<button (click)="doSomething()"> Run code on selected rows! </button>

Kittykitwe