search

angular-ui / ui-scroll

Unlimited bidirectional scrolling over a limited element buffer for AngularJS applications
http://angular-ui.github.io/ui-scroll/demo/
MIT License
327 stars 107 forks source link

two table using the same datasource and scrolling in sync of both tables #215

Closed arsinawaz closed 5 years ago

arsinawaz commented 5 years ago

I want to run ui-scroll on same datasource used to build two tables and by scrolling one table it should also scroll the other table which is created via same datasource.

I have tried to achieve that using following sample code but it doesn't work. When scrolling any of the tables the behaviour of the lists is weird; it increases the size of the list and empty rows are shows. It can noticed in the plunker attached.

And if i change the data it only affects to the first table and the second one doesn't update the list. Also i can not make the sync (sorry for the stupid question, if anyone can help).

Here is how i am doing: https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview

Any help would be highly appreciated. TIA

dhilt commented 5 years ago

@arsinawaz Just saw your issue on stackoverflow and posted the answer with some workaround. I guess you can't set td as a viewport without addition efforts, this line is probably responsible for display issue.

Syncing two tables could be possible by catching 'scroll' event on one viewport (via addEventListener) and manually setting another viewport's scrollTop property to caught value.

arsinawaz commented 5 years ago

Wow thats was great thanks.