Apply state after grid reconfigure

[famainacc]

I need to apply state to grid columns after grid reconfigure.
I have like 10 persistent columns and I am adding or removing
3-4 new columns with reconfigure.

How to preserve state of old columns, like width, order or visibility?

applyState is not working as espected

[Gary Schlosberg]

Hard for me to say without seeing how you are using it. Can you share your grid config?

[hbulens]

I have a similar problem. There is not much about my code but the reported problem occurs here too. If I post the body if the afterrender event inside the initComponent function, the state is applied correctly. Everything that happens after initialization doesn't work anymore.

I'm quite surprised that this hasn't been implented yet. I can image there are many applications that need to store the user's grid configuration (filter, group, sort, visible columns) and apply them on the fly (for instance through the use of a combobox).

Is there any way to achieve this?

listeners: {
                    'afterrender': function (grid) {                        
                        grid.applyState(Ext.decode("{\"height\":601,\"columns\":[{\"text\":\" \",\"dataIndex\":\"\",\"hidden\":false},{\"text\":\"Importance\",\"dataIndex\":\"Importance\",\"hidden\":false,\"flex\":1},{\"text\":\"Category\",\"dataIndex\":\"Category\",\"hidden\":false,\"flex\":1}],\"sort\":null}"));
                    },

[exoRA]

I face a similar problem with the grid's 'applyState' function.

I basically initialize a tree panel with a store and only 1 column to start with. Depending on the necessary AJAX calls I need to do, I get a list of a few fields (columns) that I use to reconfigure the grid with at first and apply the state to these afterwards (to resize, reorder, hide them depending on user's settings in another page).

reconfigureGrid: function(columns) {
    var stateProvider = Ext.state.Manager.getProvider();
    var grid = this.getView();
    // reconfigure with generated columns at first
    grid.reconfigure(null, columns);
    ...

Afterwards, I get the state object and map its stateIds to the ones from the grid columns.

    ...
    // clear the grid's state
    stateProvider.clear(grid.stateId);
    var state = stateProvider.get(grid.stateId);
    if (state) {
        this.mapStateIds();
         ...

and in the same if-clause I apply the state object to the grid:

         ...
        grid.applyState(state);
    }

The state gets applied to the grid's columns, but there seems to be some problem with the hidden columns from the state.columns config:

Columns that were shown in the grid and should now be hidden by the state object, are technically hidden ('hidden' property is true and grid's visibleColumnManager doesn't contain them), but are still rendered and visible. They are all stacked up and overlap on the very first grid column.

Without any columns hidden:

colBug1.png


The column 'Po Box' should get hidden by the state object (which a user can do on another page), but gets placed in the first row, overlapping the 'rownumberer' column and the 'ID' column.
colBug2.png


I was debugging in the internal functions and I think it gets caused somewhere when applying the state columns to the headerCt, which then adds the columns to itself:

(Ext.panel.Table - applyState):

if  (columns) { 
    me.headerCt.applyColumnsState(columns); 
}

(Ext.grid.header.Container - applyColumnsState):

if (moved) {
    me.removeAll(false); 
    me.add(newOrder); 
    me.purgeCache();
}

There in the add() function the items get added to the headerCt, but it's only visible (that the columns that should be hidden are overlapping others) after the layout is updated:

(Ext.container.Container - add):

// We need to update our layout after adding all passed items
// Unless we only added floating items.
if (needsLayout) {
    me.updateLayout();
}

Note: if the columns, that should be hidden by applying the state, are manually (via column menu or in the code) shown first and then hidden again, they behave the same as usual/expected.

[exoRA]

any news from the ExtJS Dev team on this ?

[SebTardif]

It's easy reproduce. It's still happening in 6.2.0, and the workaround is to call updateLayout just after applyState like:

grid.applyState(state);
grid.updateLayout();

[mhenn]

It's easy reproduce. It's still happening in 6.2.0, and the workaround is to call updateLayout just after applyState like:

grid.applyState(state);
grid.updateLayout();

We just fell over this issue in 6.2.1. Unfortunately your workaround doesn't work, when the column order is different in state!



As you can see in the fiddle it's not even a problem with reconfigure. It's an issue with applyState and hidden columns in general.

[exoRA]

We just fell over this issue in 6.2.1. Unfortunately your workaround doesn't work, when the column order is different in state!



As you can see in the fiddle it's not even a problem with reconfigure. It's an issue with applyState and hidden columns in general.

Yeah we used a similar workaround since our confirmation of the bug (over 1.5 years ago) of manually checking the 'hidden' state and also applying it manually, but it seems to be working also without suspending/resuming the Layout:

grid.applyState(state);
var cols = grid.getColumns();
for (var i = 0; i < cols.length; i++) {
    var c = cols[i];
    if (c.hidden) {
        c.show();
        c.hide();
    }
}

Probably a minor priority bug, but sad to hear it's still present in 6.2.1

[mhenn]

Yeah we used a similar workaround since our confirmation of the bug (over 1.5 years ago) of manually checking the 'hidden' state and also applying it manually, but it seems to be working also without suspending/resuming the Layout:

grid.applyState(state);
var cols = grid.getColumns();
for (var i = 0; i < cols.length; i++) {
    var c = cols[i];
    if (c.hidden) {
        c.show();
        c.hide();
    }
}

Probably a minor priority bug, but sad to hear it's still present in 6.2.1

It's definitely working without suspending/resuming layout, but suspending and resuming makes the showing and hiding only being rendered once all is finished, so it's faster and no flicker is visible for the user. This behaviour is even still reproducable on ExtJS 6.5.1.

[SpecialAgent]

This bug is still reproducible in ExtJS 7.0