GroupingView Events

[parky128]

I am working on a grid component and hooking up a CheckboxSelectionModel and a GroupingView. I need a checkbox displaying for each of the grouped headers which I have achieved through editing the groupTextTpl of the GroupingView.

However, now that I have my checkboxess displaying for each of my data rows and for each of the grouped header rows, I need to prevent the checkbox selection on the grouped header row causing the collapsed groups to expand and collapse.

I have seen in other posts that there is a 'groupclick' event which I have setup a listener on in attempt to prevent the event from propagating, but this seem to to be too late in the event chain as when I break into this event handler the grouped row has already expanded to reveal the detail rows.

I then had a go handling the 'groupmousedown' event on the grid, which I can now break into and the group does not expand, but when I try to stop the event using the Ext methods it doesnt seem to prevent the group from expanding\collapsing.

Code below:

this.on({'groupmousedown': function(grid, field, value, e){
            e.stopEvent();
        }, scope: this});

Can anyone out there assist me here?

[mitchellsimoens]

Stopping the event won't help, the toggling happens without the view listening for that event.

In GroupingView the processEvent checks to see if the event name is 'mousedown' and then fires the toggleGroup method on the GroupingView. In the toggleGroup method, this is where you can create an event that you can allow it to be cancelable:

Ext.override(Ext.grid.GroupingView, {
    toggleGroup : Ext.grid.GroupingView.prototype.toggleGroup.createInterceptor(function(group, expanded) {
        expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');

        return this.grid.fireEvent('beforegrouptoggle', this, group, expanded);
    })
});

So now you can add a listener for the 'beforegrouptoggle' and return false and it won't collapse/expand

[parky128]

Thanks for your reply, firstly I think there's a typo in the override you supplied me with. The line that contains 'gel.hasClass' doesn't look right as gel is not defined. I got it working by doing:

Ext.override(Ext.grid.GroupingView, {
    toggleGroup : Ext.grid.GroupingView.prototype.toggleGroup.createInterceptor(function(group, expanded) {
        expanded = Ext.isDefined(expanded) ? expanded : Ext.get(group).hasClass('x-grid-group-collapsed');
        return this.grid.fireEvent('beforegrouptoggle', this, group, expanded);
    })
});

In my grid code, I have a listener setup as follows:

        this.on({'beforegrouptoggle': function(groupingview, group, expanded){
        
        //console.log('beforegrouptoggle');  
           var e = Ext.EventObject;
           var t = e.getTarget('.chkRouteGroup');
           if (t) {
                
                var isChecked = !t.checked;
                
                console.log('Checkbox checked: ' +isChecked);
                
                //Get the grouping field, the grouping prefix and then the grouping value.
                var field = this.view.getGroupField();
                var prefix = this.view.getPrefix(field);
                var groupValue = group.id.substring(prefix.length);


                for(var i=0; i<this.store.getCount(); i++) {
                    
                    if(this.store.getAt(i).get(field) == groupValue){
                         if(isChecked) {
                                this.getSelectionModel().selectRow(i);
                                console.log('select rowIdx:' + i);    
                            } else {
                                this.getSelectionModel().deselectRow(i);
                                console.log('deselect rowIdx:' + i);
                            }
                      }
                }
                return false;
           }
              
        }, scope: this});

I have a checkbox defined in my grouping view template like so:

groupTextTpl: '<input type="checkbox" class="chkRouteGroup"/><span style="font-size:13px; color:black;"> {text}&nbsp;&nbsp;&nbsp;Orders: {values.rs.length} </span>'

What I am trying to achieve is to prevent the expand\collapse behaviour of the group if the user toggles the checked status of a checkbox in the grouping headers, so if the group is already expanded it remains as so. Also, if they check\un-check this box the rows in that group should also adhere to the selection.

I had to resort to using a for loop on the store rather than using store.each() as I couldn't get references to my field and groupValue variables for some reason (perhaps you can help here)?

I am now faced with an issue where if I try to select the relevant rows using the selection model selectRow() routine, it seems to cause the beforegrouptoggle event fired in the override numerous times (hundreds).

I appreciate any help you can give me here.

[parky128]

I ended up having to stop and resume the grid events when making the selections\de-selections, so my code ended up like so:

		this.on({'beforegrouptoggle': function(groupingview, group, expanded){
	
		//console.log('beforegrouptoggle');  
		   var e = Ext.EventObject;
		   var t = e.getTarget('.chkRouteGroup');
		   if (t) {
				//Stop events on grid
				this.suspendEvents(false);
				
				var isChecked = !t.checked;
				//console.log('Checkbox checked: ' +isChecked);
				
				//Get the grouping field, the grouping prefix and then the grouping value.
				var field = this.view.getGroupField();
				var prefix = this.view.getPrefix(field);
				var groupValue = group.id.substring(prefix.length);
				
				//Determine with rows to be selected\de-selected
				var rowsToSelect = [];
				var rowsToDeSelect = [];
				for(var i=0; i<this.store.getCount(); i++) {
					
					if(this.store.getAt(i).get(field) == groupValue){
						 if(isChecked) {
								rowsToSelect.push(i);
								//console.log('select rowIdx:' + i);	
							} else {
								rowsToDeSelect.push(i);
								//console.log('deselect rowIdx:' + i);
							}
					  }
				}
				
				//Perform the select\de-select
				if(isChecked) {
					//console.log('selectRows'); 
					//Pass in true to maintain existing selections
					this.getSelectionModel().selectRows(rowsToSelect,true);
				} else {
					//There is no deselectRows function so have to loop through here...
					for(var i=0; i<rowsToDeSelect.length; i++) {
						//console.log('deselectRows'); 
						this.getSelectionModel().deselectRow(rowsToDeSelect[i]);
					}
				}
				
				//Resume events on grid
				//console.log('resumeEvents'); 
				this.resumeEvents();
				return false;
		   }
			  
		}, scope: this});

Whilst this seems to work, I am left with a situation where if the group is already in a collapsed state and I click the checkbox in the grouped heading it will cause the group to expand. But thereafter, clicking the checkbox does not cause the group to toggle expand\collapse.

I can't see why this is happening, is there a better way to achieve the desired functionality?

[adammascherin]

Thanks mitchellsimoens for the solution, and thanks parky for the correction on his code.

This helped me prevent collapsing/expanding of grouping view groups.