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();
-        }
-

- - -