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

[ghost]

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

• Table version: 0.7.x 7.3.0

• Angular version: 2.0.x Angular 4.0.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome 55.0.2883.87 m (64-bit)

• Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript 2.2.1

[amcdnl]

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

[ghost]

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]

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]

+1

[ramkrishnakuldeep]

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.

Please help to solve the issue.

Thanks Kuldeep

[yamii]

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]

I was tried with same bit still it is not working

[vikram-rajput]

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]

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)"