path: root/vaadin-grid/vaadin-grid.html

<!--
@element v-grid
-->

<link rel='import' href='vaadin-grid-import.html'>
<link rel='import' href='../../polymer/polymer.html'>
<link rel="stylesheet" href="vaadin-grid.css" shim-shadowdom>

<dom-module id="v-grid">
  <template>
  </template>
</dom-module>

<script>
  var prototype = {
    is: "v-grid",

    grid: undefined,

    properties: {
      /**
       * The columns array
       *
       * @property columns
       * @type array
       */
      columns: {
        type: Array,
        observer: 'columnsChanged'
      },

      /**
       * The row editor specific fields
       *
       * @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
       */
      data: {
        type: Object,
        value: function() {
          var _this = this;
          return {

            get source() {
              return this._source;
            },
            set source(source) {
              var sourceFunction = source;
              if (Array.isArray(source)) {
                sourceFunction = function(req) {
                  var array = source.slice(req.index, req.index + req.count);
                  req.success(array, source.length);
                };
              }
              _this.grid.setDataSource(sourceFunction);

              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();
            },
            set sortOrder(sortOrder) {
              _this.grid.setSortOrder(sortOrder);
            },

            clearCache: function(estimatedNewSize) {
              _this.grid.getDataSource().clearCache(estimatedNewSize);
            },

          };
        }
      },

      /**
       * Object for manipulating header rows
       *
       * @property header
       * @type Object
       */
      header: {
        type: Object,
        value: function() {
          var _this = this;
          return {
            getCell: function(rowIndex, columnId) {
              return _this.grid.getStaticSection().getHeaderCell(rowIndex, columnId);
            },
            addRow: function(rowIndex, cellContent) {
              _this.grid.getStaticSection().addHeader(rowIndex, cellContent);
            },
            removeRow: function(rowIndex) {
              _this.grid.getStaticSection().removeHeader(rowIndex);
            },
            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();
            },
            set defaultRow(rowIndex) {
              _this.grid.getStaticSection().setDefaultHeader(rowIndex);
            },
            get hidden() {
              return _this.grid.getStaticSection().isHeaderHidden();
            },
            set hidden(hidden) {
              _this.grid.getStaticSection().setHeaderHidden(hidden);
            },
            get rowCount() {
              return _this.grid.getStaticSection().getHeaderRowCount();
            }
          };
        }
      },

      /**
       * Object for manipulating footer rows
       *
       * @property footer
       * @type Object
       */
      footer: {
        type: Object,
        value: function() {
          var _this = this;
          return {
            getCell: function(rowIndex, columnId) {
              return _this.grid.getStaticSection().getFooterCell(rowIndex, columnId);
            },
            addRow: function(rowIndex, cellContent) {
              _this.grid.getStaticSection().addFooter(rowIndex, cellContent);
            },
            removeRow: function(rowIndex) {
              _this.grid.getStaticSection().removeFooter(rowIndex);
            },
            setRowClassName: function(rowIndex, className) {
              _this.grid.getStaticSection().setFooterRowClassName(rowIndex, className);
            },
            get hidden() {
              return _this.grid.getStaticSection().isFooterHidden();
            },
            set hidden(hidden) {
              _this.grid.getStaticSection().setFooterHidden(hidden);
            },
            get rowCount() {
              return _this.grid.getStaticSection().getFooterRowCount();
            }
          };
        }
      },

      selection: {
        type: Object,
        value: function() {
          var _this = this;
          return {
            select: function(index) {
              _this.grid.getSelectionModel().select(index);

              return _this;
            },
            deselect: function(index) {
              _this.grid.getSelectionModel().deselect(index);

              return _this;
            },
            clear: function() {
              _this.grid.getSelectionModel().clear();

              return _this;
            },
            selectAll: function() {
              _this.grid.getSelectionModel().selectAll();

              return _this;
            },
            selected: function(mapper, from, to) {
              return _this.grid.getSelectionModel().selected(mapper, from, to);
            },
            deselected: function(mapper, from, to) {
              return _this.grid.getSelectionModel().deselected(mapper, from, to);
            },
            get size() {
              return _this.grid.getSelectionModel().size();
            },
            get mode() {
              return _this.grid.getSelectionMode();
            },
            set mode(mode) {
              _this.grid.setSelectionMode(mode);
              _this.serializeValueToAttribute(_this.selection.mode, "selection-mode");
            }
          };
        }
      },
    },

    columnsChanged: function() {
      var oldcols = this.grid.getColumns();
      var newcols = this.columns;
      if (!oldcols._obs || newcols != oldcols) {
        if (oldcols._obs) {
          Polymer.ArrayObserve.unobserve(oldcols, oldcols._obs);
        }
        var _this = this;
        newcols._obs = function() {
          _this.grid.setColumns(newcols);
        };
        Polymer.ArrayObserve.observe(newcols, newcols._obs);
      }
      this.grid.setColumns(newcols);
    },

    attributeChanged: function(name, type, value) {
      switch (name) {
        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;
        default:
          this[Polymer.CaseMap.dashToCamelCase(name)] = value;
      }
    },

    listeners: {
      /**
       * @event sort
       */
      /**
       * @event select
       */
      'select': 'onSelect'
    },

    onSelect: function() {
      this.serializeValueToAttribute(this.selection.mode, "selection-mode");
    },

    created: function() {
      this.grid = new vaadin.GridComponent();
    },

    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);
        }
      }, 1);

      this.columns = _this.grid.getColumns();
    },

    attached: function() {
      this.grid.attached(this, Polymer.dom(this).querySelector("table"), Polymer.dom(this.root));
    },

    /**
     * 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.
     *
     * @method scrollToRow
     * @param {number} index - zero-based index of the row to scroll to.
     * @param {string} scrollDestination - desired destination placement of scrolled-to-row.
     */
    scrollToRow: function(index, scrollDestination) {
      this.grid.scrollToRow(index, scrollDestination);
      return this;
    },

    /**
     * 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.
     *
     * @method scrollToStart
     */
    scrollToStart: function() {
      this.grid.scrollToStart();
      return this;
    },

    /**
     * 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.
     *
     * @method scrollToEnd
     */
    scrollToEnd: function() {
      this.grid.scrollToEnd();
      return this;
    },

    /**
     * Adds new column
     *
     * @method addColumn
     * @param {Object} column
     * @param {string} beforeColumn
     */
    addColumn: function(column, beforeColumn) {
      this.grid.addColumn(column, beforeColumn);
    },

    /**
     * Removes column with certain id
     *
     * @method removeColumn
     * @param {string} id
     */
    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.
     *
     * @attribute cellClassGenerator
     * @type object
     */
    get cellClassGenerator() {
      return this.grid.getCellClassGenerator();
    },
    set cellClassGenerator(cellClassGenerator) {
      this.grid.setCellClassGenerator(cellClassGenerator);
    },
    /**
     * Disables the grid functionality.
     *
     * @attribute disabled
     * @type boolean
     */
    get disabled() {
      return this.grid.isDisabled();
    },
    set disabled(disabled) {
      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
     * 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
     */
    get frozenColumns() {
      return this.grid.getFrozenColumns();
    },
    set frozenColumns(frozenColumns) {
      this.grid.setFrozenColumns(frozenColumns);
      this.reflectPropertyToAttribute("frozenColumns");
    },
    /**
     * Declares 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
     */
    get rows() {
      return this.grid.getRows();
    },
    set rows(rows) {
      this.grid.setRows(rows);
      this.reflectPropertyToAttribute("rows");
    },
    then: function(cb) {
      return this.grid.then(cb);
    }
  };

  function loadComponent() {
    VGrid = 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 Event('v-grid-ready'));
    }, 5);
  }

  if (window.vaadin && window.vaadin.GridComponent) {
    loadComponent();
  } else {
    document.addEventListener("v-grid-loaded", function() {
      loadComponent();
    });
  }
</script>