blob: 41e1e2c79b829bf4836dffbb99c4d7076ed76189 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
<!doctype html>
<!--
title: Polymer
order: 1
layout: page
-->
<html>
<head>
<title>vaadin-core-elements Code Examples - Polymer Integration</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="common.html">
<style>
.demo-wrapper > div {
position: relative;
}
.user-image {
width: auto;
height: auto;
margin: 0;
border: none;
}
.user-image img {
position: absolute;
bottom: 0px;
right: 0px;
width: auto;
max-width: 33%;
max-height: 33%;
}
</style>
</head>
<body unresolved>
<section>
<h1>vaadin-core-elements</h1>
<table-of-contents select="h3" class="toc"></table-of-contents>
</section>
<section id="template-example">
<h3 id="headers">Polymer Integration (Light DOM data source)</h3>
<p>Static data can be easily bound to vaadin-grid light DOM cells with <a href="https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat">the template repeater</a>.</p>
<p><strong>Note:</strong> IE/Edge doesn't support template-repeating inside a table element.</p>
<!--<code-example source>
<div>
<template is="dom-bind" class="my-grid-with-template" demo>
<vaadin-grid id="my-grid-with-template" on-selected-items-changed="onSelect">
<table>
<colgroup>
<col width="64">
<col width="100">
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>#</th>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<template is="dom-repeat" items="[[users]]">
<tr>
<td>{{index}}</td>
<td>
<img src="{{item.user.picture.thumbnail}}" style="width: 24px"></img>
</td>
<td>{{item.user.name.first}}</td>
<td>{{item.user.name.last}}</td>
<td>{{item.user.email}}</td>
</tr>
</template>
</tbody>
</table>
</vaadin-grid>
<template is="dom-if" if="{{selected}}">
<div class="user-image">
<img src="{{selected.user.picture.large}}"></img>
</div>
</template>
</template>
</div>
<code demo-var="template">
var template = template || document.querySelector('template.my-grid-with-template');
template.addEventListener('dom-change', function() {
// code
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()];
}
};
getJSON('https://randomuser.me/api?results=25', function(data) {
template.users = data.results;
});
// end-code
});
if (template.render) {
// This is needed to make the template render on Chrome in vaadin-doc portlet
template.render();
}
</code>
</code-example>-->
<script>
// Need this hack to make this demo work on vaadin-docs site
// (by default JSoup, which is used at server-side parsing of the source files,
// doesn't allow a template tag in a table tbody)
var wrapper = document.querySelector('#template-example');
if (/Trident|Edge/.test(navigator.userAgent)) {
wrapper.parentElement.removeChild(wrapper);
} else {
wrapper.innerHTML = wrapper.innerHTML.replace(/<!--|-->/g, '');
}
</script>
</section>
<section>
<h3>Polymer Integration (Function data source)</h3>
<p>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.</p>
<code-example source>
<div>
<template is="dom-bind" class="my-grid-with-ds" demo>
<vaadin-grid id="my-grid-with-ds" items="[[items]]" size="[[size]]" on-selected-items-changed="onSelect">
<table>
<colgroup>
<col name="user.picture.thumbnail" width="100">
<col name="user.name.first">
<col name="user.name.last">
<col name="user.email">
</colgroup>
</table>
</vaadin-grid>
<template is="dom-if" if="{{selected}}">
<div class="user-image">
<img src="{{selected.user.picture.large}}"></img>
</div>
</template>
</template>
</div>
<code demo-var="template">
// 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();
}
</code>
<code hidden>
document.body.removeAttribute('unresolved');
</code>
</code-example>
</section>
</body>
</html>
|
