Polymer Vaadin Grid v2 migration - polymer

Question

I'm trying to convert my vaadin-grid to v2 so I can use the selectionMethods to extract the selected rows as json or csv.
in comments my working v1 vaadin grid, wich imports a json.
imports which are included in the import file:
vaadin-grid.html
vaadin-grid-selection-column.html
vaadin-grid.html
paper-elements/paper-elements.html
List item
my vaadin contains all files from:
https://github.com/vaadin/vaadin-grid
the example file I'm working with:
https://jsfiddle.net/Saulis/sse7d93h/
<!--
#license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="my-afmelden-test">
<script>
var grid = document.getElementById('afmelden-grid');
grid.items = window.employees;
var data = window.employees[index];
</script>
<template>
<!-- <iron-ajax
auto
url = "../../signups.json"
handle-as="json"
last-response="{{gridData}}" ></iron-ajax> -->
<!-- <vaadin-grid id="afmelden-grid" items="{{gridData}}" visible-rows="0" selection-mode="multi">
<table>
<colgroup>
<col name="user.name.first" />
<col name="user.name.last" />
<col name="user.email" />
<col name="user.phone" />
</colgroup>
</table>
<button>derpdiederp</button>
<paper-button>derp</paper-button>
</vaadin-grid> -->
<iron-ajax url="https://randomuser.me/api?results=100&inc=name,email,picture" last-response="{{users}}" auto></iron-ajax>
<vaadin-grid id="grid" items="[[users.results]]">
<vaadin-grid-selection-column auto-select="[[autoSelect]]"></vaadin-grid-selection-column>
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header">#</template>
<template>[[index]]</template>
</vaadin-grid-column>
<vaadin-grid-column width="50px" flex-grow="0">
<template class="header"></template>
<template>
<img src="[[item.picture.thumbnail]]"></img>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">First Name</template>
<template>
<div class="capitalized">[[item.name.first]]</div>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Last Name</template>
<template>
<div class="capitalized">[[item.name.last]]</div>
</template>
</vaadin-grid-column>
<vaadin-grid-column>
<template class="header">Custom Selection</template>
<template>
<div style="display: flex; align-items: center">
<paper-button raised on-tap="_deselect" hidden="[[!selected]]">Deselect</paper-button>
<paper-button raised on-tap="_select" hidden="[[selected]]">Select</paper-button>
<paper-checkbox checked="{{selected}}">Selected</paper-checkbox>
</div>
</template>
</vaadin-grid-column>
</vaadin-grid>
<paper-button on-tap="myAfmelden">Afmelden</paper-button>
</template>
<iron-ajax
id="ajax_my_afmelden"
method="POST"
url="/cgi-bin/gerecht-toevoegen.py"
handle-as="json"
on-response="myAfmelden_ResponseHandler">
</iron-ajax>
</template>
<script>
var grid = document.getElementById('afmelden-grid');
grid.items = window.employees;
// Log selected designers list on select event
grid.addEventListener('selected-items-changed', function() {
console.log('Selected designers:');
gridData.selection.selected(function(index) {
var data = window.employees[index];
console.log('- ' + data[0] + ' ' + data[1]);
});
}.bind(grid));
</script>
<script>
Polymer({
is: 'my-afmelden-test',
properties: {
gridData: {
type: Array, /* array<student-info>: student-info = {id, firstName, lastName, sameGroup}
array is constant groepnr is changable */
},
},
myAfmelden: function() {
// console.log(Selected);
console.log("nu moet die komen...");
this.$.ajax_my_afmelden.contentType="application/json"
this.$.ajax_my_afmelden.body={
users: this.gridData[0]
};
this.$.ajax_my_afmelden.generateRequest();
console.log("Afmelden: " + this.gridData[0]);
// console.log('Selected: ' + this.selection.selected());
// console.log('- ' + data[0] + ' ' + data[1]);
},
myAfmelden_ResponseHandler:function(request_confirm) {
console.log("Response: " + request_confirm);
}
});
</script>
</dom-module>

Answer 1

Just bind to <vaadin-grid>s selected-items property and export the array to JSON, CSV as you see fit. https://jsfiddle.net/gdagvsj6/1/