How can I preserve the selections in an ExtJS grid with filtered data?

Question

I'm using ExtJS 4.1.2, and I have an Ext.grid.Panel with a check-box selection model and a text-box in the header for filtering the items in the grid:

var nameStore = new Ext.data.Store({
    ...
    proxy: { type: 'ajax' ... },
    fields: [ { name: 'name', type: 'string' }, ... ],
});

var headerBar = new Ext.toolbar.Toolbar({
    xtype: 'toolbar',
    dock: 'top',
    layout: 'fit',
    items: [{
        xtype: 'textfield',
        ...,
        listeners: {
            change: function(fld, newVal, oldVal, opts) {
                var grid = ...;
                if (newVal.length > 0)
                    grid.store.filterBy(function(record, id) { return record.get('name').indexOf(newVal) !== -1; });
                else
                    grid.store.clearFilter()
            }
        }
    }]
});

var nameGrid = new Ext.grid.Panel({
    ...
    selType: 'checkboxmodel',
    selModel: { mode: 'SIMPLE' },
    store: nameStore,
    columns: [ { dataIndex: 'name', flex: true }, ... ],
    dockedItems: [ headerBar ],
    bbar: [ { xtype: 'tbtext', text: '0 items selected' ... },
    listeners: {
        selectionchange: function(selModel, selected, opts) {
            var txt = ...;
            txt.setText(Ext.String.format("{0} items selected", selected.length));
        }
    }
});

As shown nameStore's filter is applied (or removed) based on the value in headerBar's textbox. Also, a text string in the bottom bar is updated as items are selected/deselected.

Each of these features is working smoothly on its own. But the interaction is giving me trouble: if an item is selected and then gets filtered out, it is deselected and then remains so when the filter is cleared.

How can I maintain the selections (or at least appear to do so to the user) of "hidden" items, either for use elsewhere in my application or to reselect when the filter is cleared? Thanks!

You would have to store the current selection right before the grid is filtered, so you can reference that selection later. May I ask why you are trying to save the selection of items that get filtered out? I'm curious, because this functionality doesn't seem very intuitive to me. — forgivenson
@forgivenson, The total list is of several hundred items, but a given user is typically interested in a set of ~10-15 at a time. The idea is to use the filter to allow a user to quickly find those few items that they're particularly interested in and select them. The selected set is then used as a parameter to other operations in the application. — David Rubin
Then just let them filter down to what they want, select those, and then do whatever else they are going to do with that selection. Lets look at an example: I select some items, then filter down, and most of those selected items are gone. I select a few more, then filter by something different, select a few more, etc. How is the user supposed to keep track of what he/she has selected? If you really want do something like this, I'd add a separate grid, a "selected grid", that stores each record as it is selected, and isn't wiped out by a change in the filter. — forgivenson
Because the filter is used as a search. Consider a list of car makes and models. The user filters down to those items that contain "BMW", select those, then changes the filter to "Audi" and select those. The text label shows the total count of items selected (BMWs and Audis), and those items are passed to additional operations, but the user does not want to include Ford, Honda, etc. — David Rubin

UmarKashmiri UmarKashmiri · Accepted Answer · 2014-04-01T01:44:32

you need not to add the selected grid separately. This can be done in one grid only. Simple method is to have an array variable in page scope and capture the grid select event or itemclick event whatever you want.

e.g if you use select event it will give you your record.

select( this, record, index, eOpts )

you can get your record id and push it to the array variable that you declared. Once you filtered out the grid. you can loop through the filtered records and call select method by getting selection model. e.g

grid.getSelectionModel().select(record);

Hope this will help.

How can I preserve the selections in an ExtJS grid with filtered data?

1 Answers