I am using ui-scroll in my application and ran into some issues.
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:
Template:
<table border="1">
<tbody>
<td>
<table>
<tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
<tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
<tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</td>
</tbody>
</table>
Controller:
var datasource = {};
datasource.get = function (index, count, success) {
$timeout(function () {
var result = [];
for (var i = index; i <= index + count - 1; i++) {
result.push("item #" + i);
}
success(result);
}, 100);
};
$scope.datasource = datasource;
https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview
Any help would be highly appreciated. TIA
When scrolling too fast the first and last rows which ui-scroll adds for some scrolling calculations tend to have larger than 100px height. How to tackle them? Can i just hide them?
Something is not ok with display css-property in these template and it seems a good idea to extract both viewports into separate div-containers... The following code fixes empty rows issue:
<table border="1">
<tbody>
<td>
<div ui-scroll-viewport style="height: 400px;">
<table>
<tbody id="first-tbody" >
<tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div ui-scroll-viewport style="height: 400px;">
<table>
<tbody id="second-tbody" >
<tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
<td>{{item}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tbody>
</table>
The updated demo is here: https://plnkr.co/edit/JjAiw3zvG4uIWGNjLUU7
Regarding 2 viewports scroll syncing, I guess, following approach might work:
$scope.datasource = {};
$scope.datasource.get = function (index, count, success) {
var result = [];
for (var i = index; i <= index + count - 1; i++) {
result.push("item #" + i);
}
success(result);
};
const vp1 = document.getElementById('vp1');
const vp2 = document.getElementById('vp2');
vp1.addEventListener('scroll', function() {
vp2.scrollTop = vp1.scrollTop;
});
where "vp1" and "vp2" are ids of the viewports.