Skip to content

Update State Persistence topic for React 19 #1521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: vnext
Choose a base branch
from
+27 −18
Open

Update State Persistence topic for React 19 #1521

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
85f1dd2
Update State Persistence topic for react v19
MarielaTihova May 8, 2025
fac03c5
Removing an extra function argument
MarielaTihova May 8, 2025
16006db
Event name update- rendered to onRendered
MarielaTihova May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 27 additions & 18 deletions doc/en/components/grids/_shared/state-persistence.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,21 +166,21 @@ const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting',
<!-- ComponentStart: Grid, HierarchicalGrid, TreeGrid, PivotGrid -->
```tsx
<{ComponentSelector}>
<IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
<IgrGridState ref={gridStateRef}></IgrGridState>
</{ComponentSelector}>
```
<!-- ComponentEnd: Grid, HierarchicalGrid, TreeGrid, PivotGrid -->

<!-- ComponentStart: Grid, HierarchicalGrid, TreeGrid, PivotGrid -->
```tsx
// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API
const state: IgrGridStateInfo = gridState.getState([]);
const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string
const stateString: string = gridState.getStateAsString([]);
const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions
const sortingFilteringStates: IgrGridStateInfo = gridState.getState(['sorting', 'filtering']);
const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);
```
<!-- ComponentEnd: Grid, HierarchicalGrid, TreeGrid, PivotGrid -->

Expand Down Expand Up @@ -230,9 +230,9 @@ gridState.applyState(sortingFilteringStates)
<!-- end: WebComponents -->

```tsx
gridState.applyState(gridState, []);
gridState.applyStateFromString(gridStateString, []);
gridState.applyState(sortingFilteringStates, [])
gridStateRef.current.applyState(gridState, []);
gridStateRef.current.applyStateFromString(gridStateString, []);
gridStateRef.current.applyState(sortingFilteringStates, [])
```

```razor
Expand Down Expand Up @@ -349,8 +349,8 @@ public restoreGridStateString() {
<!-- end: WebComponents -->
<!-- ComponentStart: Grid, HierarchicalGrid, TreeGrid, PivotGrid -->
```tsx
<{ComponentSelector} rendered={restoreGridState}>
<IgrGridState ref={(ref) => { gridState = ref; }}></IgrGridState>
<{ComponentSelector} onRendered={restoreGridState}>
<IgrGridState ref={gridStateRef}></IgrGridState>
</{ComponentSelector}>
```
<!-- ComponentEnd: Grid, HierarchicalGrid, TreeGrid, PivotGrid -->
Expand All @@ -366,28 +366,28 @@ useEffect(() => {
}, []);

// Using methods that work with IgrGridStateInfo object.
function saveGridState() {
const state = gridState.getState([]);
const saveGridState = () => {
const state = gridStateRef.current.getState([]);
window.localStorage.setItem('grid-state', JSON.stringify(state));
}

function restoreGridState() {
const restoreGridState = () => {
const state = window.localStorage.getItem('grid-state');
if (state) {
gridState.applyState(JSON.parse(state), []);
gridStateRef.current.applyState(JSON.parse(state), []);
}
}

//Or using string alternative methods.
function saveGridState() {
const state = gridState.getStateAsString([]);
const saveGridState = () => {
const state = gridStateRef.current.getStateAsString([]);
window.localStorage.setItem('grid-state', state);
}

function restoreGridState() {
const restoreGridState = () => {
const state = window.localStorage.getItem('grid-state');
if (state) {
gridState.applyStateFromString(state, []);
gridStateRef.current.applyStateFromString(state, []);
}
}
```
Expand Down Expand Up @@ -784,7 +784,7 @@ public onValueInit(event: any) {
<!-- end: WebComponents -->

```tsx
function onValueInit(s: IgrPivotGrid, event: IgrPivotValueEventArgs) {
const onValueInit = (event: IgrPivotValueEventArgs) => {
const value: IgrPivotValueDetail = event.detail;
if (value.member === "AmountofSale") {
value.aggregate.aggregator = totalSale;
Expand Down Expand Up @@ -957,9 +957,18 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true };
<!-- ComponentStart: HierarchicalGrid -->
Then the `GetState` API will return the state for all grids (root grid and child grids) features excluding `Selection` and `Sorting`. If later on the developer wants to restore only the `Filtering` state for all grids, use:

<!-- Angular, WebComponents -->
```typescript
this.state.applyState(state, ['filtering', 'rowIslands']);
```
<!-- end: Angular, WebComponents -->

<!-- React -->
```tsx
state.applyState(state, ['filtering', 'rowIslands']);
```
<!-- end: React -->


<!-- Blazor -->
Then the `GetState` API will return the state for all grids (root grid and child grids) features excluding `Selection` and `Sorting`. If later on the developer wants to restore only the `Filtering` state for all grids, use:
Expand Down