Option to set the number of grid rows

[ferretwithaberet]

We got column to set the number of columns, but we do nt have row to set the number of rows?
I want a grid with a fixed amount of columns and rows, if I do not have 12 rows, it fucks my whole grid.
If I have 12 rows

If I do not have 12 rows

I might try to add it myself later today and will do a pull request. At the moment, I just made the getRow function return 12. 😂

[adumesny]

read https://github.com/gridstack/gridstack.js#change-grid-columns is you want something other than 12 columns - that part works,

as for a fix number of rows that would be a new feature that is NOT easy to add as you would need to implement a swap feature when dragging items around. Rows are automatically added/removed as needed, with vertical scroll bar in most containers, and top gravity by default. the best you can do that now is set a maxRow but even then things get complicated when you get full... you can set a CSS min height, but that doesn't create extra empty rows either.

[adumesny]

I suppose we could have a minRow attribute which may not be hard to implement and fix _updateContainerHeight() to use it.

we also don't have grid lines like the picture above - how did you get that ?

[ferretwithaberet]

Those lines are made out of linear gradients as a background. I can do the same to stylize my cells with some basic shapes(Like a "+" sign) but for the overall user, it is not that intuitive.

This is how I did it:

.grid-wrapper::after {
    --grid-lines-color: rgba(0, 0, 0, .7);
    content: "";
    pointer-events: none;
    background-image:
        linear-gradient(90deg, var(--grid-lines-color), transparent 1px),
        linear-gradient(90deg, transparent calc(100% - 1px), var(--grid-lines-color)),
        linear-gradient(var(--grid-lines-color), transparent 1px),
        linear-gradient(transparent calc(100% - 1px), var(--grid-lines-color) 100%);
    background-size: calc(100% / 12) calc(100% / 12);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Also, it needs position: relative on the grid-wrapper, as the ::after pseudo-element is a child of that.

Btw, is there any easier alternative of contacting you? I want to ask you questions about Gridstack.js, to understand how it's engine works, so I can start implementing things into it.

[adumesny]

yeah, you want to hire me ? :)
Hint: there is a donation link on the site. I'm doing this on my spare time, but would love to have other contributors of course. Slack channel might be best.

[ferretwithaberet]

I am almost 19 years old, there's no chance I will be the one hiring you. I literally want to try to fix that height issue, so I can fix my work project. 😂

[adumesny]

my hint 2 msg above should be all you need. use the non min files (clone and look at the demo/ sample) to step through the code. I might be able to add minRow this wkd as I've thought about adding it before...

[ferretwithaberet]

GridStack.prototype._updateContainerHeight = function() {
  if (this.engine._batchMode) { return; }
  var row;
  if (!this.opts.minRow || this.opts.minRow < this.engine.getRow()) {
    row = this.engine.getRow();
  } else {
    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) {
    var verticalMargin = this.opts.verticalMargin;
    var minRow =  Math.round((cssMinHeight + verticalMargin) / (this.cellHeight() + verticalMargin));
    if (row < minRow) {
      row = minRow;
    }
  }
  this.$el.attr('data-gs-current-row', row);
  if (!this.opts.cellHeight) {
    return ;
  }
  if (!this.opts.verticalMargin) {
    this.$el.css('height', (row * (this.opts.cellHeight)) + this.opts.cellHeightUnit);
  } else if (this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
    this.$el.css('height', (row * (this.opts.cellHeight + this.opts.verticalMargin) -
      this.opts.verticalMargin) + this.opts.cellHeightUnit);
  } else {
    this.$el.css('height', 'calc(' + ((row * (this.opts.cellHeight)) + this.opts.cellHeightUnit) +
      ' + ' + ((row * (this.opts.verticalMargin - 1)) + this.opts.verticalMarginUnit) + ')');
  }
};```
As well as adding it to the engine and to the GridStack opts. Ty for the info.

[adumesny]

post a code review so I can take a look, an make sure to test all the samples and combinations. thanks

Note: should be minRow to match maxRow we have today. option on the grid.

[ferretwithaberet]

I need contributor role, right? I tried to push my own branch, but it did not let me, due to 403.

[adumesny]

create a github fork, make your changes in the default develop branch, submit to your repo, then you can use github to create a code review.

[ferretwithaberet]

As a quick question:
What would this break?

  GridStackEngine.prototype.getRow = function() {
    if (!this.row) {
      return this.nodes.reduce(function(memo, n) { return Math.max(memo, n.y + n.height); }, 0);
    } else {
      return this.row
    }  
  };

Edit: It actually seems to work