1 files changed, 48 insertions, 0 deletions
diff --git a/demo/angular-grid.ts b/demo/angular-grid.ts
new file mode 100644
index 0000000..e6488fb
--- /dev/null
+++ b/demo/angular-grid.ts
@@ -0,0 +1,48 @@
+import {Component} from 'angular2/core';
+
+@Component({
+  selector: 'angular-grid',
+  templateUrl: 'angular-grid.html'
+})
+export class AngularGrid {
+  selected: Object;
+  grid = document.querySelector('angular-grid vaadin-grid');
+  columns = [
+    {name: "user.picture.thumbnail", width: 100, renderer: this.pictureRenderer},
+    {name: "user.gender"},
+    {name: "user.name.first"},
+    {name: "user.name.last"},
+    {name: "user.email"},
+  ];
+
+  constructor() {
+    // Once grid is ready, add a new header row with the gender select in it
+    this.grid.then(() =>
+      this.grid.header.addRow(1, ['', document.querySelector('angular-grid select')])
+    );
+  }
+
+  pictureRenderer(cell) {
+    cell.element.innerHTML = '<img style="width: 30px" src="' + cell.data + '" />';
+  }
+
+  items(params, callback) {
+    var gender = document.querySelector('angular-grid select');
+    var url = 'https://randomuser.me/api?nat=us&gender='
+      + gender.value + '&results=' + params.count;
+    getJSON(url, data =>
+      callback(data ? data.results : [], gender.value ? 50 : 100)
+  }
+
+  onSelect() {
+    this.selected = undefined;
+    const selectedIndex = this.grid.selection.selected()[0];
+    this.grid.getItem(selectedIndex, (err, data) => this.selected = data);
+  }
+
+  onFilterChange() {
+    this.grid.async(() => this.grid.refreshItems());
+    this.grid.scrollToStart();
+  }
+
+}