diff --git a/doc/README.md b/doc/README.md index b677bacbf..fa3f0b861 100644 --- a/doc/README.md +++ b/doc/README.md @@ -75,6 +75,7 @@ gridstack.js API * a string (ex: '100px', '10em', '10rem', '10%') * 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files. * `'auto'` - height will be calculated to match cell width (initial square grid). +- `row` - number of rows. This is a shortcut of writting `minRow: sameValue, maxRow: sameValue`. - `column` - number of columns (default: `12`) which can change on the fly with `column(N)` as well. See [example](http://gridstackjs.com/demo/column.html) - `ddPlugin` - class that implement drag'n'drop functionallity for gridstack. If `false` grid will be static. (default: `null` - first available plugin will be used) - `disableDrag` - disallows dragging of widgets (default: `false`). @@ -86,6 +87,7 @@ gridstack.js API - `handle` - draggable handle selector (default: `'.grid-stack-item-content'`) - `handleClass` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`) - `itemClass` - widget class (default: `'grid-stack-item'`) +- `minRow` - minimum rows amount. Default is `0` - `maxRow` - maximum rows amount. Default is `0` which means no maximum rows - `minWidth` - minimal width. If window width is less than or equal to, grid will be shown in one-column mode (default: `768`) - `oneColumnModeDomSort` - set to `true` if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: `false`) @@ -103,7 +105,9 @@ gridstack.js API ## Grid attributes - `data-gs-animate` - turns animation on +- `data-gs-row` - number of rows. This is a shortcut of writting `data-gs-min-row="sameValue" data-gs-max-row="sameValue"` . - `data-gs-column` - amount of columns. Setting non-default value must be supported by equivalent change in CSS, [see docs here](https://github.com/gridstack/gridstack.js#change-grid-columns). +- `data-gs-min-row` - minimum rows amount. Default is `0`. - `data-gs-max-row` - maximum rows amount. Default is `0` which means no maximum rows. - `data-gs-current-row` - current rows amount. Set by the library only. Can be used by the CSS rules. diff --git a/src/gridstack.js b/src/gridstack.js index 47dbe0256..1d33753a4 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -693,6 +693,12 @@ opts = opts || {}; + // if row property exists, replace minRow and maxRow + if (opts.row) { + opts.minRow = opts.row; + opts.maxRow = opts.row; + } + this.$el = $(el); // TODO: legacy code this.el = this.$el.get(0); // exposed HTML element to the user @@ -709,8 +715,10 @@ var isNested = this.$el.closest('.' + opts.itemClass).length > 0; this.opts = Utils.defaults(opts, { + row: parseInt(this.$el.attr('data-gs-row')) || 0, column: parseInt(this.$el.attr('data-gs-column')) || 12, - maxRow: parseInt(this.$el.attr('data-gs-max-row')) || 0, + minRow: parseInt(this.$el.attr('data-gs-row')) ? parseInt(this.$el.attr('data-gs-row')) : parseInt(this.$el.attr('data-gs-min-row')) || 0, + maxRow: parseInt(this.$el.attr('data-gs-row')) ? parseInt(this.$el.attr('data-gs-row')) : parseInt(this.$el.attr('data-gs-max-row')) || 0, itemClass: 'grid-stack-item', placeholderClass: 'grid-stack-placeholder', placeholderText: '', @@ -1156,6 +1164,9 @@ GridStack.prototype._updateContainerHeight = function() { if (this.engine._batchMode) { return; } var row = this.engine.getRow(); + if (row < this.opts.minRow) { + row = this.opts.minRow; + } // check for css min height. Each row is cellHeight + verticalMargin, until last one which has no margin below var cssMinHeight = parseInt(this.$el.css('min-height')); if (cssMinHeight > 0) {