diff options
Diffstat (limited to 'vaadin-grid/demo.html')
| -rw-r--r-- | vaadin-grid/demo.html | 661 |
1 files changed, 661 insertions, 0 deletions
diff --git a/vaadin-grid/demo.html b/vaadin-grid/demo.html new file mode 100644 index 0000000..daa637e --- /dev/null +++ b/vaadin-grid/demo.html @@ -0,0 +1,661 @@ +<!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> |