Ngx-datatable: checkbox selected with server pagination

[penso89]

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, post on Stackoverflow or Gitter

Current behavior
cant see checked checkbox after server pagination.

Expected behavior
On pagination we expect to see the selected rows. (Server Pagination)

Reproduction of the problem
We use server pagination,
Select any row
Move on to the next page (server)
Select another one
Go back to the first page
-- The expected selected row is not selected.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 9.3.1
  

• Angular version: 4.0.x
  

• 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 ]
  

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

[dannyvenier]

this works fine for me on an implemented datatable with no special handling. Can you make a plunker to demonstrate the issue?

[penso89]

i have an external paging.. this make a different?

i cant make it on plunker :/

[amcdnl]

If you set the selected, it should appear. If you make a demo showing otherwise, we can investigate then.

[PiotrMistu]

I have same problem when i have chage page, reload content (get new JSON) from server and push it to my [rows], them i changed completely date in [rows] . everything is in [selected] array and it is ok .

<ngx-datatable
            class="material striped"
            [rows]="date"
            [columnMode]="'force'"
            [footerHeight]="50"
            [headerHeight]="50"
            [rowHeight]="'auto'"
            [count]="page.count"
            [externalPaging]="true"
            [offset]="page.offset"
            [limit]="page.limit"
            [selected]="selected"
            [selectionType]="'checkbox'"
            (activate)="onActivate($event)"
            (select)='onSelect($event)'
            (page)=' chagePage($event)'>
        <ngx-datatable-column
                [width]="30"
                [sortable]="false"
                [canAutoResize]="false"
                [draggable]="false"
                [resizeable]="false"
                [headerCheckboxable]="true"
                [checkboxable]="true">
        </ngx-datatable-column>
        <ngx-datatable-column prop="lp" name="Lp"></ngx-datatable-column>
        <ngx-datatable-column prop="emissionDate" name="Date"></ngx-datatable-column>
        <ngx-datatable-column prop="emissionTime" name="H"></ngx-datatable-column>
        <ngx-datatable-column prop="programTitle" name="Title"></ngx-datatable-column>
    </ngx-datatable>

chagePage get new date from server.

[JackArlington]

I have the same error. I use external server pagination and when I switch the page and go back the selected pages are not marked anymore. But the items in selected are stored correct, just not highlighted anymore.
First I though it could be because of my [rowClass]="getRowClass" styles but changing to checkboxable did not solve the problem.

<div>
    <ngx-datatable class="material"
      [rows]="rows"
      [columns]="userColumns"
      [headerHeight]="50"
      [footerHeight]="50"
      [externalPaging]="true"
      [count]="page.totalElements"
      [offset]="page.pageNumber"
      [limit]="page.size"
      (page)='setPage($event)'
      [externalSorting]="true"
      [loadingIndicator]="loading"
      [rowClass]="getRowClass"
      (sort)="onSort($event)"
      (activate)="onActivate($event)"
      (reorder)="onColumnReorder($event)"
      (resize)="onColumnResize($event)"
      [scrollbarH]="true"
      [selected]="selectedDevices"
      [selectionType]="'multi'">
    </ngx-datatable>
    <ng-template #dateTpl let-row="row" let-value="value">
      {{value | date: 'dd.MM.yyyy'}}
    </ng-template>
  </div>

[nssantos]

I'm getting the same error using server side pagination and I had set the selected property.

[tylersampson]

The issue, I assume, is because new objects are loaded for every page change. So when the selected items are compared to the page, there is technically no match.

For me I managed to solve this by using rowIdentity so that it will compare the "id" field of my data instead of the object.
https://swimlane.gitbooks.io/ngx-datatable/api/table/inputs.html#rowidentity

<ngx-datatable
    ...
    [rowIdentity]="getId">

getId(row) {    
    return row.id;
}

Hope this helps

[JackArlington]

This was the trick. Thank you!

[ReenaArora]

demo.zip

Hi, I am trying to implement checkbox selection with external paging but I am facing issue that suppose I have selected 2 records from first page and 3 records from second page and when I check the checkbox in the header row then it loses its earlier selection and retaining only those number of records that are in that particular page like 10 in my case.
Note: I am fetching data every time from server when we navigate from one page to another.
Please guide me.

[meenu1]

Hi , I am facing one issue while server based pagination. Suppose I am on first page and i clicked on select all checkbox now i am moving to second page second page is showing has no selection but due to first page select all records selection it is showing header checkbox as selected. I dont want second page to show header checkbox selected as there is no checkbox is selected.Please help.

[FrancescoBorzi]

I had the same issue and I've solved thanks to @tylersampson answer.

However I've improved it a little bit and posted it here: https://stackoverflow.com/questions/49757005/checkbox-selection-not-working-when-using-server-side-pagination/49757006#49757006

Also, there is a bug affecting the "select all" checkbox: https://github.com/swimlane/ngx-datatable/issues/1363

[ghost]

not working for. can any one provide with demo and server paging?

[anilkumar-padigela]

I am using client side pagination. I have customized the pagination as per the client requirement. I have a header check box in the ngx-datatable . I am using selectAllRowsonpage to true which means to selects rows in that page only. The issue is , after selecting select all header check box in first page, now when i move to second page still the header check box selected. i do not want the header check box to be selected when i did not select all items in that page. Can any body guide me .

[avinashk2946]

Hi I'm using server side pagination. Below are 2 issues I'm facing please help me.
1.When i select 1 record in 1st page and go to 2nd page, click on select all in header, the 1st page selected record does not retain, it gets lost and latest selected 10 records from current page(page no 2) will be there.

1. the header select all tick mark will retain if we go to other pages.

[avinashk2946]

demo.zip

Hi, I am trying to implement checkbox selection with external paging but I am facing issue that suppose I have selected 2 records from first page and 3 records from second page and when I check the checkbox in the header row then it loses its earlier selection and retaining only those number of records that are in that particular page like 10 in my case.
Note: I am fetching data every time from server when we navigate from one page to another.
Please guide me.

Did you find any solution for this..if yes please share

[askynet]

Thanks tylersampson for this https://github.com/swimlane/ngx-datatable/issues/874#issuecomment-329474076
as i used mongodb so my id is here _id
So replace id with _id and it is working.

[pierre-fromager]

I succeed in keeping selection while using ext paging (Angular7/[email protected]) setting [selectAllRowsOnPage]="false" and applying the getId method with [rowIdentity]="getId"