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 |
|---|
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 = [];
[names, surnames, activities, targets].forEach(function(array){
row.push(array[Math.floor(Math.random()*array.length)]);
});
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);
});
});