Data rows can be selected either through UI interaction (by clicking, tapping or hitting space on a highlighted cell) or alternatively by using the selection JavaScript API.
| Name | Value | Progress |
|---|---|---|
| Project A | 123 | 0.8 |
| Project B | 456 | 0.9 |
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
// code
grid.selection.deselect(0);
grid.selection.select(1);
// end-code
});
vaadin-grid. It allows only one row to be selected at once.
You can toggle between multi and all modes by clicking the checkbox in vaadin-grid header.
| 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");
var controls = document.createElement("div");
controls.innerHTML = 'Selection mode:';
var modeSelect = document.createElement("select");
["single", "multi", "all", "disabled"].forEach(function(it){
var option = document.createElement("option");
option.value = it;
option.innerHTML = it;
modeSelect.appendChild(option);
});
modeSelect.value = "multi";
controls.appendChild(modeSelect);
grid.parentElement.appendChild(controls);
// Bind the mode select value to vgrid.selection.mode
modeSelect.addEventListener("change", function() {
grid.selection.mode = modeSelect.value;
});
grid.addEventListener("selection-mode-changed", function() {
modeSelect.value = grid.selection.mode;
});
var grid = grid || document.querySelector("vaadin-grid");
HTMLImports.whenReady(function() {
grid.items = employees;
// code
// Set the selection mode to "multi"
grid.selection.mode = "multi";
// end-code
});
You can simply ask vaadin-grid for all the selected row indexes with selection.selected()
function which returns an array of integers for you to process further.
This works fine on most cases with single and multi selection modes, but if your grid contains tons
of data and the selection mode is set to all, you're better off with selection.deselected().
| 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
// Log the selections / deselection to console on select event
grid.addEventListener("selected-items-changed", function() {
console.log("Selected: " + grid.selection.selected());
console.log("Deselected: " + grid.selection.deselected());
});
// end-code
});
Another option for processing the selections is to iterate trough them.
The selection.selected() and selection.deselected() functions accept an iterator function
as the first argument so you can loop trough all the selections without ever populating an array.
If however your iterator function returns a value, then it's considered a mapper function meaning that the selection API function will return an array of pre-mapped values.
| 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
// Log selected designers list on select event
grid.addEventListener("selected-items-changed", function() {
console.log("Selected designers:");
grid.selection.selected(function(index) {
var data = employees[index];
if (data[2] === "Design") {
console.log("-" + data[0] + " " + data[1]);
}
});
});
// end-code
});
The selection.selected() and selection.deselected() functions also accept
startIndex and endIndex as the second and third argument. These can be used to process
the selections in batches. selection.size property comes in handy here.
All the three parameters (iterator/mapper, startIndex, endIndex) have default values so any of them can be omitted (or set as undefined).
| 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
// Log selected indexes in batches of 5
grid.addEventListener("selected-items-changed", function() {
for (var i = 0; i < grid.selection.size; i += 5){
console.log(grid.selection.selected(undefined, i, i+4));
}
});
// end-code
});