aboutsummaryrefslogtreecommitdiffstats
path: root/vaadin-grid/vaadin-grid.html.orig
diff options
context:
space:
mode:
Diffstat (limited to 'vaadin-grid/vaadin-grid.html.orig')
-rw-r--r--vaadin-grid/vaadin-grid.html.orig845
1 files changed, 408 insertions, 437 deletions
diff --git a/vaadin-grid/vaadin-grid.html.orig b/vaadin-grid/vaadin-grid.html.orig
index 3e15627..27ab483 100644
--- a/vaadin-grid/vaadin-grid.html.orig
+++ b/vaadin-grid/vaadin-grid.html.orig
@@ -2,8 +2,8 @@
@element v-grid
-->
-<link rel='import' href='vaadin-grid-import.html'>
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../../bower_components/polymer/polymer.html'>
+<script type="text/javascript" language="javascript" src="VaadinGridImport.nocache.js"></script>
<style>
v-grid > table {
@@ -11,245 +11,368 @@
}
</style>
+<!--
+Data grid for showing large amounts of tabular data.
+
+Basic usage:
+```html
+<v-grid>
+ <table>
+ <colgroup>
+ <col header-text="Name">
+ <col header-text="Value">
+ <col header-text="Progress">
+ </colgroup>
+ <tbody>
+ <tr>
+ <td>Project A</td><td>10000</td><td>0.8</td>
+ </tr>
+ <tr>
+ <td>Project B</td><td>999999</td><td>0.8</td>
+ </tr>
+ </tbody>
+ </table>
+</v-grid>
+```
+
+More examples available at http://vaadin.github.io/components-examples/v-grid/
+-->
<dom-module id="v-grid">
<style>
- /* Functional properties */
-
+ /* Host styles */
:host {
- white-space: nowrap;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
- transition: opacity 200ms;
+ box-sizing: border-box;
+ display: block;
+ font: 400 13px/1.1 Roboto, sans-serif;
+ color: rgba(0, 0, 0, 0.87);
cursor: default;
+ transition: opacity 200ms;
+ white-space: nowrap;
}
- :host(.loading) {
- opacity: 0;
+ :host(.v-grid-loading) {
height: 0;
+ opacity: 0;
transition: none;
}
- :host,
- .v-grid-tablewrapper > table,
- .v-grid-body,
- .v-grid-header,
- .v-grid-footer,
- .v-grid-row {
- display: block;
- box-sizing: border-box;
+ :host > div {
+ height: 100%;
+ outline: none;
+ position: relative;
}
- .v-grid-cell {
- display: -webkit-inline-flex;
- display: inline-flex;
- -webkit-align-items: center;
- align-items: center;
+ /* Anim */
+ @keyframes v-grid-spin-360 {
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ @-webkit-keyframes v-grid-spin-360 {
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
+
+ /* Table wrapper */
+ .v-grid-tablewrapper {
box-sizing: border-box;
overflow: hidden;
- text-overflow: ellipsis;
- background: #fff;
+ outline: none;
+ position: absolute;
+ z-index: 5;
}
- :host > div {
- position: relative;
- outline: none;
+ .v-grid-tablewrapper:before {
+ display: none;
}
+ .v-grid-tablewrapper > table {
+ box-sizing: border-box;
+ display: block;
+ }
+
+ .v-grid-loading-data .v-grid-tablewrapper:before {
+ -webkit-animation: v-grid-spin-360 400ms linear infinite;
+ animation: v-grid-spin-360 400ms linear infinite;
+ border: 2px solid #03A9F4;
+ border-radius: 50%;
+ border-right-color: transparent;
+ border-top-color: transparent;
+ content: "";
+ display: block;
+ height: 16px;
+ left: 50%;
+ margin-left: -8px;
+ margin-top: -8px;
+ position: absolute;
+ top: 50%;
+ width: 16px;
+ }
+
+ /* Scroller styles */
.v-grid-scroller {
+ box-sizing: border-box;
+<<<<<<< HEAD
+=======
+ background: #fff;
+ }
+
+ :host > div {
+ position: relative;
+>>>>>>> master
+ outline: none;
position: absolute;
z-index: 1;
- outline: none;
- box-sizing: border-box;
}
.v-grid-scroller-horizontal {
+ bottom: 0;
left: 0;
right: 0;
- bottom: 0;
overflow-y: hidden;
-ms-overflow-y: hidden;
}
.v-grid-scroller-vertical {
+ bottom: 0;
right: 0;
top: 0;
- bottom: 0;
overflow-x: hidden;
-ms-overflow-x: hidden;
}
- .v-grid-tablewrapper {
- position: absolute;
- overflow: hidden;
- box-sizing: border-box;
- z-index: 5;
- outline: none;
- }
-
- .v-grid-header-deco,
- .v-grid-footer-deco,
.v-grid-horizontal-scrollbar-deco {
+ bottom: 0;
+ box-sizing: border-box;
+ left: 0;
position: absolute;
right: 0;
- box-sizing: border-box;
}
- .v-grid-header,
- .v-grid-body,
- .v-grid-footer {
- position: absolute;
+ /* Grid body */
+ .v-grid-body {
+ box-sizing: border-box;
+ display: block;
left: 0;
- z-index: 10;
+ position: absolute;
+ top: 0;
+ z-index: 0;
}
- .v-grid-header,
- .v-grid-header-deco {
+ :host(:not([selection-mode])) .v-grid-body,
+ :host([selection-mode="single"]) .v-grid-body {
+ cursor: pointer;
+ }
+
+ .v-grid-body tr {
+ height: 48px;
+ left: 0;
top: 0;
+ position: absolute;
}
- .v-grid-footer,
- .v-grid-footer-deco {
- bottom: 0;
+ .v-grid-body td {
+ opacity: 0;
}
- .v-grid-horizontal-scrollbar-deco {
- left: 0;
- bottom: 0;
+ .v-grid-row-has-data td {
+ border-bottom: 1px solid #e3e3e3;
+ opacity: 1;
}
- .v-grid-body {
- z-index: 0;
- top: 0;
+ /* Row styles */
+ .v-grid-row {
+ box-sizing: border-box;
+ display: block;
}
- .v-grid-body .v-grid-row {
- position: absolute;
- top: 0;
- left: 0;
+ .v-grid-row:hover td {
+ background-color: #eeeeee;
}
- :host(:not([selection-mode])) .v-grid-body,
- :host([selection-mode="single"]) .v-grid-body {
- cursor: pointer;
+ .v-grid-row-selected td {
+ background-color: #f5f5f5;
}
- .v-grid-editor {
- position: absolute;
- z-index: 20;
- overflow: hidden;
+ /* Focus styles */
+ .v-grid-row:after {
+ background-color: #03A9F4;
+ bottom: 0;
+ content: "";
+ height: 2px;
left: 0;
+ pointer-events: none;
+ position: absolute;
right: 0;
- margin-top: -1px;
+ transition: all 0.16s ease-in-out;
+ transform: scaleX(0.0);
+ z-index: 1;
}
- .v-grid-editor-cells {
- position: relative;
+ :focus .v-grid-row-focused:after {
+ transform: scaleX(1.0);
}
- .v-grid-editor-cells > div {
- display: inline-block;
+ :focus .v-grid-row-focused {
+ -webkit-animation: v-grid-row-focused 820ms ease-in-out;
+ animation: v-grid-row-focused 820ms ease-in-out;
}
- .v-grid-editor-footer {
- display: -webkit-flex;
- display: flex;
+ @keyframes v-grid-row-focused {
+ 50% {
+ color: #03A9F4;
+ } 100% {
+ color: inherit;
+ }
+ }
+
+ /* Grid cell */
+ .v-grid-cell {
-webkit-align-items: center;
align-items: center;
+ background-color: white;
box-sizing: border-box;
+ display: -webkit-inline-flex;
+ display: inline-flex;
+ height: inherit;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition: opacity 0.1s ease-in;
}
- .v-grid-editor-message {
- -webkit-flex: 1;
- flex: 1;
- }
-
- /* Theming properties */
-
- :host {
- font: 400 100%/1.1 Roboto, sans-serif;
- color: rgba(0, 0, 0, 0.83);
- }
-
- .v-grid-cell {
- padding: 0 16px;
- height: 32px;
+ /* Grid header */
+ .v-grid-header {
+ box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+ box-sizing: border-box;
+ display: block;
+ left: 0;
+ position: absolute;
+ top: 0;
+ z-index: 10;
}
- .v-grid-header,
- .v-grid-header-deco {
- box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.20);
+ .v-grid-header tr {
+ color: rgba(0, 0, 0, 0.54);
+ font-size: 12px;
+ height: 56px;
}
.v-grid-header th {
- background: #03A9F4;
- color: #fff;
- text-transform: uppercase;
- font-weight: 600;
- font-size: 0.8125em;
- height: 32px;
- border-right: 1px solid rgba(255, 255, 255, 0.3);
- border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+ font-weight: 500;
}
.v-grid-header-deco {
- background: #03A9F4;
+ background-color: white;
border-left: 1px solid rgba(255, 255, 255, 0.3);
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ top: 0;
z-index: 1;
}
+ /* Sorting */
.v-grid-header [class*="sort-"] {
+ font-weight: 500;
+ font-size: 12px;
+ color: rgba(0, 0, 0, 0.87);
position: relative;
- padding-right: 32px;
}
.v-grid-header [class*="sort-"]:after {
+<<<<<<< HEAD
+ font-size: 8px;
+ padding-left: 8px;
+ }
+
+ .v-grid-header .sort-asc:after {
+ content: url(arrow-up.svg) " " attr(sort-order);
+=======
position: absolute;
font-family: sans-serif;
content: url(sort-asc.svg) " " attr(sort-order);
right: 12px;
font-size: 12px;
width: 11px;
- height: 5px;
+ top: 50%;
+ margin-top: -0.5em;
+>>>>>>> master
}
.v-grid-header .sort-desc:after {
- content: url(sort-desc.svg) " " attr(sort-order);
+ content: url(arrow-down.svg) " " attr(sort-order);
}
- .v-grid-header [class*="sort-"][sort-order]:after {
- right: 20px;
+ /* Grid footer */
+ .v-grid-footer {
+ bottom: 0;
+ box-sizing: border-box;
+ display: block;
+ left: 0;
+ position: absolute;
+ z-index: 10;
}
- .v-grid-footer td,
- .v-grid-footer-deco,
- .v-grid-horizontal-scrollbar-deco {
- background: #E6E6E6;
- font-size: 0.8125em;
+ .v-grid-footer td {
+ font-size: 12px;
font-weight: 500;
color: rgba(0, 0, 0, 0.56);
+ height: 56px;
}
- .v-grid-footer td {
- border-right: 1px solid rgba(255, 255, 255, 0.5);
- border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+ .v-grid-footer-deco {
+ bottom: 0;
+ box-sizing: border-box;
+ position: absolute;
+ right: 0;
+ z-index: 1;
}
- .v-grid-footer-deco {
- border-left: 1px solid rgba(255, 255, 255, 0.5);
+ /* Cell padding */
+ .v-grid-header th,
+ .v-grid-body td,
+ .v-grid-footer td {
+ /* Google Material Design specifies 56dp inbetween columns.
+ Columns are as wide as their widest item. This approach
+ might not be applicable for us, as we allow column expand
+ ratio, etc. Options 1, 2 and 3 listed below. */
+ /* Divide padding equally among cells. */
+ padding: 0 28px 0 28px;
+ /* Put all padding on right side.
+ padding: 0 56px 0 0; */
+ /* No padding, allow users to specify expand ratio.
+ padding: 0; */
}
- .v-grid-horizontal-scrollbar-deco {
- border-top: 1px solid rgba(255, 255, 255, 0.5);
+ .v-grid-header th:first-child,
+ .v-grid-body td:first-child,
+ .v-grid-footer td:first-child {
+ padding-left: 24px;
}
.v-grid-header th:last-child,
+ .v-grid-body td:last-child,
.v-grid-footer td:last-child {
- border-right: 0;
+ padding-right: 24px;
}
- .v-grid-header tr:last-child th,
- .v-grid-footer tr:last-child td {
- border-bottom: 0;
+ .v-grid-header th.frozen,
+ .v-grid-body td.frozen,
+ .v-grid-footer td.frozen {
+ border-right: 1px solid #e3e3e3;
+ padding: 0 24px 0 24px;
+ }
+
+ .v-grid-header th.frozen + th,
+ .v-grid-body td.frozen + td,
+ .v-grid-footer td.frozen + td {
+ padding-left: 24px;
+ padding-right: 24px;
}
/* TODO We need some other way of defining the frozen column divider than
@@ -261,81 +384,9 @@
.v-grid-cell.frozen.frozen {
position: relative;
z-index: 1;
- border-right: 0;
- box-shadow: 1px 0 0 0 rgba(0,0,0,0.04),
- 2px 0 0 0 rgba(0,0,0,0.04),
- 3px 0 0 0 rgba(0,0,0,0.04),
- 4px 0 0 0 rgba(0,0,0,0.04);
- }
-
- .v-grid-row-selected > td {
- background-color: #f2f2f2;
- }
-
- .v-grid-editor {
- background: #fff;
- box-shadow: 0 0 0 1px rgba(0,0,0,0.15),
- 0 8px 17px 0 rgba(0,0,0,0.2),
- 0 6px 20px 0 rgba(0,0,0,0.188235);
- margin-top: -5px;
- }
-
- .v-grid-editor[style*="bottom"] {
- margin-top: 0;
- margin-bottom: -5px;
- }
-
- .v-grid-editor input[type="text"],
- .v-grid-editor input:not([type]) {
- box-sizing: border-box;
- width: 100%;
- height: 100%;
- padding: 0 0 1px;
- font: inherit;
- color: inherit;
- border: 0;
- border-bottom: 1px solid rgba(0,0,0,0.2);
- background: transparent;
- outline: none;
- transition: all 200ms;
- }
-
- .v-grid-editor input[type="text"]:focus {
- border-bottom: 2px solid #03A9F4;
- padding-bottom: 0;
- }
-
- .v-grid-editor-cells > div {
- box-sizing: border-box;
- margin: 5px 0;
- padding: 5px 16px;
- height: 42px;
- }
-
- .v-grid-editor-buttons button {
- height: 32px;
- padding: 0 11px;
- margin: 5px;
- font: inherit;
- font-size: 14px;
- color: #03A9F4;
- text-transform: uppercase;
- background: transparent;
- border: 0;
- border-radius: 3px;
- outline: none;
- cursor: pointer;
- transition: all 200ms;
- }
-
- .v-grid-editor-buttons button:focus {
- box-shadow: 0 2px 6px 0 rgba(0,0,0,0.5);
- }
-
- .v-grid-editor-buttons button:active:focus {
- box-shadow: none;
}
+ /* Input styles */
input[type="checkbox"] {
position: absolute;
opacity: 0;
@@ -346,9 +397,9 @@
left: 0;
box-sizing: border-box;
display: block;
- width: 16px;
- height: 16px;
- border: 2px solid rgba(0,0,0,0.3);
+ width: 18px;
+ height: 18px;
+ border: 2px solid #7a7a7a;
border-radius: 2px;
cursor: pointer;
transition: background-color 120ms, border-color 120ms;
@@ -358,18 +409,14 @@
outline: none;
}
- input[type="checkbox"]:focus + label {
- border-color: rgba(0,0,0,0.6);
- }
-
input[type="checkbox"] + label:after {
content: url("tick.svg");
position: absolute;
- top: -2px;
- left: -2px;
+ top: -1px;
+ left: -1px;
display: block;
- width: 16px;
- height: 16px;
+ width: 18px;
+ height: 18px;
transition: all 200ms;
-webkit-transform: scale(0);
transform: scale(0);
@@ -389,7 +436,8 @@
input[type="checkbox"]:indeterminate + label:after {
content: "–";
- font-size: 14px;
+ left: -2px;
+ font-size: 13px;
text-align: center;
-webkit-transform: none;
transform: none;
@@ -399,12 +447,12 @@
input[type="checkbox"] + label:before {
content: "";
position: absolute;
- top: -14px;
- left: -14px;
- width: 40px;
- height: 40px;
+ top: -13px;
+ left: -13px;
+ width: 41px;
+ height: 41px;
border-radius: 50%;
- background: #666;
+ background-color: #666;
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
@@ -419,43 +467,18 @@
}
input[type="checkbox"]:checked + label:before {
- background: #03A9F4;
+ background-color: #03A9F4;
}
/* Small adjustments for the checkbox in the header */
-
- .v-grid-header input[type="checkbox"] + label {
- border-color: rgba(255,255,255,0.5);
- }
-
.v-grid-header input[type="checkbox"] + label:before {
- background: #fff;
+ background-color: white;
}
.v-grid-header input[type="checkbox"] + label:after {
transition: none;
}
- /* Focus styles */
-
- .v-grid-row-focused:before {
- content: "";
- position: absolute;
- z-index: 1;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- border: 1px solid rgba(0,0,0,0.2);
- pointer-events: none;
- opacity: 0;
- transition: opacity 300ms;
- }
-
- :focus .v-grid-row-focused:before {
- opacity: 1;
- }
-
#measure {
width: 100% !important;
height: 100% !important;
@@ -472,81 +495,33 @@
width: 100% !important;
height: 100% !important;
}
+
</style>
<template>
<div id="measure" class="v-grid">
- <object id="measureobject" class="v-grid" type="text/html"></object>
+ <iframe id="measureobject" class="v-grid"></iframe>
</div>
<content></content>
</template>
</dom-module>
<script>
- function loadComponent() {
VGrid = Polymer({
+
is: "v-grid",
_grid: undefined,
properties: {
/**
- * The row editor specific fields
+ * Object for controlling and accessing the data source of the grid.
*
- * @property editor
- * @type Object
- */
- editor: {
- type: Object,
- value: function() {
- var _this = this;
- return {
- get enabled() {
- return _this._grid.getEditor().isEnabled();
- },
- set enabled(enabled) {
- _this._grid.getEditor().setEnabled(enabled);
- if (_this.editable !== enabled) {
- _this.editable = enabled;
- }
- },
- get handler() {
- return _this._grid.getEditor().getHandler();
- },
- set handler(handler) {
- _this._grid.getEditor().setHandler(handler);
- },
- get saveButtonText() {
- return _this._grid.getEditor().getSaveButtonText();
- },
- set saveButtonText(saveButtonText) {
- _this._grid.getEditor().setSaveButtonText(saveButtonText);
- },
- get cancelButtonText() {
- return _this._grid.getEditor().getSaveButtonText();
- },
- set cancelButtonText(cancelButtonText) {
- _this._grid.getEditor().setCancelButtonText(cancelButtonText);
- },
- editRow: function(row) {
- _this._grid.getEditor().editRow(row);
- },
- save: function() {
- _this._grid.getEditor().save();
- },
- cancel: function() {
- _this._grid.getEditor().cancel();
- }
- };
- },
- },
- /**
- * The data source object for the grid.
- *
- * @property data
- * @type Object
+ * @property {Data} data
+ * @type {Data}
*/
data: {
type: Object,
+ readOnly: true,
value: function() {
var _this = this;
return {
@@ -566,13 +541,6 @@
this._source = source;
},
- /**
- * Sets the sort order to use. Setting this causes the Grid to re-sort
- * itself. If set to null, the sort order is cleared.
- *
- * @attribute sortOrder
- * @type array
- */
get sortOrder() {
return _this._grid.getSortOrder();
},
@@ -582,20 +550,20 @@
clearCache: function(estimatedNewSize) {
_this._grid.getDataSource().clearCache(estimatedNewSize);
- },
-
+ }
};
}
},
/**
- * Object for manipulating header rows
+ * Object for controlling and accessing the header rows in the grid.
*
- * @property header
- * @type Object
+ * @property {Header} header
+ * @type {Header}
*/
header: {
type: Object,
+ readOnly: true,
value: function() {
var _this = this;
return {
@@ -611,13 +579,6 @@
setRowClassName: function(rowIndex, className) {
_this._grid.getStaticSection().setHeaderRowClassName(rowIndex, className);
},
- /**
- * Sets the default row of the header. The default row is a special header
- * row providing a user interface for sorting columns.
- *
- * @attribute rowIndex
- * @type number
- */
get defaultRow() {
return _this._grid.getStaticSection().getDefaultHeader();
},
@@ -638,13 +599,14 @@
},
/**
- * Object for manipulating footer rows
+ * Object for controlling and accessing the footer rows in the grid.
*
- * @property footer
- * @type Object
+ * @property {Footer} footer
+ * @type {Footer}
*/
footer: {
type: Object,
+ readOnly: true,
value: function() {
var _this = this;
return {
@@ -673,8 +635,15 @@
}
},
+ /**
+ * Object for controlling and accessing the selected rows in the grid.
+ *
+ * @property {Selection} selection
+ * @type {Selection}
+ */
selection: {
type: Object,
+ readOnly: true,
value: function() {
var _this = this;
return {
@@ -716,7 +685,7 @@
}
};
}
- },
+ }
},
attributeChanged: function(name, type, value) {
@@ -724,12 +693,6 @@
case 'disabled':
this.disabled = typeof value == "string";
break;
- case 'editable':
- this.editable = typeof value == "string";
- break;
- case 'style':
- this._grid.redraw();
- break;
case 'selection-mode':
this.selection.mode = value;
break;
@@ -740,15 +703,24 @@
listeners: {
/**
+ * A change in the sorting order.
+ *
* @event sort
*/
/**
+ * Row is selected or deselected.
+ *
* @event select
*/
- 'select': 'onSelect'
+ /**
+ * A change in the selection mode.
+ *
+ * @event selectionmodechange
+ */
+ 'selectionmodechange': '_onSelectionModeChange'
},
- onSelect: function() {
+ _onSelectionModeChange: function() {
this.serializeValueToAttribute(this.selection.mode, "selection-mode");
},
@@ -757,66 +729,49 @@
},
ready: function() {
- var _this = this;
-
- // Set read-only properties
- ["data", "editor", "header", "footer"].forEach(function(prop) {
- Object.defineProperty(_this, prop, {
- writable: false
- });
- });
- setTimeout(function() {
- for (var i = 0; i < _this.attributes.length; i++) {
- _this.attributeChanged(_this.attributes[i].nodeName, null, _this.attributes[i].nodeValue);
+ this.async(function() {
+ for (var i = 0; i < this.attributes.length; i++) {
+ this.attributeChanged(this.attributes[i].nodeName, null, this.attributes[i].nodeValue);
}
- }, 1);
-
-<<<<<<< Updated upstream
- this._bindResizeListener();
-=======
- this.columns = _this._grid.getColumns();
-
->>>>>>> Stashed changes
+ });
},
_bindResizeListener: function() {
var _this = this;
this.$.measureobject.addEventListener("load", function() {
this.contentDocument.defaultView.addEventListener('resize', function(e) {
- _this._grid.redraw();
- });
-
- _this.then(function() {
- // ...because one then just isn't enough.
- _this.then(function() {
- _this._grid.redraw();
- });
+ _this._grid.updateSize();
});
+ _this._grid.updateSize();
});
- this.$.measureobject.data = "about:blank";
+
+ this.$.measureobject.src = "about:blank";
},
attached: function() {
var _this = this;
- _this._grid.attached(this, Polymer.dom(this).querySelector("table"), Polymer.dom(this.root));
+ this._grid.attached(this, Polymer.dom(this).querySelector("table"), Polymer.dom(this.root));
this._bindResizeListener();
// hide until fully loaded
- _this.toggleClass('loading', true);
- _this.then(function() {
- _this.toggleClass('loading', false);
+ this.toggleClass('v-grid-loading', true);
+ this.then(function() {
+ _this.toggleClass('v-grid-loading', false);
});
},
/**
* Scrolls to a certain row, using user-specified scroll destination.
- * Since its asynchronous nature, this method returns a 'thenable'
- * so as you can use the 'then()' method to be notified when the data
- * request finished and the scroll is actually moved.
+ *
+ * Scrolling happens asynchronously, so this method returns a 'thenable'
+ * which can be used to be notified when the scrolling is finished.
+ *
+ * Example: `grid.scrollToRow(10, 'end').then(doMoreStuff);`
*
* @method scrollToRow
- * @param {number} index - zero-based index of the row to scroll to.
- * @param {string} scrollDestination - desired destination placement of scrolled-to-row.
+ * @param {number} index - Zero-based index of the row to scroll to.
+ * @param {string} scrollDestination - Desired destination placement of scrolled-to-row. Valid values are `any`, `start`, `middle` and `end`. Defaults to `any`.
+ * @return {v-grid}
*/
scrollToRow: function(index, scrollDestination) {
this._grid.scrollToRow(index, scrollDestination);
@@ -824,12 +779,15 @@
},
/**
- * Scrolls to the beginning of the very first row.
- * Since its asynchronous nature, this method returns a 'thenable'
- * so as you can use the 'then()' method to be notified when the data
- * request finished and the scroll is actually moved.
+ * Scrolls to the beginning of the grid.
+ *
+ * Scrolling happens asynchronously, so this method returns a 'thenable'
+ * which can be used to be notified when the scrolling is finished.
+ *
+ * Example: `grid.scrollToStart().then(doMoreStuff);`
*
* @method scrollToStart
+ * @return {v-grid}
*/
scrollToStart: function() {
this._grid.scrollToStart();
@@ -837,12 +795,15 @@
},
/**
- * Scrolls to the end of the very last row.
- * Since its asynchronous nature, this method returns a 'thenable'
- * so as you can use the 'then()' method to be notified when the data
- * request finished and the scroll is actually moved.
+ * Scrolls to the end of the grid.
+ *
+ * Scrolling happens asynchronously, so this method returns a 'thenable'
+ * which can be used to be notified when the scrolling is finished.
+ *
+ * Example: `grid.scrollToEnd().then(doMoreStuff);`
*
* @method scrollToEnd
+ * @return {v-grid}
*/
scrollToEnd: function() {
this._grid.scrollToEnd();
@@ -850,55 +811,83 @@
},
/**
- * Adds new column
+ * Adds a new column. Column is added at the end if `beforeColumn` is not defined.
*
* @method addColumn
- * @param {Object} column
- * @param {string} beforeColumn
+ * @param {Column} column - Column to be added.
+ * @param {string} beforeColumn - Index or id of the column before which the new column should be added.
*/
addColumn: function(column, beforeColumn) {
this._grid.addColumn(column, beforeColumn);
},
/**
- * Removes column with certain id
+ * Removes a column with certain id
*
* @method removeColumn
- * @param {string} id
+ * @param {string} id - Column to be removed.
*/
removeColumn: function(id) {
this._grid.removeColumn(id);
},
- /**
- * Sets the style generator that is used for generating styles for rows.
- *
- * @attribute rowClassGenerator
- * @type object
- */
get rowClassGenerator() {
return this._grid.getRowClassGenerator();
},
- set rowClassGenerator(rowClassGenerator) {
- this._grid.setRowClassGenerator(rowClassGenerator);
- },
+
/**
- * Sets the style generator that is used for generating styles for cells.
+ * The style generator that is used for generating styles for rows.
+ *
+ * Example:
+ * ```
+ * grid.rowClassGenerator = function(row) {
+ * var activity = row.data[2];
+ * return 'activity-' + activity.toLowerCase();
+ * };
+ *```
*
- * @attribute cellClassGenerator
- * @type object
+ * @property {function} rowClassGenerator
+ * @param {Row} row - Reference to the row being rendered.
+ * @type {function}
*/
+ set rowClassGenerator(row) {
+ this._grid.setRowClassGenerator(row);
+ },
+
get cellClassGenerator() {
return this._grid.getCellClassGenerator();
},
- set cellClassGenerator(cellClassGenerator) {
- this._grid.setCellClassGenerator(cellClassGenerator);
+
+ /**
+ * The style generator that is used for generating styles for cells.
+ *
+ * Example:
+ * ```
+ * grid.cellClassGenerator = function(cell) {
+ * if (cell.index == 2) {
+ * var activity = cell.row.data[2];
+ * return 'activity-' + activity.toLowerCase();
+ * }
+ * return '';
+ * };
+ * ```
+ * @property {function} cellClassGenerator
+ * @param {Cell} cell - Reference to the cell being rendered.
+ * @type {function}
+ *
+ */
+ set cellClassGenerator(cell) {
+ this._grid.setCellClassGenerator(cell);
},
+
/**
- * Disables the grid functionality.
+ * Disables the grid.
*
- * @attribute disabled
- * @type boolean
+ * Attribute: `disabled`
+ *
+ * @property {boolean} disabled
+ * @default false
+ * @type {boolean}
*/
get disabled() {
return this._grid.isDisabled();
@@ -907,27 +896,18 @@
this._grid.setDisabled(disabled);
this.reflectPropertyToAttribute("disabled");
},
+
/**
- * Enables the row editor feature (double click/tap or or Enter key in a content row activates the editing mode)
- *
- * @attribute editable
- * @type boolean
- */
- get editable() {
- return this.editor.enabled;
- },
- set editable(editable) {
- this.editor.enabled = editable;
- this.reflectPropertyToAttribute("editable");
- },
- /**
- * Sets the number of frozen columns in this grid. Setting the count to 0
+ * The number of frozen columns in this grid. Setting it to 0
* means that no data columns will be frozen, but the built-in selection
* checkbox column will still be frozen if it's in use. Setting the count to
* -1 will also disable the selection column.
*
- * @attribute frozen-columns
- * @type Number
+ * Attribute: `frozen-columns`
+ *
+ * @property {number} frozenColumns
+ * @default 0
+ * @type {number}
*/
get frozenColumns() {
return this._grid.getFrozenColumns();
@@ -936,26 +916,32 @@
this._grid.setFrozenColumns(frozenColumns);
this.reflectPropertyToAttribute("frozenColumns");
},
+
/**
- * Declares the number of visible rows in the grid. Implicitly sets the height
+ * The number of visible rows in the grid. Implicitly sets the height
* in the inline style, overriding any previous height. Setting style.height
* in this case should be ignored if possible.
*
- * @attribute rows
- * @type Number
+ * Attribute: `rows`
+ *
+ * @property {number} rows
+ * @default 10
+ * @type {number}
*/
get rows() {
- return this._grid.getRows();
+ var rows = this._grid.getRows();
+ return rows > 0 ? rows : undefined;
},
set rows(rows) {
this._grid.setRows(rows);
this.reflectPropertyToAttribute("rows");
},
+
/**
- * The columns array
+ * The array of Columns attached to the grid.
*
- * @property columns
- * @type array
+ * @property {Array<Column>} columns
+ * @type {Array<Column>}
*/
get columns() {
return this._grid.getColumns();
@@ -963,31 +949,16 @@
set columns(cols) {
this._grid.setColumns(cols);
},
+
/**
* Executes a callback when the grid has finished any pending work.
*
- * @method them
+ * @method then
* @param {Function} callback
- * @return a chainable promise
+ * @return {Promise}
*/
- then: function(cb) {
- return this._grid.then(cb);
+ then: function(callback) {
+ return this._grid.then(callback);
}
}); // End Polymer prototype
-
- // Give some time to gwt async processes to run (we need this in FF)
- setTimeout(function() {
- vaadin._v_grid_ready = true;
- document.dispatchEvent(new CustomEvent('v-grid-ready'));
- }, 5);
-
- } // End loadComponent function
-
- if (window.vaadin && window.vaadin.GridComponent) {
- loadComponent();
- } else {
- document.addEventListener("v-grid-loaded", function() {
- loadComponent();
- });
- }
</script>
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-22 19:13:23 +0000