angular-gridster2 grid size

Question

I am currently working on the integration of angular-gridster2. The goal is to get a grid with a fixed row height, fixed column count and the size should be calculated. This is my current GridsterConfig:

{
  setGridSize: true,
  margin: 5,
  displayGrid: DisplayGrid.OnDragAndResize,
  gridType: GridType.VerticalFixed,
  keepFixedHeightInMobile: true,
  fixedRowHeight: 50,
  minCols: 6,
  maxCols: 6,
  swap: true,
  pushItems: true,
  resizable: { enabled: true },
  draggable: {enabled: true },
  enableEmptyCellDrop: true,
}

With this config the grid height is calculates as expected (perfect). The problem is that the width stays the same after window resizing. When I set the setGridSize property to false the width calculation works as expected but the height is always 2 times the margin.

score 2 · Answer 1 · edited Dec 14 '18 at 09:58

You can simply do this by using gridster builtIn options like as:

vm.options = 
{
    minCols: 7,
    maxCols: 7,
    minRows: 4,
    maxRows: 4,
    maxItemCols: 50,
    minItemCols: 1,
    maxItemRows: 50,
    minItemRows: 1,
    maxItemArea: 2500,
    minItemArea: 1,
    defaultItemCols: 1,
    defaultItemRows: 1,
    setGridSize: true,
    fixedColWidth: 250,
    fixedRowHeight: 250,
};

For Reference:

https://github.com/tiberiuzuld/angular-gridster2/tree/1.x

score 1 · Answer 2 · answered Feb 19 '20 at 10:16

I used the below configuration and it worked for me:

    itemChangeCallback: ((item: GridsterItem) => {
         // Your content here
      }),
      itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
         // Your content here
      }),
      setGridSize: true,
      gridType: 'verticalFixed',
      fixedRowHeight: 237,
      minRows: 2,
      maxRows: 100,
      minItemRows: 2,
      maxItemRows: 2,
      defaultItemRows: 1,
      minCols: 12,
      maxCols: 12,
      maxItemCols: 12,
      minItemCols: 1,
      defaultItemCols: 1,
      maxItemArea: 2500,
      minItemArea: 1,
      swap: true,
      displayGrid: 'onDrag&Resize',
      compactType: 'compactUp', // 'compactUp&Left',compactLeft&Up'
      pushItems: true,
      resizable: { enabled: true },
      draggable: {
        enabled: true
      }

Hope this will help

Thank you! For our fix, we needed gridType: 'fixed" – Daniel Hair Mar 30 '20 at 12:15 — Daniel Hair, Mar 30 '20 at 12:15

score 0 · Accepted Answer · answered Sep 20 '18 at 06:54

0

My solution now is that I have created a parent container div where I set the height depending on the grid rows (calculating the height with rows * (fixedRowHeight + margin).

answered Sep 20 '18 at 06:54

alc

97
1
1
6

angular-gridster2 grid size

3 Answers3