ArtSoftSolutions

An article by Robert

In this article we want to describe an issue with the clearGrouping method of the GridPanels in ExtJS 3.3.1 which is not saving the grouping state in the State Provider. Considering you have a grouped stateful grid, if you attempt to clear the grouping externally (via a button, for example), the state is not updated accordingly and on the next load, the grid will still be grouped. In other words, calling groupBy() method is updating the state, while clearGrouping() method does not.

This article will show you how to save the state when externally calling the clearGrouping() method.

The column headers of the grid have a menu that look like in the following image. Please note the two options:

- Group By This Field
- Show in Groups

Grouping and Removing the grouping for the grid can be done by clicking Group By This Field option/Show in Groups option.

Clicking the "Clear Grouping" button has the same effect as unchecking "Show in Groups" option. The grid will then look like in the picture below.

When a state provider is enabled in your code (CookieProvider, SessionProvider, HttpProvider, etc), the Grouping/Clear Grouping state of the grid is (or should be) saved and automatically loaded the next time the grid rendered. All you need to do is set the State Provider and give your grid an id (or a stateId).

Enabling the CookieProvider can be easily done in the following manner:

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

When we are using the column header menu to add/clear grouping for an extjs grid, things work as expected. When we use the Clear Grouping button, however, the new state of the grid is not saved properly, although we are calling the clearGrouping() method:

{
    text:'Clear Grouping',
    iconCls: 'icon-clear-group',
    handler : function(){
        store.clearGrouping();
    }
}

If we would had another button to add grouping by the 'Industry' column, we would have used

store.groupBy('industry');

and that would not just add grouping to the grid, but also update the cookie to reflect the new grouping state.

The solution to properly update the grid state when clearing the grouping using an external component (not the column header menu option - "Show in Groups") in the state provider is by firing the grid's groupchange event:

{
    text:'Clear Grouping',
    iconCls: 'icon-clear-group',
    handler : function(){
        store.clearGrouping();
        grid.fireEvent("groupchange", grid, null);
    }
}