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) {
// Fetch the JSON data from a URL
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
if (xhr.status == 200) {
var json = JSON.parse(xhr.responseText);
callback(json.results);
}
}
}
var rowsNeeded = params.count > 0 ? params.count : 10;
xhr.open("GET", randomUserUrl + "?results=" + rowsNeeded, true);
xhr.send();
};
// 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
});