Is there existing support to load grouping state (e.g., from DB) in SlickGrid React?

[Shreyanshsahu14]

Hi team,

I'm using slickgrid-react with enableDraggableGrouping: true, and I'm currently implementing a feature to save and load grid preferences (like column widths, filters, etc.) from a backend API.

I wanted to check:

🔹 Is there any existing API or utility in SlickGrid Universal or SlickGridReact to persist and restore grouping state?
For example, if I group by region and status, can that grouping be programmatically restored when the grid is reloaded?

🔹 Ideally, I’d like to integrate it with the gridStateService.getCurrentGridState() and setGrouping() if such methods are available.

If nothing exists yet, is there a recommended way to:

Get the current groupBy columns from draggableGroupingPlugin?

Programmatically set grouping from a saved list like ['region', 'status']?

And how can I persist grouping from db?

[ghiscoding]

Grouping is not part of Grid State/Presets

slickgrid-universal/packages/common/src/enums/gridStateType.enum.ts

Lines 12 to 27 in e676246

	/** GridState properties */
	export type GridStateTypeString =
	/** List of Current Visible Columns in the grid, including these props (`columnId`, `cssClass`, `headerCssClass`, `width`) */
	| 'columns'
	/** List of Current Filters including these props (`columnId`, `operator`, `searchTerms`, `targetSelector`, `verbatimSearchTerms`) */
	| 'filter'
	/** List of Current Pagination including these props (`pageNumber`, `pageSize`) */
	| 'pagination'
	/** List of Current Pinning including these props (`frozenBottom`, `frozenColumn`, `frozenRow`) */
	| 'pinning'
	/** List of Current Row Selections including these props (`gridRowIndexes`, `dataContextIds`, `filteredDataContextIds`) */
	| 'rowSelection'
	/** List of Current Sorted Columns including these props (`columnId`, `direction`) */
	| 'sorter'
	/** List of Current Sorted Columns including these props (`type`, `toggledItems`, `previousFullToggleType`) */
	| 'treeData';

If nothing exists yet, is there a recommended way to:

Get the current groupBy columns from draggableGroupingPlugin?

Programmatically set grouping from a saved list like ['region', 'status']?

And how can I persist grouping from db?

You can maybe try to get the grouping info from the DataView and then try initialGroupBy (e.g.initialGroupBy['duration']) when you load the grid or change them dynamically as shown in the Examples via the grouping buttons

slickgrid-universal/packages/common/src/core/slickDataview.ts

Lines 395 to 398 in e676246

	/** Get current Grouping info */
	getGrouping(): Grouping[] {
	return this.groupingInfos;
	}

Then use something like this to get the group column names.
const groupedColumns = dataView.getGrouping().map(g => g.getter)

If the project is useful to you and you haven't done that yet, you could give it a star ⭐
Cheers

[Shreyanshsahu14]

i tried using dataview to persist from db to load dynamically, but it didn't persisted. And my approach was that I was capturing the GridState and rendering dynamically when loading db. Is there any other approach?

[ghiscoding]

Sorry but did you even read what I wrote? I just told you the approach to use just above... and I won't add this to Grid State/Presets because setting Grouping is a lot more complex (especially for regular Grouping)

[ghiscoding]

Grid State now includes Grouping (only showing which column Ids are grouped) in v9.7.0 and Grouping via Grid Presets will only work with Draggable Grouping (it won't work for regular Grouping) but it's still preferable to use Draggable Grouping initialGroupBy option.