Combining RowGrouping and StateRestore

mb77It

Hi,
I have a page where the user can change the grouping column dynamically.

I would like to add the grouping settings to the state saved in the local storage, in order to preserve the user choice.

I'm using the stateSaveCallback option to save the grouping data in the local storage:

    const groupingState = {
        enabled: api.rowGroup().enabled(),
        source: api.rowGroup().dataSrc()
    };

    const state = {
        grouping: groupingState,
        dataTableState: data
    };

    localStorage.setItem(DataTableUtils.getStateKey(settings), JSON.stringify(state));

I'm using also the stateLoadCallback option to retrive the grouping data from the local storage:

    const api = new $.fn.dataTable.Api(settings);

    const state = JSON.parse(localStorage.getItem(DataTableUtils.getStateKey(settings)));

    const groupingState = state ? state.grouping : self._defaultGroupings;

    if (groupingState) {
        api.rowGroup()
            .enable(groupingState.enabled)
            .dataSrc(groupingState.source);           
    }

    return (state == null) ? null : state.dataTableState;

It seems that the dataSrc(groupingState.source) instruction doesn't work properly. When I came back to page, the grouping feature is enabled, but grouping column is not set.

Here the version of the used packages:

JSZip 2.5.0, DataTables 1.12.1, AutoFill 2.4.0, Buttons 2.2.3, Column visibility 2.2.3, HTML5 export 2.2.3, Print view 2.2.3, ColReorder 1.5.6, DateTime 1.1.2, FixedColumns 4.1.0, FixedHeader 3.2.4, KeyTable 2.7.0, Responsive 2.3.0, RowGroup 1.2.0, RowReorder 1.2.8, Scroller 2.0.7, SearchBuilder 1.3.4, SearchPanes 2.0.2, Select 1.4.0, StateRestore 1.1.1

I have tried to update both the data table and the packages to the more recent version, but the issue remains.

Any suggestions or help would be greatly appreciated.

Thanks!

allan

Rather than sorting it in our own localStorage key, I'd suggest just adding it to the DataTables state object:

dt.on('stateSaveParams', function (e, s, d) {
  d.rowGroup = dt.rowGroup().dataSrc();
});

dt.on('stateLoadParams', function (e, s, d) {
  if (d.rowGroup) {
    dt.rowGroup().dataSrc(d.rowGroup);
  }
});

https://live.datatables.net/roqivepo/1/edit

Allan

mb77It

Hi Allan,
Thank you for taking care of this.

The solution proposed works fine but it requires that the user clicks on the Saved States button to restore the state. I think the issue happens only if you try to restore the state automatically when the page is refreshed.

Thanks!

allan

Oh - I thought you wanted integration with StateRestore. You you want it to work with the stateSave option? In which case, move the logic of my two events into stateSaveParams and stateLoadParams.

Allan

mb77It

Hi Allan,
Thank you for your help.

I have changed my codes in this way:

    options.stateSaveParams = function (settings, data) {

        const api = new $.fn.dataTable.Api(settings);

        const groupingEnabled = api.rowGroup().enabled();
        let groupingState;

        if (groupingEnabled) {
            groupingState = {
                enabled: true,
                source: api.rowGroup().dataSrc()
            };
        } else {
            groupingState = {
                enabled: false,
                source: null
            };
        }

        data.rowGroup = groupingState;
    }
    options.stateLoadParams = function (settings, data) {

        const api = new $.fn.dataTable.Api(settings);

        if (data.rowGroup) {

            if (data.rowGroup.enabled) {
                api.rowGroup()
                    .enable(data.rowGroup.enabled)
                    .dataSrc(data.rowGroup.source);
            } else {
                api.rowGroup().enable(false);
            }
        }
    }

Same issue.

allan

Yup, sorry, it looks like that is a limitation of the RowGroup plugin at the moment. You need to use a slightly unusual way to make it work - setting the default of the initialisation object: https://live.datatables.net/roqivepo/2/edit .

Basically that will override the rowGroup.dataSrc: 2 in the initialisation object, which is okay since the state object is loaded before rowGroup is initialised.

Ideally RowGroup would support state saving built in. A PR or funding for that would be welcome

Allan

mb77It

Hi Allan,
Thank you very much for your help!

The suggested solution works perfectly .

I do appreciate it!

Marco