Hide and serialize question

[kosirm]

Hi,
I just started to learn your library and have some questions:

• a common use case is to hide some elements on the smaller screen and show them on a bigger screen
• next use case is to differently reposition elements depending on different screen sizes
• the last question is how to serialize grid (for example to json) so I can load (deserialize) it later

What I would like to achieve is to let user reposition elements depending on screen size and to save that configuration and later to load that configuration (or even enable user to save many different configurations and load them as needed)
Is this achievable with gridifier?
Thanks in advance for any hint!

[obcdnico]

i, if you want to save && restore grid position, you can store the 'data-gridifier-guid' used by gridifier to set order number, and use a sorting function at gridifier start

    // set on Dom grid element a tagName with this previous position
    const grid = this.hostElement.nativeElement.querySelectorAll('.grid')[0]; // parent grid element
    const initPositions = JSON.parse(localStorage.getItem('gridifierPositions')) || [];
    // set guid on data-item-pos for init filter
    const htmlElements = this.hostElement.nativeElement.querySelectorAll('.grid-item');
    for (let j = 0; j < initPositions.length; ++j) {
      for (let i = 0; i < htmlElements.length; i++) {
        if (htmlElements[i].getAttribute('data-item-id') === initPositions[j].itemId) {
          htmlElements[i].setAttribute('data-item-pos', initPositions[j].itemGuid);
          break;
        }
      }
    }
    // for create the grid
    this.asyncGrid = new Gridifier(
      grid,
      {
        dragifier: true,
        sortDispersion: true,
        class: 'grid-item',
        grid: 'vertical',
        sort: {
          selected: 'initGridPosition', // ('default' will be enabled by default)
          initGridPosition: function(first, second, sort) {
            // sort by data-item-pos when positions is provide else data-item-id given position by default in html;
            return sort.byDataInt(first, second, ['data-item-pos', 'data-item-id']); // 'data-item-id' can be a fallback for the first initialisation position
          }
        }
      },
    );
    // save position onDragEnd
    this.asyncGrid.onDragEnd((sortedItems) => {
      const arrayPositions = [];
      for (let i = 0; i < sortedItems.length; ++i) {
        arrayPositions.push({
          itemId: sortedItems[i].getAttribute('data-item-id'),
          itemGuid: sortedItems[i].getAttribute('data-gridifier-guid'),
          tagName: sortedItems[i].tagName
        });
      }
      // store position in localstorage
      localStorage.setItem('gridifierPositions', JSON.stringify(arrayPositions))
    });

[kosirm]

Thanks a lot for this code snippet! Best regards!