vaadin-grid Code Examples - Polymer Integration

Polymer Integration (Light DOM data source)

Static data can be easily bound to vaadin-grid light DOM cells with the template repeater.

#		First Name	Last Name	Email
{{index}}		{{item.user.name.first}}	{{item.user.name.last}}	{{item.user.email}}


        HTMLImports.whenReady(function() {
          // code
          var template = template || document.querySelector('template.my-grid-with-template');
          var grid = document.querySelector('#my-grid-with-template');

          template.onSelect = function() {
            if(grid.selection.selected().length === 0) {
              template.selected = null;
            } else {
              template.selected = template.users[grid.selection.selected()];
            }
          };

          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {

            if (xhr.readyState == XMLHttpRequest.DONE ) {
              if(xhr.status == 200){
                template.users = JSON.parse(xhr.responseText).results;
              }
            }
          }
          xhr.open("GET", randomUserUrl + "?results=25", true);
          xhr.send();

          // end-code
        });

Polymer Integration (Function data source)

In case the data is loaded lazily or it changes dynamically a function datasource is a better option. Click a row to see an enlarged user image.


        HTMLImports.whenReady(function() {
          // code
          var template = template || document.querySelector('template.my-grid-with-ds');
          var grid = document.querySelector('#my-grid-with-ds');

          template.onSelect = function() {
            if(grid.selection.selected().length === 0) {
              template.selected = null;
            } else {
              grid.getItem([grid.selection.selected()], function(err, item) {
                template.selected = item;
              });
            }
          };

          template.size = 100;
          template.items = function(params, callback) {
            var xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
              if (xhr.readyState == XMLHttpRequest.DONE ) {
                if(xhr.status == 200) {
                  callback(JSON.parse(xhr.responseText).results);
                }
              }
            };

            xhr.open("GET", randomUserUrl + '?results=' + Math.max(params.count, 1), true);
            xhr.send();
          };

          template.onSelect = function() {
            if(grid.selection.selected().length === 0) {
              template.selected = null;
            } else {
              grid.getItem([grid.selection.selected()], function(err, item) {
                template.selected = item;
              });
            }
          };

          grid.columns[0].renderer = function(cell) {
            cell.element.innerHTML = "<img style='width: 30px' src='" + cell.data + "' />";
          };
          // end-code
        });

vaadin-grid Polymer Integration

Polymer Integration (Light DOM data source)

Polymer Integration (Function data source)