vaadin-core-elements Code Examples

Polymer Integration (Light DOM data source)

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

Note: IE/Edge doesn't support template-repeating inside a table element.

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.


        // code
        var template = template || document.querySelector('template.my-grid-with-ds');

        template.addEventListener('dom-change', function() {
          var grid = document.querySelector('#my-grid-with-ds');

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

          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 url = 'https://randomuser.me/api?index=' + params.index + '&results=' + params.count;
            getJSON(url, function(data) {
              callback(data.results);
            });
          };

        });

        // end-code

        if (template.render) {
          // This is needed to make the template render on Chrome in vaadin-doc portlet
          template.render();
        }