CODEWITHSUNDEEP
angulartypescriptionic-frameworkngx-datatable
Andre Gomez
Andre Gomez

Reputation: 91

How to only have selected 1 checkbox in a Ngx-datable table?

I have an ngx-datatable witch checkboxes, only 1 checkbox needs should be selected at a time.

I have tried to accesing the event using this:

html

 <ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  (select)='onSelect($event)'>    
  </ngx-datatable>

But the event only contain what is selected. Would there be a way to unselect everything but the last checkbox clicked?

Upvotes: 4

Views: 4850

Answers (2)

soccer7
soccer7

Reputation: 3995

Use the value radio instead of checkbox. Example:

<ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'radio'"
  [selectAllRowsOnPage]="false">    
  </ngx-datatable>

Upvotes: 1

Z. Bagley
Z. Bagley

Reputation: 9260

Swimlane offers an example on how to clear all selections here with a demo here. Notice the "remove" button at the top of the page.

The main points are utilizing the @Inputs [selected] and updating your @Output (select).

component.html

 <ngx-datatable 
  class="margin-left bootstrap" 
  [rows]="rows" 
  [loadingIndicator]="'true'" 
  [rowHeight]="'30'"
  [reorderable]="'true'" 
  [scrollbarH]="'true'" 
  [columnMode]="'standard'" 
  [columns]="columns"
  [selectionType]="'checkbox'"
  [selectAllRowsOnPage]="false"
  (select)='onSelect($event)'>    
  </ngx-datatable>

component.ts

export class MyComponent {

  selected = [];


  onSelect({ selected }) {
    this.selected = [];
    this.selected.push(...selected);
  }


}

Upvotes: 2

Related Questions