Polymer Vaadin Grid v2 migration -

i'm trying convert vaadin-grid v2 can use selectionmethods extract selected rows json or csv.

in comments working v1 vaadin grid, wich imports json.

imports included in import file:

• vaadin-grid.html
• vaadin-grid-selection-column.html
• vaadin-grid.html
• paper-elements/paper-elements.html
• list item

my vaadin contains files from: https://github.com/vaadin/vaadin-grid

the example file i'm working with: https://jsfiddle.net/saulis/sse7d93h/

    <!-- @license copyright (c) 2016 polymer project authors. rights reserved. code may used under bsd style license found @ http://polymer.github.io/license.txt complete set of authors may found @ http://polymer.github.io/authors.txt complete set of contributors may found @ http://polymer.github.io/contributors.txt code distributed google part of polymer project subject additional ip rights grant found @ 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 constant groepnr 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> 

just bind <vaadin-grid>s selected-items property , export array json, csv see fit. https://jsfiddle.net/gdagvsj6/1/