View Full Version : Grid with Checkbox column - selection issues

10 Feb 2011, 8:31 AM

I have a grid, supporting paging, with an initial column populated with a checkbox for each row. The checkbox is used to select multiple rows in the grid needed in my context. Paging should be supported and row selections on previous pages should not get lost.

The grid also supports the idea of previews. Meaning that the selection of a row triggers the refresh of a more detailed preview of the data displayed by that row.

I implemented the checkbox using a CheckboxSelectionModel. I nicely get the checkboxes and via its events I can keep track of which row has been selected. The only issue I encounter is that ticking a checkbox selects the entire row (the background colour of the row is changing). This is something I'd like to avoid. Checking the box should only tick the checkbox and now other visual effects should happen. Secondly the tick of the checkbox results in a selection of the row causing my preview to run which I like to avoid. So ticking the checkbox should not result in a row selected event.

Any ideas/suggestions on how both of these issues can be addressed ?



10 Feb 2011, 8:38 AM
you could change

.x-grid3-row-selected {
background-color: #DFE8F6 !important;
background-image: none;
border-color: #A3BAE9;

to an empty class.

best regards

10 Feb 2011, 2:16 PM
why not simply change selectedRowClass for GridView?

10 Feb 2011, 2:34 PM
I hate to bug you on your thread, but are you able to click the checkboxes on/off by clicking on them or do you have to select the entire row to get the checkbox to click on/off. I'm having troubles with this...


Good luck on your situation as well, wish I had suggestions..


11 Feb 2011, 1:04 AM
Yup, it is possible to make checkbox column without usage of CheckboxSelectionModel, but that way is a bit tricky.

new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'enabled',
header: 'Enabled',
tooltip: 'Checkbox column',
width: 75,
align: 'center',
processEvent : function(name, event, grid, rowIndex, colIndex){
// lets find column which recieves the event
var column = grid.getColumnModel().getColumnById(
// we are interested in mouse click events only,
// other events are processed as usual
if (name == 'mousedown') {
// lets find the record which is displayed via clicked row
var rowElement = grid.getView().getRow(rowIndex);
var record = grid.getStore().getAt(rowIndex);
// lets invert record.enabled value
record.set('enabled', (record.data['enabled']) ? 0 : 1);
// other check/unckeck handling stuff here
return false;
else {
return Ext.grid.ActionColumn.superclass.processEvent.apply(column, arguments);
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
metaData.css += ' x-grid3-check-col-td';
return String.format('<div class="x-grid3-check-col{0}">&#160;</div>', value ? '-on' : '');

I'm pretty sure this way will not be compatible with Ext4

11 Feb 2011, 5:34 AM
Why write this yourself? Just use xtype:'checkcolumn' (and include ext/examples/ux/CheckColumn.js).

11 Feb 2011, 7:15 AM
Thank you! It also solves the issue of not selecting the whole row as the checkbox is checked, (which I admittedly kinda liked). But this is definitely working better for me overall! Hope this is also helping the person who started this thread :)