diff options
Diffstat (limited to 'vaadin-grid/demo.html')
| -rw-r--r-- | vaadin-grid/demo.html | 661 |
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> |