create additional events to help with serialising and/or persisting grid.

[rosspi]

create additional events to help with serialising and/or persisting grid.

[mehmetkaradeniz]

Hi @rosspi

Any update on this feature?

I might have an idea.

[rosspi]

I'll get around to it eventually. It just needs to trigger an event whenever anything changes I think.

[shommey]

I know it's not perfect, but the following code served the purpose of saving and loading cells.

Save method

    var cells = gs.$getCells();
    var totalCells = cells.length; // Get total cell length to store and recreate later
    var saveCells = [];

 $.each(cells, function (index, cell) {
        if ($(cell).attr('data-id')) { // find cells with unique data id to save
            saveCells.push({
                cellData: $(cell).attr('data-id'), //save unique cell identifier
                cellIndex: index // save cell position in gird
            });
        }
    });

    var cellsSerialized = JSON.stringify(saveCells); // Convert cells data to son
    // Save to storage 

And the load method

     var totalCount = getTotalCountFromStorage(); // You need your own implementation
     var finalCellCount = totalCount; 

        gs.padWithNonContiguousCells(function (cellCount, nonContiguousCellCount) { // Add  placeholder cells to match storage
            return cellCount < finalCellCount;
        });

        var parsedCells = JSON.parse(getCellUniqueDataAndIndex()); // You need your own implementation to retrieve cell data and index from storage

        $.each(parsedCells, function (index, cell) {
            cellIndex = cell['cellIndex']; // position in gridstrap
            cellData = cell['cellData']; //data to identify cell

            cellElem = $('#gridstrap').find(`[data-id='${cellData}']`); // Find cell Element based on unique data id
            concreteCell = gs.$getCellOfElement(cellElem); // Get cell out of found element

            gs.moveCell(concreteCell, cellIndex);
        });

The only problem with this code is if total number of saved cells is for ex. 100 and then saved again with total number of cells being 70 if the client retrieving the data didn't reload it will reposition cells properly but the client will have a total of 100 cells regardless.

I hope this helps someone.

[mehmetkaradeniz]

I ended up using something like this. In case someone needs it.
This saves layout info on cookie using js-cookie. Then load layout from cookie and sort layout.

Save Layout:

function saveLayout() {
      let layout = serializeLayout();
      Cookies.set(LAYOUT_COOKIE_NAME, layout, { expires: 9999 });
  }

function serializeLayout() {
  let grid = getGrid();
  let cells = grid.$getCells();
  let cellIdIndexArray = [];
  for (let i = 0; i < cells.length; i++) {
      let cellId = $(cells[i]).attr("id");
      cellIdIndexArray.push(cellId + "," + i);
  }

  return cellIdIndexArray.join("|");
};

Load & Sort Layout:

function loadLayout() {
    if (layoutCookieExists()) {
        loadCookieLayout();
    }
    else {
        loadDefaultLayout();
    }
}

function layoutCookieExists() {
    let layout = Cookies.get(LAYOUT_COOKIE_NAME);
    return layout !== undefined;
}

function loadCookieLayout() {
    let cellIdIndexDict = deserializeLayoutCookie();
    sortLayout(cellIdIndexDict);
}

function deserializeLayoutCookie() {
    let dict = {};

    if (!layoutCookieExists()) {
        return dict;
    }

    let layout = Cookies.get(LAYOUT_COOKIE_NAME);
    let cellIdIndexArray = layout.split('|');
    for (let i = 0; i < cellIdIndexArray.length; i++) {
        let tokens = cellIdIndexArray[i].split(',');
        let cellId = tokens[0];
        let cellIndex = tokens[1];
        dict[cellId] = cellIndex;
    }

    return dict;
}


function loadDefaultLayout() {
    sortLayout(defaultCellIdIndexDict);
}

function sortLayout(cellIdIndexDict) {
    let grid = getGrid();
    let cells = grid.$getCells();

    for (let key in cellIdIndexDict) {
        let cellId = key;
        let cellIndex = cellIdIndexDict[key];;
        let cellToMove = cells.filter("#" + cellId);
        if (cellToMove.length > 0) {
            var lastCellIndex = cells.length - 1;
            if (cellIndex > lastCellIndex) {
                grid.moveCell(cellToMove, lastCellIndex);
            }
            else {
                grid.moveCell(cellToMove, cellIndex);
            }
        }
    }
}