vaadin-gridJS API provides functions for scrolling vaadin-grid programmatically.
scrollToStart() restores the scroll position back to the beginning.scrollToEnd() scrolls vaadin-grid all the way to the last data row.scrollToRow(index [, destination]) allows scrolling to a specific row index. The optional destination parameter accepts the values "start" and "end".| # | Name | Surname | Activity |
|---|
function random(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
var employees = [];
var names = ['Artur', 'Patrik', 'Henrik', 'Teemu'];
var surnames = ['Signell', 'Lehtinen', 'Ahlroos', 'Paul'];
var activities = ['Design', 'Implement', 'Polish', 'Deliver'];
var targets = ['soup', 'Vaadin', 'dog', 'world peace'];
for (var i = 0; i < 400; i++) {
var row = [random(names), random(surnames), random(activities), random(targets)];
employees.push(row);
}
var grid = grid || document.querySelector('vaadin-grid');
HTMLImports.whenReady(function() {
grid.items = employees;
// code
// Some functionality requires all the previous processes
// to be finished before executing. Scrolling to a row
// naturally needs rows to exist so we'll wrap the
// actual call inside a function and pass it to vaadin-grid as a "then"
// callback so it's executed only after everything
// else is finished.
grid.then(function() {
// Scroll to a specific row.
grid.scrollToRow(70);
});
// end-code
grid.columns[0].renderer = function(cell) {
cell.element.innerHTML = cell.row.index;
};
document.getElementById('scrollToStart').addEventListener('click', function() {
grid.scrollToStart();
});
document.getElementById('scrollToEnd').addEventListener('click', function() {
grid.scrollToEnd();
});
document.getElementById('scrollToRow').addEventListener('click', function() {
grid.scrollToRow(100);
});
});