How can I get a Grid with Grouping feature to remember the state?

Question

I hope, someone here can help.

I have tried it the simple way, only using stateId and stateful.
But this does not save the state of the grouping.
I have also tried defining the events. "stateEvents and stateEventsByName" But it still does not want to save the state.

In some posts from 2011 and 2014, there was a statement about a groupingview, but i can not find it in the documentation of version 6.6.0. https://docs.sencha.com/extjs/6.6.0/index.html

Instead I have used the feature. https://docs.sencha.com/extjs/6.6.0/classic/Ext.grid.feature.Grouping.html

        me.viewBox = Ext.create('Ext.grid.Panel', {
            store: me.gridGroupingStore,
            stateId: 'textbausteingrouping',
            stateful: true,
            columns: [
                { text: 'Name', dataIndex: 'title', flex: 1 },
                { text: 'Gruppe', dataIndex: 'group', flex: 1, hidden:true }
            ],
            features: [{
                ftype:'grouping',
                groupHeaderTpl: '{name}',
            }]
        });

Does anyone know, how to make the grouping stateful? I want the groups staying collapsed, if a user colapsed them. As an interim solution I currently use the option "startCollapsed".

Thank you in advance and have a nice day.

Answer 1

I believe you cannot find what you are searching for out of the box. You could save the collapsed state of the row and on future loads, expand the rows that match your saved state.

Here is an override we implemented to achieve something slightly similar: Preserve expanded nodes and selected item for a Tree between store loads.

// --> The following override is used to keep state and selection
// the override works only if at least one of the below configuration are defined and set on true on the TreeStore

// keepExpandedState: true
// keepCurrentSelection: true

Ext.define('Overrides.data.TreeStore', {
    override: 'Ext.data.TreeStore',

    initConfig: function () {
        this.callParent(arguments);
        this.on('beforeload', function () {
            var thisTreePanel = this.ownerTree;
            if (!Ext.isEmpty(thisTreePanel)) {
                //save current selection
                if (this.keepCurrentSelection) {
                    if (!Ext.isEmpty(this.ownerTree.getSelection()[0])) {
                        this.ownerTreeCurrentSelection = this.ownerTree.getSelection()[0].getPath()
                    }
                }
                //save state
                if (this.keepExpandedState) {
                    this.state = this.getCurrentState();
                }
            }
        });
        this.on('load', function () {
            if (this.keepExpandedState) {
                this.restorePreviousState(this.state);
            }

            if (this.keepCurrentSelection) {
                if (!Ext.isEmpty(this.ownerTreeCurrentSelection)) {
                    this.ownerTree.selectPath(this.ownerTreeCurrentSelection);
                }
            }
        })
    },

    //store state of tree
    getCurrentState: function () {
        var nodes = [];
        var rootNode = this.ownerTree.getRootNode();
        if (!Ext.isEmpty(rootNode)) {
            rootNode.eachChild(function (child) {
                var storeTreeState = function (node, expandedNodes) {
                    if (node.isExpanded() && node.childNodes.length > 0) {
                        expandedNodes.push(node.getPath());
                        node.eachChild(function (child) {
                            storeTreeState(child, expandedNodes);
                        });
                    }
                };
                storeTreeState(child, nodes);
            })
        }
        return {
            expandedNodes: nodes
        }

    },

    //set previous tree state (state before reload)
    restorePreviousState: function (state) {
        if (!Ext.isEmpty(state)) {
            var nodes = state.expandedNodes;
            if (!Ext.isEmpty(nodes)) {
                for (var i = 0; i < nodes.length; i++) {
                    if (typeof nodes[i] != 'undefined') {
                        this.ownerTree.expandPath(nodes[i]);
                    }
                }
            }
        }
    }
});