Saving/Restoring expanded group node state in the local storage

This example shows how local storage can be utilised to save the open/closed states of groups in AG Grid and persist those states through page reloads: 

This effect is achieved by utilising the following code: 

const OPEN_GROUP_KEY = 'openGroups';
let store = new Store(window.localStorage);

The `store` allows the grid to save and retrieve the keys of opened groups at each load. Before this step however, the group store must be initialised, in this example I have invoked the function that does this in `DOMContentLoaded`:

document.addEventListener('DOMContentLoaded', function () {
  function initialiseGroupStore(storeKey) {
    let groups = store.getItem(storeKey);
    if (!groups) groups = [];
    store.setItem(storeKey, groups);
  }
  initialiseGroupStore(OPEN_GROUP_KEY);

Once the grid is loaded, the following occurs: 

  onFirstDataRendered: (params) => {
    let groups = store.getItem(OPEN_GROUP_KEY);
    groups.forEach((groupId) => {
      let node = params.api.getRowNode(groupId);
      node.setExpanded(true);
    });
  },

This is the process by which the grid recreates its previous state. 

The last thing is to hook up events for opening and closing groups: 

  onRowGroupOpened: function (params) {
    if (params.node.expanded) {
      console.log('adding id to store', params.node.id);
      addGroupToStore(params.node.id, OPEN_GROUP_KEY);
    } else {
      console.log('removing id from store', params.node.id);
      removeGroupFromStore(params.node.id, OPEN_GROUP_KEY);
    }
  },

Using isServerSideGroupOpenByDefault to open groups

Another way to re-open groups is using the 'isServerSideGroupOpenByDefault' callback. This is especially useful when an update or edit requires a 'refreshServerSideStore' to update parent-node information (for example aggregations). An example of this can be seen in the following plunker: 

https://plnkr.co/edit/pGjEW5w60csSc2Rf 

This plunker leverages the aforementioned features like so: 

  onRowGroupOpened: (params) => {
    if (params.node.expanded) {
      openedRowGroups.push(params.node.key);
    } else {
      openedRowGroups.splice(
        openedRowGroups.findIndex((i) => i === params.node.key),
        1
      );
    }
  },
  isServerSideGroupOpenByDefault: function (params) {
    return openedRowGroups.includes(params.rowNode.key);
  },

This ensures that each time refreshServerSideStore is called, the openedRowGroups array is checked and if a matching member exists, the rowNode is expanded: 

---

PREVIOUS VERSIONS: 

The following example uses window.localStorage to preserve the state of open row groups. When the page is reloaded, the grid will access this and re-open the corresponding groups for you.

Server-side row model

Version 18: https://plnkr.co/edit/YNBDKcbvzwhT8QnW8mrC?p=preview

Version 22: https://next.plnkr.co/edit/O6RxgdxsJwK0t3ft

Version 25: https://plnkr.co/edit/utLFvK5pgRDRyyVT 

Version 26: https://plnkr.co/edit/lEyYHhhFe3kHxke2 

Client-side row model:

React + AG Grid Version 26.2: https://plnkr.co/edit/e3DeWZrn9jS0DpsJ

Version 23: https://plnkr.co/edit/PEnSk8DJNexDY0Nd