CODEWITHSUNDEEP
extjsextjs4
rajugaadu
rajugaadu

Reputation: 714

Ext JS 4 - Editing only one row in a grid with multiple selected rows

This is one of the requirements am working on.

I have a grid with the selmodel as 'Ext.selection.CheckboxModel'. And to edit the grid rows, I can either use RowEditing or CellEditing plugins. So, here i what happens:

  1. I select multiple checkboxes/rows.
  2. Then I singleclick/doubeclick on one of the selected rows to edit the data in it.
  3. This deselects all the other rows except for the one I double clicked to edit.

I don't want the other rows to be deselected. I should be able to singleclick/doubeclick on one of the selected rows and still keep the rest selected.

When all are rows are selected. enter image description here

After i double click on a single row, you can see the other rows getting de-selected. enter image description here

Upvotes: 1

Views: 4905

Answers (3)

rixo
rixo

Reputation: 25041

Returning false from the beforedeselect event will prevent the deselection. So, for the 1-click case, it should be easy to prevent deselection when editing. As luck gives it, it appears that the beforedeselectevent is fired after the beforeedit event (in 4.2.0 at least, that may not be stable across versions).

With row editing:

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 1
        ,pluginId: 'editing'
    })
]
,listeners: {
    beforedeselect: function(sm, record) {
        var plugin = this.getPlugin('editing');
        return !plugin.editing;
    }
    // The checkbox selection column should probably not be editable, but 
    // apparently it is not accounted for... So we must prevent edition on
    // this column, or you won't be able to deselect using the checkbox.
    ,beforeedit: function(editor, context) {
        return context.colIdx !== 0;
    }
}

With cell editing:

plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
        ,pluginId: 'editing'
    })
]
,listeners: {
    beforedeselect: function(sm, record) {
        var plugin = this.getPlugin('editing');
        // In 4.2.0 there is apparently a bug that makes
        // plugin.editing always true
        return !plugin.getActiveEditor();
    }
    ,beforeedit: function(editor, context) {
       return context.colIdx !== 0;
    }
}

For the double click, you can elaborate on this strategy by capturing the deselect event and releasing it only if editing has not started.

plugins: [
    Ext.create('Ext.grid.plugin.RowEditing', {
        clicksToEdit: 2
        ,pluginId: 'editing'
    })
]
,listeners: {
    beforeedit: function(editor, context) {
        return context.colIdx !== 0;
    }
    ,beforedeselect: function(sm, record) {
        var plugin = this.getPlugin('editing');
        setTimeout(function() {
            if (!plugin.editing) {
                // The true prevents the event from firing again,
                // and an infinite loop.
                sm.deselect(record, true);
            }
        }, 200);
        return false;
    }
}

However you have to make a guess concerning the user's double click delay. Too short and you might miss some double clicks, while too long will incur a unpleasant delay on the deselection.

Upvotes: 5

Rajinder
Rajinder

Reputation: 346

You have to pass second parameter as true to select method to retain the previous selections as:

    selModel.select(rowsToSelect, true);

Sencha ExtJS docs for reference:

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.selection.Model-method-select

Hope it helps!!

Upvotes: 0

Oğuz Çelikdemir
Oğuz Çelikdemir

Reputation: 4980

Try to keep selected records a variable, then edit the row. When everythings complete, try to re-select selected rows.

var selModel, selRows;
selModel = grid.getSelectionModel();
selRows = selModel.getSelection();

// after eediting, use the following
selModel.select(selRows);

Upvotes: 1

Related Questions