search

hjalmers / angular-generic-table

A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
https://hjalmers.github.io/angular-generic-table/
MIT License
105 stars 55 forks source link

Lazy loading with Checkbox selection not working #244

Closed LokeshBoran closed 6 years ago

LokeshBoran commented 6 years ago

I think there is an issue with Lazy Loading and Checkbox Selection method. If I combine both the examples checkbox selection is not working properly and sometimes paging is also not visible. I am sharing an live example for the same problem - example

Step-1

  1. Click on select all then click deselect all, its working fine.
  2. Click on any one or row checkbox then click select all checkbox, Its working fine. Now, If I click on deselect all this is not working or you can say deselect-all event is not fired.

If you find any solution plz let me know. Thanks in advance. :)

aadil50 commented 6 years ago

I am also facing a similar issue if there is any solution Please let me know.

LokeshBoran commented 6 years ago

@hjalmers still there is the issue. I updated the example with the latest build still I am able to reproduce the same issue.

LokeshBoran commented 6 years ago

Hey, @hjalmers d5ab4f7 there is serious issues occurs.

Step to reproduce -

  1. First select 2 or 3 checkbox and then select all it will always push current page size data into selectedRows every time when i click on select/deselect all checkbox.
hjalmers commented 6 years ago

@LokeshBoran, I haven’t published a new version containing the fix yet so you you have to hang tight a little while longer. I’ll open this issue again until it’s published though:)

hjalmers commented 6 years ago

@LokeshBoran the fix is now available with version 4.15.0. Please note however that it's a bit hard for the table to know the state of each row when it's loaded from the server. I'd probably suggest adding a property on each row and store the state on the server with the rest of the data if you want to persist the state. If you enable caching like I've done in this example it will work (not the select all option for data that hasn't been loaded yet though).

The problem with caching is that if the data on the server changes the table won't update when you paginate between pages that has already been loaded/cached. If caching is disabled on the other hand, the table will request new data when you go to a new page and the rows will get new row ids at the same time, that's also the reason why the state is not persisted.

We could keep the ids and just update the data but what if a new row has been added on the server and/or the order has changed? We can't just rely on row or page indexes to keep the states in sync when the records are fetched from the server and without a unique id it's very hard to sync a local record with a record received from the server. I've added the ability to set a custom row id #245 which simplifies syncing state with server as well.

LokeshBoran commented 6 years ago

@hjalmers thanks a lot for your changes. Looking forward to seeing more changes related to usability and stability of the library. And yes if I want to deselect checkbox on page-change than on gt-page-changed-lazy event I have to call deselectAllRows method.

hjalmers commented 6 years ago

No problem, yeah there are some manual steps involved now like deselecting rows if data set is replaced etc. I was also thinking about what should happen if you've checked "check all" and you go to the next page, the server will fetch data from the sever and I guess it should select them if they're not already selected otherwise the state of the select all checkbox won't be correct.