swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

How Select all check box by default . #1409

Open Rjitendra opened 6 years ago

Rjitendra commented 6 years ago

<ngx-datatable class="material" [rows]="quoteItem" [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [limit]='5' [externalSorting]="true" [loadingIndicator]="loading" (sort)="onSort($event)" [selected]="selected" [selectionType]="'checkbox'" (activate)="onActivate($event)">

 <ngx-datatable-column>
   <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn">
     <input type="checkbox" [checked]="allRowsSelected" (change)="selectFn(!allRowsSelected)" />
   </ng-template>
   <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn">
     <input type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
   </ng-template>
 </ngx-datatable-column>

 <ngx-datatable-column [width]="100"
                       [resizeable]="true"
                       [sortable]="true"
                       [draggable]="true"
                       [canAutoResize]="true" name="Item #" prop='item'>

   <ng-template let-row="row" ngx-datatable-cell-template>
     {{row.itemID}}
   </ng-template>
 </ngx-datatable-column>

Loongle commented 6 years ago

I have the same problem.

Rjitendra commented 6 years ago

any one aware about issue plz post the solution

cassmtnr commented 6 years ago

Please use the issue template: https://github.com/swimlane/ngx-datatable/blob/master/.github/ISSUE_TEMPLATE.md

szymonlisiecki commented 4 years ago

Anybody knows how to make checkboxes selected by default?

DaveM22 commented 4 years ago

Anybody knows how to make checkboxes selected by default? [rowIdentity]="rowIdentity" [displayCheck]="displayCheck" [selected]="selected" [selectionType]="SelectionType.checkbox" [selectAllRowsOnPage]="false" (select)="onSelect($event)"

in

Where "selected" corresponds to a list of objects

then in your component you will have these 2 actions

rowIdentity = (row: any) => {
    return row.id;
}

then you must specify what will be the identity column of each row with row identity

don't forget to declare it in : [rowIdentity]="rowIdentity"

The key is that you will have 2 lists: one for selected and one that corresponds to the data table. Then the objects you want to appear selected should be inserted in the selected list. In this way the library detects based on the selected list which should be marked by default in the table all this thanks to rowIdentity

If you want to add a select all must add an extra column with the following properties

<ngx-datatable-column
[headerCheckboxable] = true
[checkboxable] = "true"
>
</  ngx-datatable-column>