Issue with Items not staying in their position

[carlhussey]

Users can visit my tool and add widgets to their dashboard. Those positions are then stored in the database with that widget for that user.

When I re-render their dashboard, I am manually creating all of the divs and applying the data attributes to the widgets for their x,y sizes and row,col sizes.

Once these have been appended, I then run gridster and let it do its magic. I have noticed that even though the values are stored and loaded correctly into each widget, they are getting shifted around at times.

If the elements are getting these values data-row="1" data-col="1" data-sizex="1" data-sizey="1" from the database directly, what is gridster actually doing when its initializing their position?

The x,y size always seems to be fine but the row,col seem so move on their own even though they have a defined value.

[carlhussey]

@dsmorse - Is there any method built in that I can call once items have been dynamically added to the DOM for it to know there the items are since they are not added with the "Add" method? I assume there is an underlying grid of available spots and what not and these aren't updated when the plugins are loaded directly into the DOM.

[hellhoundsx]

I know I'm a bit late to this, but I was having the same problem. So what I did was that I ordered the items before I started adding them to gridster. The problem is that gridster isn't obeying to the position of certain elements, like if the first one in the array is positioned at the "row 5, col 1", it gets rendered first and it will go to "row 1, col 1" for some reason.

So what I do is the following:

exampleArray.sort(function (a, b) {
    var aRow = a.layout.row;
    var bRow = b.layout.row;
    var aCol = a.layout.col;
    var bCol = b.layout.col;

    if (aRow == bRow) {
        return (aCol < bCol) ? -1 : (aCol > bCol) ? 1 : 0;
    } else {
        return (aRow < bRow) ? -1 : 1;
    }
});

This will return you guys your array ordered per row and column and Gridster will be able to render them correctly.