Row details
The vaadin-grid can on request show any content below any row,
e.g. detailed information about the row contents.
Select a row to open user details.
var templateWrapper = document.getElementById('templatewrapper');
var template = templateWrapper.querySelector('template');
function getUserDetails(user) {
template.user = user;
return templateWrapper.querySelector('.userdetails').outerHTML;
}
var grid = grid || document.querySelector('vaadin-grid');
HTMLImports.whenReady(function() {
grid.size = 1000;
grid.items = function(params, callback) {
var url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count;
getJSON(url, function(data) {
callback(data.results);
});
};
// code
// Add a row details generator
grid.rowDetailsGenerator = function(rowIndex) {
var elem = document.createElement('div');
elem.setAttribute('class', 'userdetailswrapper');
grid.getItem(rowIndex, function(error, item) {
if (!error) {
elem.innerHTML = getUserDetails(item.user);
}
});
return elem;
};
var detailsOpenIndex = -1;
// Show details for the selected row
grid.addEventListener('selected-items-changed', function() {
grid.setRowDetailsVisible(detailsOpenIndex, false);
var selected = grid.selection.selected();
if (selected.length == 1) {
grid.setRowDetailsVisible(selected[0], true);
detailsOpenIndex = selected[0];
}
});
// end-code
});