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

ngx-datatable not updating the footer's selected count message #674

Open ghost opened 7 years ago

ghost commented 7 years ago

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior When I am deleting rows from the table, the footer selected count message does not get updated when clearing the data and fetching the data again. Only the total rows message gets update..

Expected behavior The selected count message should get updated if they user is clearing the selected list.

is like this: 1 selected / 8 total --> but it should be like this: 0 selected / 7 total

Reproduction of the problem Create a table set the [selectionType]="'checkbox'", and (select)="onSelectItem($event)"

onSelectItem(selectedItems) {
    this.selectedItemList.splice(0, this.selectedItemList.length);
    this.selectedItemList.push(...selectedItems.selected);
}

Select some items in the table(they will be added to the selectedItemList. Delete the selected items, clear the selectedItemList and fetch the data again. The footer's select count message is not getting updated only the total count message.

What is the motivation / use case for changing the behavior? The footer's select count message needs to get updated together with the total count message.

Please tell us about your environment: Windows 7

amcdnl commented 7 years ago

Can you retry on latest? Seems to be working in the demo now.

ghost commented 7 years ago

Updated the code to version 8.0.0. I have 6 items. I selected one item (via checkbox) , added the selected item to the selectedItem List, made a call to a service to delete the selected item, cleared the selectedItem and finally refresh the item list. The total message changes from 6 to 5 but the selected message does not change, it stays at 1 item selected. ===> 1 selected / 5 total

is there an event i have to trigger for the selected message to get updated?

vibingopal commented 7 years ago

Any update here on the issue. I am also facing the same issue where my selected count is not getting updated on row selection. here is my configuration

<ngx-datatable #myTable class='material expandable bordered' [columnMode]="'force'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [externalSorting]="true" [loadingIndicator]="loading" [scrollbarV]="50" [rows]='rows' [offset]="offset" [limit]='limit' [selected]="rowDetailExpanded" [selectedCount]="rowDetailExpanded.length" [selectionType]="'single'" (select)='toggleExpandRow($event)'

ViniciusReno commented 7 years ago

+1

ramkrishnakuldeep commented 7 years ago

Hello there, I am also facing the above issue.

I will explain you the scenario. Here it goes,

I had 2 items in the list. I selected both. Then I refreshed the data and the grid was reloaded with new data. Now I have 3 items. The footer still shows selectedCount as 2. And when I select one item it updates the selected count to 3, though it has only one selected. Please see the screenshot below.

screen shot 2017-10-25 at 6 33 18 pm

Please help to solve the issue.

Thanks Kuldeep

yamii commented 6 years ago

I've encountered this issue and here's how I solve it. in your template

<ngx-datatable
    [rows]="rows"
    [loadingIndicator]="loading"
    [columns]="columns"
    [selected]="selected" 
    [selectionType]="'checkbox'"
   ---- other settings 
>

on your deleted handler

export class SomeComponent implements onInit {
  selected = []

  onDelete() {
      // after successful delete
      this.selected = []
   }
}

your footer count will reset to zero when setting this.selected = []

ngx-datatable Footer component uses selected variable for its selected count https://github.com/swimlane/ngx-datatable/blob/3ac29923fecee83633fa77966fc74d2357d0c610/src/components/datatable.component.ts#L96

siva563 commented 6 years ago

I was tried with same bit still it is not working

vikram-rajput commented 5 years ago

I tried to solve this issue by doing different logic and it works for me. after updating data I tried to redirect page router to itself.

// in constructor make sure router dependency injected

 constructor(
    private router: Router,
  ) 

// then where ever you are updating data after that do following fake redirecting implementation which redirects to itself and updates datatable with default values.

this.router.navigateByUrl('/AnyDummyVirtualPathWhichNotExistInRouter', { skipLocationChange: true }).then(() => this.router.navigate(['/yourCurrentPagePath']));

let me know if you have still any query.

kdbeer commented 5 years ago

My method

On your component let add more variable checkAll = false;

On your selected handler function `

onSelect(e, checkAll) {
    this.selected = e.selected.filter(m => 'Your Condition' );
    this.checkAll = checkAll;
    if (!checkAll) {
        this.selected = [];
        return;
    }
}

`

On Your Template (select)="onSelect($event, !checkAll)"