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/


Comments

Post a Comment

Popular posts from this blog

commonjs - How to write a typescript definition file for a node module that exports a function? -

consider, toml node module can use: // toml.d.ts declare module toml { export function parse(value:string):any; } declare module "toml" { export = toml; } then: /// <reference path="../../../../../defs/toml/toml.d.ts"/> import toml = require('toml'); toml.parse(...); however, node module export single function, such 'glob' ( https://github.com/isaacs/node-glob ). the node usage of module be: var glob = require("glob") glob("*.js", {}, callback(err, files) { ... }); you'd naively expect this: // glob.d.ts declare function globs(paths:string, options:any, callback:{(err:any, files:string[]):void; ...but because typescripts 'import' semantics bit strange, seems can use 'import .. = require()' statement alias modules . trying call: /// <reference path="../../../../../defs/glob/glob.d.ts"/> import blog = require('glob'); results in: error ts2072: mod...
Read more

openid - Okta: Failed to get authorization code through API call -

i'm integrating okta own idp server using okta's api. i'm implementing authorization code flow following steps below: in own server, use /api/v1/authn endpoint sessiontoken. use sessiontoken obtain authorization calling endpoint: /oauth2/v1/authorize?client_id=" + clientid + "&sessiontoken=" + sessiontoken + "&response_type=code&response_mode=query&scope=openid&redirect_uri=" + redirecturl + "&state=evanyang&nonce=" it's supposed return response status code 302 , location header containing redirect url code value. however, keep getting response status code 200 , without location header, html body saying "you using unsupported browser." , "javascript disabled on browser." according api documentation: http://developer.okta.com/docs/api/resources/oidc.html#authentication-request , sessiontoken parameter sufficient this: an okta one-time sessiontoken. allows api-based ...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more