The best way to subscribe to selectedRow event? #47

Activity

1. dpadula commented on Aug 22, 2018

   

   dpadula

   on Aug 22, 2018

   Author

   More actions

   Ok, I found how do this:

   <div class="containerTableSET">
<data-table
   [items]="items"
   [itemCount]="itemCount"
   [indexColumn]="false"
   [header]="false"
   [multiSelect]="true"
   [selectColumn]="true"
   [selectOnRowClick]="true"
   (reload)="reloadItems($event)"
   (rowClick)="filaClick($event)" <--
   >
   and in the component:

   filaClick(row) {
   console.log(row.row);
   console.log(row.row.index);
   console.log(row.row.selected);
   if (row.row.selected) {
   console.log('Added:', row.row.item);
   } else {
   console.log('Removed:', row.row.item);
   }
   }

   But when I select (click event) one row, the order in which the events occurs are executed reversed (or delayed one step ?).

   The output in te console is:

   DataTableRowComponent {dataTable: DataTableComponent, renderer: DebugRenderer2, elementRef: ElementRef, _this: DataTableRowComponent, _listeners: Array(1), …}
   sets.component.ts:74 0
   sets.component.ts:75 undefined <-- FIRST VALUE when function is called (click to select)
   sets.component.ts:79 Removed: {codigoET: "SCA", codigoSET: "10139003", codigoAlimDist: "13-SCA-RURAL3", clientesSensibles: 0, clientesTotales: 0, …}
   sets.component.ts:73 DataTableRowComponent {dataTable: DataTableComponent, renderer: DebugRenderer2, elementRef: ElementRef, _this: DataTableRowComponent, _listeners: Array(1), …}
   sets.component.ts:74 0
   sets.component.ts:75 true <-- SECOND VALUE when function is called (click to unselect)
   sets.component.ts:77 Added: {codigoET: "SCA", codigoSET: "10139003", codigoAlimDist: "13-SCA-RURAL3", clientesSensibles: 0, clientesTotales: 0, …}
   sets.component.ts:73 DataTableRowComponent {dataTable: DataTableComponent, renderer: DebugRenderer2, elementRef: ElementRef, _this: DataTableRowComponent, _listeners: Array(1), …}
   sets.component.ts:74 0
   sets.component.ts:75 false<-- THIRD VALUE when function is called (click to select)
   sets.component.ts:79 Removed: {codigoET: "SCA", codigoSET: "10139003", codigoAlimDist: "13-SCA-RURAL3", clientesSensibles: 0, clientesTotales: 0, …}

   Is this the expected behaviour ? I suspect that the moment I'm watching this event is before Angular modify the DOM?

   Thanks in advance.
2. brunano21 commented on Aug 22, 2018

   

   brunano21

   on Aug 22, 2018

   Owner

   More actions

   @dpadula Could you check table.selectedRows into filaClick() function?
3. brunano21 commented on Aug 22, 2018

   

   brunano21

   on Aug 22, 2018

   Owner

   More actions

   @dpadula Can you create a StackBlitz so we can check together? You can use this as starter.
4. dpadula commented on Aug 22, 2018

   

   dpadula

   on Aug 22, 2018

   Last edited by brunano21

   Author

   More actions

   Hi Bruno, thanks for the quick answer, I'm editing the StackBlitz that you shared. Check this I've added the callback filaClick to your example starter code.

   To the other question if I can access to table.selectedRows the answer is: yes but, it's the same that

   filaClick(event) {
      console.log(event.row)
   }
   

   In the StackBlitz you can see the console, there are undefined at the beginning and then in the second rowclick the value is true when selected.

   filaClick(event) {
      console.log(event.row.selected);
   }
   
5. dpadula commented on Aug 22, 2018

   

   dpadula

   on Aug 22, 2018

   Last edited by brunano21

   Author

   More actions

   I added an update:

   With this you can decide what row is selected to add or remove when it's selected or not:

   async filaClick(event) {
     let selected;
     await event.row.selectedChange.subscribe(row => selected = row);
     if (selected) {
       console.log('Add:', event.row.item);
     } else {
       console.log('Remove:', event.row.item);
     }
   }
   

   could it be a possible way ?

   👍React with 👍1Reacted by Bruno Bruzzano
6. brunano21 commented on Aug 27, 2018

   

   brunano21

   on Aug 27, 2018

   Owner

   More actions

   Yeah, why not?
7. brunano21

   added

   question

   on Aug 27, 2018