Checking rows in extjs grid based on their state

Question

I'm currently working on a project that uses ExtJS.

For this part of the project I had to implement a checkbox column on an existing grid, each row of the grid can have a state determined by record.data.codiceStato.

Here is part of the code:

selectionModel = Ext.create('Ext.selection.CheckboxModel', {
    checkOnly: true,
    listeners: {
        select: function (sm, idx, rec) {
            alert("Look ma!")
        }
    },
    renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
        if (record.data.codiceStato == 'RS' || record.data.codiceStato == 'AN' || record.data.codiceStato == 'NP')
            return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
        else
            return '';
    }
});

Now, as you can see, I only render the checkbox on certain rows that have a precise state(RS, AN, NP). My problem is that when I click on the header checkbox ALL the rows in the grid get selected, also those ones that are not in the state that should be able to be selected(state different than NP RS AN). Is there any way to fix this? Thank you in advance.

Not tested, but can't you use return false from a beforeselect event if the record isn't one of your permitted states? — Matt Allwood
@MattAllwood Actually working! only problem : it disables also the header checkbox. Here is the condition I used : if(idx.data.codiceStato != 'RS' && idx.data.codiceStato != 'AN' && idx.data.codiceStato != 'NP') return false; — Piero Borrelli
You're going to have to hack around and override the code that sets the grid header. I'd look at Ext.selection.CheckboxModel.updateHeaderState - you need to get hdSelectStatus to be true if selectableCount === selectedCount. Note that this kind of code is the stuff that tends to break when you upgrade, so you'll need to keep an eye on it — Matt Allwood

yeshSurya yeshSurya · Accepted Answer · 2018-07-26T12:33:44

Header Checkbox can be detected using rowIndex.

if (rowIndex != 0) {
    if (record.data.codiceStato == 'RS' || record.data.codiceStato == 'AN' || record.data.codiceStato == 'NP') {
        return '<div style="margin-left: -1px;" class="' + Ext.baseCSSPrefix + 'grid-row-checker"> </div>';
    }
    else {
        return '';
    }
}
else {
    return '';
}

Checking rows in extjs grid based on their state

1 Answers