Ngx-datatable: Selected on Init

[enough1987]

I need to select on init some rows, so I set on init some rows to this.selected. All good, but when I click + shift I unselect rows, Event selected says that I select none;

     <ngx-datatable
        #table 
        class="material"
        [rows]="rows"
        [columns]="columns"
        [selected]="selected"
        [selectionType]="'multi'"
        [columnMode]="'force'"
        [headerHeight]="24"
        [footerHeight]="0"
        [rowHeight]="40"
        [scrollbarV]="true"
        [scrollbarH]="false"
        [messages]="{emptyMessage: 'No items have been added to the collection'}"
        (select)='onSelect($event)' 
        (page)='onPage($event)'
        (recalculate)=recalculate($event) >

         <ng-template #editTmpl let-value="value" let-row="row" let-i="index" >

          <span 
                  *ngIf="!editing[row.$$index + '-name']">
                  {{value}}
            </span>
            <input #input autofocus type="text"
                  (blur)="updateValue($event, 'name', value, row, input)" 
                  (keyup.enter)="updateValue($event, 'name', value, row, input)"
                  [hidden]="!editing[row.$$index + '-name']" 
                  [value]="value"
                  [class.error]="row.error"
            />
            <img class="rename-icon" src="assets/images/rename.png" 
                  (click)="onRename( input, row )"
                  [hidden]="!checkingPermission(row, 'Update')"   />
         <!--         editing[row.$$index + '-name'] = true-->

         </ng-template>

         <ng-template #dateTmpl let-value="value" let-row="row" let-i="index">
           <time>{{value | dateFormat }}</time>
         </ng-template>

          <ng-template #boolTmpl let-value="value" let-row="row" let-column="column" let-i="index">
              <img class="validStatus-img" src="./assets/images/{{value?column.trueImg:column.falseImg}}"  />
              <span>{{value ? "Ok" : "Invalid"}}</span>
          </ng-template>

      </ngx-datatable>

Datatable 8.0.0
Angular 4

[amcdnl]

I'm not sure I follow. You are wanting rows selected by default?

[maxtacco]

Hi,
May be this can help. I've noticed today with 9.x version that [selected] input array is updated when selection is made. Not sure if this is a side effect or by design. So, you should keep this in mind when passing 'selected' array without making a copy to [selected] input. If you do use the same array to set the initial values and to keep selection you don't even need to add (select)='onSelect($event)' because 'selected' array will contain current selection.

[manijak]

I am very confused as to how pre-selected rows work... I also need to check certain rows onInit, so I populate the selected array with rows, but still the checkboxes are not checked, they are always false or unchecked.

If I then check a row, the row is added as a duplicate into the selected array... what am I missing here?

Using 10.4.0 of datatable.

[aponski]

I have the same issue (v11.1.5) as @manijak

My initial data

selected = [
    {
      name: 'Molly',
      gender: 'Female',
      company: {
        name: 'Swimline3',
        street: 'Wołoska'
      }
    }
  ];

When table is loaded checkbox is not selected, but counter in footer shows "1 selected"

@amcdnl please let me know if plan to solve this problem. Otherwise I will have to find other data table implementation.

Thanks

[mxchange]

I too am unclear how this should work, do we need to pass in the exact row objects in the array? An example in the docs would be helpful

[sengemann]

I'm also trying to accomplish this and am having no luck. However, I noticed that when I manually set the selection variable, the table will not mark the row as "selected" (_add the 'active' class_) until I hover over the table.

For an example of how I believe we are thinking this should work:

<ngx-datatable
  #employeeTable
  [rows]="employeeList"
  [selectionType]="'single'"
  [selected]="selectedEmployee"
  (select)="onRowSelect($event)"></ngx-datatable>

public employeeList: [any] // Table Rows
public selectedEmployee: []; // Selected Row
ngOnInit() {
  this.employeeService.getAllEmployees().subscribe(employees => {
    this.employeeList = employees;
    this.getCurrentUser();
  });
}

private getCurrentUser() {
  this.userService.getCurrentUser().subscribe(currentUser => {
    this.selectedEmployee[0].push(currentUser);
  });
}

I have a table and get a list of employees from a service call and put them into my table. I also set a row as "selected" if the employee in the row is equal the the user logged in. To do this, I should just set the selected variable to the user object.

I will try to update this with a demo later tonight when I'm home from work.

[davidoween]

I have same problem. ¿solutions?

[mitschmidt]

I am having the same problem when storing the selected array in service to preserve it when users navigate to other views.

[davidoween]

I have solved it by searching the DOM for the checkbox and clicking on
them. Is working

El mié., 7 nov. 2018 19:48, Tim Schmidt [e-mail] escribió:

I am having the same problem when storing the selected array in service to
preserve it when users navigate to other views.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-datatable/issues/700#issuecomment-436735032,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ATkImK1k9UDpZNmdkkaruW3UinNtDVTeks5usysVgaJpZM4NFFyM
.

[jjvanstone]

+1

still experiencing this issue on version 16.0.2

angular 8.0.0

[Sparkdaddy]

+1 still experiencing this with the same versions as @jjvanstone...

[DrackThor]

I found a way to make it work for my scenario - the key is to specify [rowIdentity]="rowIdentity" at the datatable html object.
That way the component can compare the row in [rows] and [selected] and REALLY mark the "pre-selected" rows. Works like a charm, but the documentation is quite shallow on this (https://swimlane.gitbook.io/ngx-datatable/api/table/inputs#rowidentity).

[t-pankajkumar]

I found a way to make it work for my scenario - the key is to specify [rowIdentity]="rowIdentity" at the datatable html object.
That way the component can compare the row in [rows] and [selected] and REALLY mark the "pre-selected" rows. Works like a charm, but the documentation is quite shallow on this (https://swimlane.gitbook.io/ngx-datatable/api/table/inputs#rowidentity).

Now it is working even with server-side pagination.

[joeveiga]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.