"Smart" CheckBoxSelectionModel

[NoahK17]

mthor: Your wish has been granted. I just updated the Smart CheckboxSelectionModel to version 1.5 with the feature you described above. Please download the latest version and use the new config option "alwaysSelectOnCheck". Cheers!

Updated to v1.5:
- bug fixes and new config option, "alwaysSelectOnCheck"

alwaysSelectOnCheck: Setting this option to true will always select a row as you click on a checkbox. It works in conjunction with the "email" option to further enchance your grid's functionality. The default for this option is false.

[Mthor]

the new version works like a charm. thanks again for your quick fixes and reply.

[Mthor]

is there an event for the checkbox only.

what is going on is, when I select the row the check box does not select (exactly what I needed) and now with the new version when a check box is selected the row is selected (works exactly how I wanted, thanks) but the new issue is if clicked on a row and I hit save changes on my grid, the row is being read and deleted without the check box being selected. I hope I explained that well enough.

[NoahK17]

Mthor: You'll need to change the functionality of your delete function. You would need to check to see if a row is "checked" and not just "selected" -- if you look through the selection model, you can see code that shows how to see if a row isChecked vs. isSelected.

I would write a new function perhaps called "getChecked" that loops through the grid and returns a list of rows that are checked.

Good luck Mthor.

[NoahK17]

Updated to v1.6 to include a small compatibility fix to work with Saki's RowActions plugin. Cheers!

[iuri.andreazza]

bug found. When event beforerowselect returns false the row is not selected, but the check marked as checked.

For create a work around this, I've overwrite the selectRow method to return boolean when the row has been selected:

selectRow : function(index, keepExisting, preventViewNotify){
        if(this.fireEvent("beforerowselect", this, index, keepExisting, preventViewNotify) !== false){
    		Ext.grid.SmartCheckboxSelectionModel.superclass.selectRow.apply(this,[index, keepExisting, preventViewNotify]);
    		return true;
    	}else{
    		return false;
    	}
    },

and modified the private function onMouseDown who's handle the click on the checkbox , handleMouseDown, selectRangeChecked

*Red mark where had change

onMouseDown

 onMouseDown : function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1){
            e.stopEvent();
            // Define variables
            var view = this.grid.getView();
            var rowIndex = view.findRowIndex(t);
            var record = this.grid.store.getAt(rowIndex);            
            var isSelected = this.isSelected(rowIndex);
            var isChecked = record.data[this.dataIndex];
            // Logic to select/de-select rows and the checkboxes
            if(!this.email || this.alwaysSelectOnCheck){
                if (isSelected){
                    if(!isChecked && this.alwaysSelectOnCheck){
                        this.toggleChecked(rowIndex, true);
                    }
                    else{
                        this.deselectRow(rowIndex);
                        this.toggleChecked(rowIndex, false);
                    }
                }
                else{
                    if(this.selectRow(rowIndex, true)){
	                    this.toggleChecked(rowIndex, true);
	                    view.focusRow(rowIndex);
                    }
                }
            }
            else{
                if (isChecked){
                    this.toggleChecked(rowIndex, false);
                }
                else{
                    this.toggleChecked(rowIndex, true);
                }
            }
            view.focusRow(rowIndex);
        }
        // Load the state manager
           Ext.state.Manager.setProvider(new Ext.state.CookieProvider());            
           Ext.state.Manager.loaded = true;            
    },

handleMouseDown function

handleMouseDown : function(g, rowIndex, e){
        var t = e.getTarget('.ux-row-action-item');
        if(!t) {
            if(e.button !== 0 || this.isLocked()){
                return;
            };
            var view = this.grid.getView();
            var record = this.grid.store.getAt(rowIndex);
            if(e.shiftKey && this.last !== false){
                var last = this.last;
                this.selectRange(last, rowIndex, e.ctrlKey);
                if(!this.email){ this.selectRangeChecked(last, rowIndex, e.ctrlKey); }
                this.last = last; // reset the last
                view.focusRow(rowIndex);
            }else{
                var isChecked = record.data[this.dataIndex];
                var isSelected = this.isSelected(rowIndex);
                
                if (isSelected){
                    this.deselectRow(rowIndex);
                    if(!this.email){ this.toggleChecked(rowIndex, false); }
                }else{
                    if(!this.excel){
                        
                        if(!this.email && this.selectRow(rowIndex, true)){ 
                            this.toggleChecked(rowIndex, true);
                        }
                    }
                    else{
                    
                        if(!this.email && this.selectRow(rowIndex, e.ctrlKey)){
                            this.selectRangeChecked(rowIndex, rowIndex, e.ctrlKey);
                        }
                    }
                    view.focusRow(rowIndex);
                }
            }
        }
    }

selectRangeChecked

selectRangeChecked : function(startRow, endRow, keepExisting){
        if(this.locked) return;
        if(!keepExisting){
            if(!this.email || this.alwaysSelectOnCheck){ this.clearSelections(); }
            this.clearChecked();
        }    
        if(startRow <= endRow){
            for(var i = startRow; i <= endRow; i++){
                if(this.grid.store.getAt(i)){
                    if(!this.email || this.alwaysSelectOnCheck){ 
                    	if(this.selectRow(i, true)){
                    		this.toggleChecked(i, true);
                    	} 
                    }else{
                    	this.toggleChecked(i, true);
                    }
                }
            }
        }
        else{
            for(var i = startRow; i >= endRow; i--){
                if(this.grid.store.getAt(i)){
                    if(!this.email || this.alwaysSelectOnCheck){ 
                    	if(this.selectRow(i, true)){
                    		this.toggleChecked(i, true);
                    	} 
                    }else{
                    	this.toggleChecked(i, true);
                    }
                }
            }
        }    
    },

I tested the code, but NoahK17 try it a little more, I think there maybe some changes in the select with arrows.

Ops, I've forgot! I make some changes to your extension, can I? if not, sorry.

Edit:
Sorry, one problem remain, when selected an row, the event beforerowselect occurs more than once. (I don't know how I will make the selectRow in Ext not execute.)

[NoahK17]

Of course, bug fixes are always welcome. I'll add your code to my own project and play around with it a bit. Cheers!

[brenda]

This is great I've solved my problem with this... Now I have a little problem..
When I want to have a header, the checkbox image still appear like this:


Anyone encounter this problem? I saw this on both FF2 and IE6 browsers

[NoahK17]

Use the latest version (1.7) and make sure the header you send in looks something like this:

<div id="x-grid3-hd-checker">&nbsp;Ref</div>

Cheers!

[yaroslav]

Thanks a lot!
Very nice extension.