0

I am trying to use gridstack.js to dynamically build a tile wall. Some of the tiles I want placed in specific locations, while the rest I simply would like to place in any unoccupied tile. The filler tiles will always have a width of 1 and height of 1, but the other items may be larger.

I am attempting to do something like this:

<ul class="tiles-container">
   <!-- Specific Placement -->
   <li class="grid-stack-item" data-gs-x="1" data-gs-y="0" data-gs-width="2" data-gs-height="1">
      Some Text
   </li>
   <li class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="1" data-gs-height="2">
      Some Text
   </li>
   <!-- Filler Tiles -->
   <li class="grid-stack-item" data-gs-width="1" data-gs-height="1">
      Some Filler Text
   </li>
   <li class="grid-stack-item" data-gs-width="1" data-gs-height="1">
      Some Filler Text
   </li>
</ul>

Where I have all of the specific placements at the top followed by the filler tiles. The filler tiles would not have an x and y location.

I could manually create my own grid by looping through the filler tiles and placing the specific ones where they need to go, but I am hoping the js will do this for me.

Has anyone done this before? Is there a way this can be done?

Jason Metroick
  • 5
  • 1
  • 3

1 Answers1

0

I have done this before. I have a pre-made grid, and I add blocks dynamically.
Just do this:

var grid = $('.grid-stack').data('gridstack');
grid.addWidget($('<li class="grid-stack-item-content"></li>') , 0 , 0 , customWidth, customHeight , true );

And this will add the block and give it defined width and height. the 0 , 0 is to specify that you want it place anywhere possible from x=0 and y=0.
I suppose you changing it to 3 , 4 wouldn't make a difference in your example.

Just a question though, why do you work with lists rather than divs as suggested?

VirginieLGB
  • 548
  • 2
  • 15
  • That worked! Thanks for the help. The example was using a list because that was the way the code was originally written and I didnt change them to divs when I posted the question. – Jason Metroick Mar 28 '16 at 12:41
  • In the docs it says the parameters to this method are the element, x, y, width, height, etc.. Is there a way to actually use the x and y? I am trying to add a widget to the top of my page with x and y set to 0 but it still ends up way at the bottom. – T.Okahara Oct 13 '16 at 16:40