aboutsummaryrefslogtreecommitdiffstats
path: root/vaadin-grid/demo.html
diff options
context:
space:
mode:
authorBuild Agent <build@vaadin.com>2015-05-21 15:55:35 +0300
committerSauli Tähkäpää <sauli@vaadin.com>2015-07-03 13:29:17 +0300
commit9da3b4f1552ee065e2d2ed7f7d9b2ee8245e00c3 (patch)
tree9cd941f518067e0b6158ab082fb1e772e9fab7cc /vaadin-grid/demo.html
parent5759ee06e8fbdc2caeb912d614ec5a42834d009d (diff)
downloadvaadin-core-9da3b4f1552ee065e2d2ed7f7d9b2ee8245e00c3.tar.gz
vaadin-core-9da3b4f1552ee065e2d2ed7f7d9b2ee8245e00c3.zip
Release version 0.3.0-rc1.0.3.0-snapshot
Diffstat (limited to 'vaadin-grid/demo.html')
-rw-r--r--vaadin-grid/demo.html661
1 files changed, 0 insertions, 661 deletions
diff --git a/vaadin-grid/demo.html b/vaadin-grid/demo.html
deleted file mode 100644
index daa637e..0000000
--- a/vaadin-grid/demo.html
+++ /dev/null
@@ -1,661 +0,0 @@
-<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
-<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-
-<link href="vaadin-grid.html" rel="import">
-<script src="demodata.js"></script>
-<style>
-td.red, th.red, .red th, .red td, td.foot1, .foot1 td {
- background: mistyrose !important;
-}
-td.blue, th.blue, .blue th, .blue td, td.foot2, .foot2 td {
- background: aliceblue !important;
-}
-.foot1, .foot2 {
- font-weight: bold !important;
- text-align: center;
-}
-</style>
-</head>
-<body>
- <script>
- function waitUntilGridReady(id, cb) {
- if (window.vaadin && vaadin._v_grid_ready) {
- cb(document.getElementById(id));
- } else {
- document.addEventListener("v-grid-ready", function(){
- cb(document.getElementById(id));
- });
- }
- }
- </script>
-
-<ol>
- <li>
- <h3>Simplest possible with inline data</h3>
- <v-grid rows=1>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- <tbody>
- <tr>
- <td>Grid</td>
- <td>10000</td>
- <td>0.8</td>
- </tr>
- <tr>
- <td>Vaadin X</td>
- <td>999999</td>
- <td>0.8</td>
- </tr>
- </tbody>
- </table>
- </v-grid>
- </li>
-
- <li>
- <h3>Simplest possible with explicitly formatted inline data (i.e. children in cells)</h3>
- <v-grid id="childrenInCells">
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- <tbody>
- <tr>
- <td>Grid</td>
- <td>10 000€</td>
- <td><progress value="0.8" /></td>
- </tr>
- <tr>
- <td>Vaadin X</td>
- <td>999 999€</td>
- <td><progress value="0.01" /></td>
- </tr>
- </tbody>
- </table>
- </v-grid>
-
- </li>
-
- <li>
- <h3>Simplest possible with data source (all data available, no formatting)</h3>
- <v-grid id='myGrid'>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- </table>
- </v-grid>
-
- <script>
- // We need to wait until the WC has been initialized
- // It could take a long if we are compiling SDM
- waitUntilGridReady("myGrid", function(grid) {
- var data = [ [ "Grid", 10000, 0.8 ], [ "Vaadin X", 999999, 0.01 ],
- [ "designer", 999999, 0.01 ] ];
-
- grid.data.source = function(req) {
- var array = data.slice(req.index, req.index + req.count);
- req.success(array, data.length);
- };
- });
- </script>
- </li>
-
- <li>
- <h3>Simplest possible with lazy data source (no formatting)</h3>
- <v-grid id='myBigGrid'>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- </table>
- </v-grid>
-
- <script>
- waitUntilGridReady("myBigGrid", function(grid) {
-
- grid.data.source = function(req) {
- setTimeout(function() {
- req.success(myBigData.slice(req.index, req.index + req.count), myBigData.length);
- }, req.index ? 800 : 0);
- };
- });
- // Note: myBigData is defined at the end of the page
- </script>
- </li>
-
- <li>
- <h3>Simplest possible with data source and formatting</h3>
-
- <v-grid id="myFormatGrid">
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- </table>
- </v-grid>
- <script>
- waitUntilGridReady("myFormatGrid", function(grid) {
- var data = [ [ "Grid", 10000, 0.8 ], [ "Vaadin X", 999999, 0.01 ], ];
-
- grid.data.source = function(req) {
- req.success(data.slice(req.index, req.index + req.count), data.length);
- };
-
- var valueRenderer = function(cell) {
- cell.element.innerHTML = '$' + cell.data;
- };
-
- var progressRenderer = function(cell) {
- var child = document.createElement("progress");
- child.setAttribute('value', cell.data);
- cell.element.appendChild(child);
- };
- grid.columns[1].renderer = valueRenderer;
- grid.columns[2].renderer = progressRenderer;
- });
- </script>
- </li>
-
- <li>
- <h3>Mapping data from a JS object into columns</h3>
-
- <v-grid id="myMapGrid">
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- </table>
- </v-grid>
- <button id="updateButton">update</button>
- <button id="addButton">add</button>
- <button id="removeButton">remove</button>
- <script>
- var data = [{ name: "Grid", value: 10000, progress: 0.8 },
- { name: "Vaadin X", value: 999999, progress: 0.01 }];
-
- waitUntilGridReady("myMapGrid", function(grid) {
- grid.data.source = function(req) {
- req.success(data.slice(req.index, req.index + req.count), data.length);
- };
-
- grid.columns[0].valueGenerator = function(rowObject, columnIndex) {
- return "> " + rowObject.name;
- };
-
- grid.columns[1].name = "value";
- grid.columns[2].name = "progress";
- });
-
- document.querySelector('#updateButton').addEventListener('click', function(e) {
- var grid = document.querySelector('#myMapGrid');
-
- var updatedItem = {name: "Button X", value: Math.round(Math.random() * 1000), progress: Math.random()};
- data[0] = updatedItem;
- grid.data.clearCache();
- });
-
- document.querySelector('#addButton').addEventListener('click', function(e) {
- var grid = document.querySelector('#myMapGrid');
-
- data.splice(0, 0, {name: "Button " + data.length, value: 111, progress: 0.01});
- grid.data.clearCache(data.length);
- });
-
- document.querySelector('#removeButton').addEventListener('click', function(e) {
- var grid = document.querySelector('#myMapGrid');
-
- data.splice(0, 1);
- grid.data.clearCache(data.length);
- });
- </script>
- </li>
-
- <li>
- <h3>Mapping data from a array into single column</h3>
- <v-grid id="with-single-column">
-
- <table>
- <col header-text="Name">
- </table>
- </v-grid>
- <script>
- waitUntilGridReady("with-single-column", function(grid) {
- var data = [
- "Grid",
- "Vaadin X"
- ];
-
- grid.data.source = function(req) {
- req.success(data.slice(req.index, req.index + req.count), data.length);
- };
- });
- </script>
- </li>
-
- <li>
- <h3>Complex headers</h3>
- <v-grid>
- <table>
- <col>
- <col>
- <col>
- <thead>
- <tr class="blue">
- <th><button>I'm a button</button></th>
- <th colspan="2">Status</th>
- </tr>
- <tr default class="red">
- <th>Name</th>
- <th class="blue">Value</th>
- <th>Progress</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Grid</td>
- <td>10000</td>
- <td>0.8</td>
- </tr>
- <tr>
- <td>Vaadin X</td>
- <td>999999</td>
- <td>0.8</td>
- </tr>
- </tbody>
- <tfoot>
- <tr class="foot1">
- <th colspan=3>This is a footer line in a cell</th>
- </tr>
- <tr class="foot2">
- <th colspan=3><span>Some widgets in a footer</span> <input type=text/> <button>Click</button></th>
- </tr>
- </tfoot>
- </table>
- </v-grid>
- </li>
-
- <li>
- <h3>Selection</h3>
-
- <v-grid id="myMultiSelGrid" selection-mode="multi">
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- </table>
- </v-grid>
- <div id="smbuttons">
- <input type="radio" name="selectionmode" value="single">single</input>
- <input type="radio" name="selectionmode" value="multi" checked="checked">multi</input>
- <input type="radio" name="selectionmode" value="all">all</input>
- <input type="radio" name="selectionmode" value="disabled">disabled</input>
- </div>
- <div id="sizelabel"></div>
- <div id="deselectedlabel" style="overflow: hidden; text-overflow: ellipsis;"></div>
- <div id="selectedlabel" style="overflow: hidden; text-overflow: ellipsis;"></div>
- <script>
- waitUntilGridReady("myMultiSelGrid", function(grid) {
- grid.data.source = myBigData;
-
- var updateFields = function(event) {
- document.getElementById("sizelabel").innerText = "selection.size: " + grid.selection.size;
-
- var selectedLabel = document.getElementById("selectedlabel");
- if (grid.selection.mode === "all"){
- selectedLabel.style.color = "#f00";
- selectedLabel.innerText = "selection.selected() PREFER deselected() WITH SELECTION MODE \"all\"): " + grid.selection.selected();
- } else {
- selectedLabel.style.color = "#000";
- selectedLabel.innerText = "selection.selected(): " + grid.selection.selected();
- }
- document.getElementById("deselectedlabel").innerText = "selection.deselected(): " + grid.selection.deselected();
-
- document.querySelector("input[name='selectionmode'][checked='checked']").removeAttribute("checked");
- document.querySelector("input[name='selectionmode'][value='"+ grid.selection.mode +"']").setAttribute("checked", "checked");
- };
-
- var modeListener = function(e) {
- grid.selection.mode = e.target.value;
- updateFields();
- };
- var radios = document.querySelectorAll("input[name='selectionmode']");
- for (var i = 0; i< radios.length; i++) {
- radios[i].addEventListener("click", modeListener);
- }
-
- grid.addEventListener("select", updateFields);
- });
- </script>
- </li>
-
- <li>
- <h3>Simplest possible polymer dom-repeat from array of objects</h3>
- <dom-module id="my-grid-with-template">
- <template>
- <v-grid selectionMode='multi'>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- <tbody>
- <template is="dom-repeat" items="{{mydata}}">
- <tr>
- <td>{{item.name}}</td>
- <td>{{item.value}}</td>
- <td>{{item.progress}}</td>
- </tr>
- </template>
- </tbody>
- </table>
- </v-grid>
- </template>
- </dom-module>
- <script>
- Polymer({
- is: 'my-grid-with-template',
- ready: function() {
- this.mydata = [
- {"name": "Grid", "value": "10000", "progress": 0.8},
- {"name": "Vaadin X", "value": "999999", "progress": 0.8}
- ];
- }
- }) ;
- </script>
- <my-grid-with-template></my-grid-with-template>
- </li>
-
- <li>
- <h3>Simplest possible polymer dom-repeat from simple array</h3>
- <dom-module id="my-grid-with-template2">
- <template>
- <v-grid selectionMode='multi'>
- <table>
- <col header-text="Name">
- <tbody>
- <template is="dom-repeat" items="{{mydata}}">
- <tr>
- <td>{{item}}</td>
- </tr>
- </template>
- </tbody>
- </table>
- </v-grid>
- </template>
- </dom-module>
- <script>
- Polymer({
- is: 'my-grid-with-template2',
- ready: function() {
- this.mydata = [
- "Grid",
- "Vaadin X"
- ];
- }
- }) ;
- </script>
- <my-grid-with-template2></my-grid-with-template2>
- </li>
-
- <li>
- <h3>Simplest possible polymer dom-repeat from array of objects and selection multiple</h3>
- <dom-module id="my-grid-with-template-multi">
- <template>
- <v-grid selectionMode='multi'>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <col header-text="Progress">
- <tbody>
- <template is="dom-repeat" items="{{mydata}}">
- <tr>
- <td>{{item.name}}</td>
- <td>{{item.value}}</td>
- <td>{{item.progress}}</td>
- </tr>
- </template>
- </tbody>
- </table>
- </v-grid>
- </template>
- </dom-module>
- <script>
- Polymer({
- is: 'my-grid-with-template-multi',
- ready: function() {
- this.mydata = [
- {"name": "Grid", "value": "10000", "progress": 0.8},
- {"name": "Vaadin X", "value": "999999", "progress": 0.8}
- ];
- }
- }) ;
- </script>
- <my-grid-with-template-multi></my-grid-with-template-multi>
- </li>
-
- <li>
- <h3>Sort example</h3>
- <v-grid id='mySortGrid'>
- <table>
- <col header-text="Name" sortable>
- <col header-text="Value" sortable>
- <col header-text="Progress" sortable>
- </table>
- </v-grid>
- <button id="mySortButton">Sort by column 1</button>
- Sort: <span id="mySortLabel"></span>
-
- <script>
- waitUntilGridReady("mySortGrid", function(grid) {
- var data = [ [ "Gridddd", 10000, 0.8 ], [ "Vaadin X", 999999, 0.01 ],
- [ "designer", 43256, 0.01 ], [ "TK", 1967, 0.05 ] ];
-
- var button = document.getElementById("mySortButton");
- var label = document.getElementById("mySortLabel");
-
- var dir = 'desc';
- button.addEventListener("click", function(event) {
- dir = dir == 'desc' ? "asc" : "desc";
- grid.data.sortOrder = [{
- column: 1,
- direction: dir
- }];
- });
-
- grid.addEventListener("sort", function() {
- var idx = grid.data.sortOrder[0].column;
- var asc = grid.data.sortOrder[0].direction == 'asc';
- data.sort(function(a, b){
- return a[idx] < b[idx] && asc ? -1 : 1;
- });
- label.textContent = JSON.stringify(grid.sortOrder);
- })
- grid.data.source = function(req) {
- req.success(data.slice(req.index, req.index + req.count), data.length);
- };
- });
- </script>
- </li>
-
- <li>
- <h3>Row editor</h3>
- <v-grid id='editableGrid' style='width: 200px'>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <tbody>
- <tr>
- <td>Grid</td>
- <td>10000</td>
- </tr>
- <tr>
- <td>VaadinX</td>
- <td>1000</td>
- </tr>
- </tbody>
- </table>
- </v-grid>
-
- <script>
- waitUntilGridReady("editableGrid", function(grid) {
- grid.columns[0].name = "name";
- grid.columns[1].name = "value";
- grid.editor.enabled = true;
- grid.editor.saveButtonText = "Ok";
- grid.editor.cancelButtonText = "Nope";
- grid.editor.handler = {
- getCellEditor: function(columnObject) {
- return document.createElement("input");
- },
- bind: function(req) {
- for (var i = 0; i < req.grid.columns.length; i++) {
- var col = req.grid.columns[i];
- var el = req.getCellEditor(col);
- el.value = req.dataItem[i];
- }
- req.success();
- },
- save: function(req) {
- for (var i = 0; i < req.grid.columns.length; i++) {
- var col = req.grid.columns[i];
- var el = req.getCellEditor(col);
- var cell = grid.lightDom.querySelectorAll("tbody tr")[req.rowIndex].querySelectorAll("td")[i];
- cell.innerHTML = el.value;
- }
- req.success();
- }
- };
- });
- </script>
- </li>
-
- <li>
- <h3>DOM API</h3>
- <v-grid
- selection-mode='disabled'
- selected-rows='0,2,3'
- rows=3
- frozen-columns= '-1'
- style='width: 100%'
- editable
- >
- <table >
- <colgroup>
- <col sortable sort-direction="desc" header-text="Name">
- <col sortable sort-direction="asc" header-text="Value">
- <col width=40 header-text="Progress">
- <col min-width=200 header-text="foo">
- <col header-text="bar">
- <col flex=100 header-text="foo">
- <col flex=0 header-text="bar">
- </colgroup>
- <tbody>
- <tr>
- <td>Grid</td>
- <td>10000</td>
- <td>0.8</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- </tr>
- <tr>
- <td>Vaadin X</td>
- <td>999999</td>
- <td>0.8</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- </tr>
- <tr>
- <td>Designer</td>
- <td>10000</td>
- <td>0.5</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- </tr>
- <tr>
- <td>Spreadsheet</td>
- <td>10000</td>
- <td>0.5</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- </tr>
- <tr>
- <td>TK</td>
- <td>10000</td>
- <td>0.5</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- <td>lorem ipsum</td>
- <td>dolor sit amet</td>
- </tr>
- </tbody>
- </table>
- </v-grid>
- </li>
-
- <li>
- <h3>Header and Footer</h3>
- <v-grid id='staticsections'>
- <table>
- <col header-text="Name">
- <col header-text="Value">
- <tbody>
- <tr>
- <td>Grid</td>
- <td>10000</td>
- </tr>
- <tr>
- <td>VaadinX</td>
- <td>1000</td>
- </tr>
- </tbody>
- </table>
- </v-grid>
- <br/>
- <button id="headervisibility">Toggle header visibility</button>
- <button id="footervisibility">Toggle footer visibility</button>
- <script>
- waitUntilGridReady("staticsections", function(grid) {
- // Remove the header row
- grid.header.removeRow(0);
-
- // Add a header row
- var colspanToggle = document.createElement("button");
- colspanToggle.innerHTML = "Toggle colspan";
- colspanToggle.addEventListener("click", function(){
- var cell = grid.header.getCell(0, 0);
- cell.colspan = cell.colspan == 1 ? 2 : 1;
- });
- grid.header.addRow(0, [colspanToggle, "Value"]);
-
- // Add a footer row
- grid.footer.addRow(0, ["sum", 11000]);
-
- // Toggle header / footer visibility
- document.getElementById("headervisibility").addEventListener("click", function(){
- grid.header.hidden = !grid.header.hidden;
- });
- document.getElementById("footervisibility").addEventListener("click", function(){
- grid.footer.hidden = !grid.footer.hidden;
- });
-
- });
- </script>
- </li>
-
-</ol>
-</body>
-</html>