Grids State persistence examples issues

[ddaribo]

Description

1. For all grids State Persistence samples: Flat Grid, Hierarchical, Tree Grid, Pivot, the below router events subscription does not seem to work for saving the state upon navigating via routerLink or reloading the page, as the samples description states it should do:

      this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => {
          this.saveGridState();
      });

2. The "Reset" button does not really reset most of the features, such as pinned and hidden columns, paging state. It does reset the sorting/filtering and selection though.

3. For the Tree Grid demo, an error is thrown when performing the steps (might not be related to the router event, though):

4. And for the Pivot grid, the buttons seem to be off:

Steps to reproduce

1. Open the demo in any of the above linked topics
2. Perform some action on the grid, such as sorting a column
3. Click the "Leave" button
4. Click "Go back"

Result

When clicking on the "Leave" or "Reload" the state is not persisted. One has to click the "Save state" button in order to later restore the state.

Expected result

1. Leaving the page by clicking on the "Leave" or "Reload" button to save grid state to localStorage.
2. Reset all configurable grid features when clicking the "Reset" button
3. Tree grid sample not to throw an error.
4. Correct styling for buttons

Attachments

Attach a sample if available, and screenshots, if applicable.