[2.0b1] Ext.ux.grid.plugins.GroupCheckboxSelection

[rstuven]

Hi,
This plugin allows you to select all items of a group using a checkbox in the group header.

The grid must use a GroupingView and a selection model with singleSelect=false. Usage in combination with CheckboxSelectionModel is optional.

To try it, just extract the attached files to Ext "examples/grid" directory and open group-checkbox.html (this example is derived from the built-in "grouping" example).

[tchitani]

Great plug-in. Few points: after regrouping by any other column, the selections need to be reset or if you would like to keep the selection rows, you need to apply "checked" status to all new group checkboxes.

Thank you
Nik

[Grimsk]

good job needed it ;)

[andrei.neculau]

First of all - your plugin doesn't work. I tried your testcase, and when ticking the group checkbox, only the last item in the group gets ticked.

Second of all - a live demo is a must for all extensions and plugins, as a form of respect to developers' time!

[rstuven]

First of all - your plugin doesn't work. I tried your testcase, and when ticking the group checkbox, only the last item in the group gets ticked.

The plugin works (though it's not the panacea, I welcome every constructive suggestion)... but the example didn't. As myself remarked above, singleSelect option must be false, but I uploaded a wrong test example with singleSelect:true... I'm sorry. Thanks for pointing my mistake. It's already fixed in the attachment.

Second of all - a live demo is a must for all extensions and plugins, as a form of respect to developers' time!

You must be kidding... I do respect the community contributing back at least a little part of all I have received. Each of us has its own resources and constraints, so please you respect that. I prefer to share something than to share anything. Besides, it seems the other commenters did save time :)

[nooneyet]

As heidtmare pointed out here:
http://extjs.com/forum/showthread.php?t=16346&page=2
the groupTextTpl sadly pulls its text from the rendered field, not from the core data...

So your great plugin (*and it is indeed very cool - and I really needed it, so thanks.) breaks down when grouping by a rendered field.

Until they fix this issue, here's an ugly patch I used to make your plugin work:

1. In the field renderer function I wrapped the data value with a special delimiters, e.g.
return '<span style=\'font-weight:bold;color:green;\'><XXX>' + val + '</XXX></span>';

2. Inside GroupCheckboxSelection.js, right after the line
var value = parts[1].trim();
I've put this unobtrusive patch:
//////PATCH: the renderer used for the grouped field injects all its rendered HTML to the value... so try to extract a <XXX>val</XXX> value
try{
var tmp1 = (text.split("<XXX>"))[1];
var tmp2 = (tmp1.split("</XXX>"))[0];
value = tmp2;
}
catch(e){}

This of course doesn't yet help with the fact that the group text shows the rendered HTML, but at least your plugin still works...
Anyway, thanks!
--
No'am Peled
http://www.NoamPeled.com/

[JorisA]

andrei.neculau don't start about the respect blabla. You should respect the people who share their efforts.

Rstuven I didn't try your extension yet, but I like the idea, so thnx. (and a live demo would be nice;))

[ebizviz]

It is very useful function.

I see one issue:

Whenever I click on any other place in the grid other then the check box, the entire previous selections are unchecked. I have to recheck again, this will be frustration expereience for the end user.

Do you have any suggestions, on how to fix?

Thanks

Aarif

[innovator2]

Please help me out in placing the checkbox before the group collapse/expand image. Currently, it is being displayed between that image and the header text. Find the attached thumbnail.

:s

Thanks,
Innovator2

[turbovegas]

Awesome plugin rstuven! I saw that you were using a normal input checkbox element to control the selecting/deselecting of all rows, so I thought I'd spruce it up and use the Ext checkboxes instead. Here's what I did:

Near the top, change the grid.view.groupTextTpl setter to the following (had to use dl/dd elements instead of div's because the grouping css overrides all divs :():

grid.view.groupTextTpl =
['<dl class="x-grid3-td-checker" style="height:18px; border:0px !important">',
'<dd class="x-grid3-row-checker" style="width:18px; float:left;" x-grid-group-hd-text="{text}">&nbsp;</dd>',
'<dd style="float:left; padding:3px 0px 0px 3px;">',
grid.view.groupTextTpl,
'</dd>',
'</dl>'
].join('');Next, change the behaviors to check the ".x-grid3-row-checker" instead of the ".x-grid-group-checkbox" class (do this for the mousedown event too):

From:
behaviors[id + ' .x-grid-group-hd .x-grid-group-checkbox@click']To:
behaviors[id + ' .x-grid-group-hd .x-grid3-row-checker@click']Finally, add the following lines right above the loop that checks/unchecks all rows:

var hd = Ext.fly(target.parentNode)
target.checked = !hd.hasClass('x-grid3-row-selected');
if (target.checked)
hd.addClass('x-grid3-row-selected');
else
hd.removeClass('x-grid3-row-selected');That should do it. I've tested in FF3 and IE7.

[tonedeaf]

This extension doesn't work for me in Firefox 3.0.6 and IE6. I'm using ExtJS 2.2.1

The group checkbox starts working like the expand/collapse button and hides and shows the rows when clicked. And it doesn't affect the selection of the rows in the group at all.

http://xs537.xs.to/xs537/09106/groupcheckbox111.png

[Raz0r]

Great plugin, however there are some implementation bugs.
First of all the author of the plugin did not consider the fact that rendered data in the grid may differ from that which is in data.GroupingStore:
var text = target.getAttribute("x-grid-group-hd-text");
This is an incorrect approach, however I still can't find a way to extract real values from data.GroupingStore which are currently grouped.
Assuming that no rendering is performed on the grid values the method that is used in the plugin to get values of grouped field allows to select the rows correctly. But if some rendering is preformed (e.g. wrapping the values with some extra markup) there would arise a lot of mistakes. For instance, if the rendered value has ':' symbol(s) no rows would be selected due to the code below:
var parts = text.split(":");
To prevent this, splitting should be performed on the ": " symbols and all the tags must be stripped:
var value = Ext.util.Format.stripTags(parts[1]);
As for date fields, the plugin does not work with them totally. In data.GroupingStore they look like Sat Mar 14 2009 00:00:00 GMT+0300 but actually these fields are usually displayed via DateRenderer, so the data would be completely different.

Unfortunately, Ext does not provide any functionality to get current grouping state. Any ideas?

[proximus121]

It seems it doesn't work for versions higher than 2.2

[proximus121]

Can anyone help? The event handling has changed in version 2.2 and higher and the plugin doesn't work anymore .. I can't figure out how to catch and stop the expand/collapse event. Any help would be appreciated.
Thanks

[eguchi80]

Same for me, I need this feature in ext2.2

[sp_extjs]

Any one has figured out, how to make this plugin work with ext 2.2.1 lib

[jarlau]

I've tested the below code and it should work on 2.2.1 & 2.3.

modified version of GroupCheckboxSelection.js

Ext.namespace("Ext.ux.grid.plugins");

Ext.ux.grid.plugins.GroupCheckboxSelection = {

init: function(grid){
this.grid = grid;

grid.view.groupTextTpl =
['<dl style="height:18px; border:0px !important">',
'<dd class="x-grid3-hd-checker" style="width:18px; float:left;" x-grid-group-hd-text="{text}">&nbsp;</dd>',
'<dd style="float:left; padding:3px 0px 0px 3px;">',
grid.view.groupTextTpl,
'</dd>',
'</dl>'
].join('');

grid.on('render', this.initBehaviors, this);
},
initBehaviors: function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onGroupMouseDown, this);
},
onGroupMouseDown: function(e, t) {
var grid = this.grid;
if(e.button === 0 && t.className == 'x-grid3-hd-checker'){ // Only fire if left-click

var hd = Ext.fly(t.parentNode)
t.checked = !hd.hasClass('x-grid3-hd-checker-on');
if (t.checked)
hd.addClass('x-grid3-hd-checker-on');
else hd.removeClass('x-grid3-hd-checker-on');

var ds = grid.getStore();
var sm = grid.getSelectionModel();
var cm = grid.getColumnModel();
var text = t.getAttribute("x-grid-group-hd-text");

var parts = text.split(":")

var value = parts[1].trim();
var header = parts[0].trim();
var field = cm.getColumnsBy(function(columnConfig, index){
return (columnConfig.header == header);
})[0].dataIndex;

var records = ds.query(field, value).items;

for(var i = 0, len = records.length; i < len; i++){
var row = ds.indexOf(records[i]);
if (t.checked) {
sm.selectRow(row, true);
}
else {
sm.deselectRow(row);
}
}
// expand group
var view = grid.getView();
view.toggleGroup(view.getGroupId(value), Ext.isIE ? false : true);
}
}
}

[ninoguba]

I've tested the below code and it should work on 2.2.1 & 2.3.

modified version of GroupCheckboxSelection.js

Ext.namespace("Ext.ux.grid.plugins");

Ext.ux.grid.plugins.GroupCheckboxSelection = {

init: function(grid){
this.grid = grid;

grid.view.groupTextTpl =
['<dl style="height:18px; border:0px !important">',
'<dd class="x-grid3-hd-checker" style="width:18px; float:left;" x-grid-group-hd-text="{text}">&nbsp;</dd>',
'<dd style="float:left; padding:3px 0px 0px 3px;">',
grid.view.groupTextTpl,
'</dd>',
'</dl>'
].join('');

grid.on('render', this.initBehaviors, this);
},
initBehaviors: function() {
var view = this.grid.getView();
view.mainBody.on('mousedown', this.onGroupMouseDown, this);
},
onGroupMouseDown: function(e, t) {
var grid = this.grid;
if(e.button === 0 && t.className == 'x-grid3-hd-checker'){ // Only fire if left-click

var hd = Ext.fly(t.parentNode)
t.checked = !hd.hasClass('x-grid3-hd-checker-on');
if (t.checked)
hd.addClass('x-grid3-hd-checker-on');
else hd.removeClass('x-grid3-hd-checker-on');

var ds = grid.getStore();
var sm = grid.getSelectionModel();
var cm = grid.getColumnModel();
var text = t.getAttribute("x-grid-group-hd-text");

var parts = text.split(":")

var value = parts[1].trim();
var header = parts[0].trim();
var field = cm.getColumnsBy(function(columnConfig, index){
return (columnConfig.header == header);
})[0].dataIndex;

var records = ds.query(field, value).items;

for(var i = 0, len = records.length; i < len; i++){
var row = ds.indexOf(records[i]);
if (t.checked) {
sm.selectRow(row, true);
}
else {
sm.deselectRow(row);
}
}
// expand group
var view = grid.getView();
view.toggleGroup(view.getGroupId(value), Ext.isIE ? false : true);
}
}
}


The above code doesn't work on version 3. I get the following error:

'1' is null or not an objectCan someone please make it work on the latest ExtJS version? Thanks.

[jarlau]

Did you try the author's zip file and replace the modified version of GroupCheckboxSelection.js?
I have a brief test on extjs 3.0 and it works too.

or post your code...

[ninoguba]

Did you try the author's zip file and replace the modified version of GroupCheckboxSelection.js?
I have a brief test on extjs 3.0 and it works too.

or post your code...

yes I already tried running his example with the modified version with ExtJS 3 and it didn't work. anyway, since this is not working I started to develop my own. will share if I'm succesful...

EDIT: oops my mistake. it is actually working in ExtJS 3.0. the reason it seems it didnt work for me is i have the GroupCheckboxSelection.js in two places and I only updated one copy that is not the one that is being loaded by my webpage.

[ninoguba]

Hi All,

I would like to share what I have. Provides the same functionality as this plugin but enhanced to look more seamless with the CheckboxSelectionModel (the group checkbox appears on the checkbox selection column, before the group expand/collapse column).

Also added the functionality to provide a condition for not showing the group header. Useful for cases where you dont want the group headers to appear if the group only has one record or you like your grid to appear as if you have a mixed grouped and ungrouped records.

Here's the code:


/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.GroupHeaderCustomizer
* @extends Ext.grid.GroupingView
* A GridPanel plugin that hides the group header when there is not more
* than 1 record in the group
*/
Ext.ux.grid.GroupHeaderCustomizer = Ext.extend(Ext.grid.GroupingView, {

/**
* @cfg {String} showGroupHeaderCondition
* Set it to the condition that when it evaluates to true, it renders the group header visible (defaults to 'true').
*/
//showGroupHeaderCondition : 'values.rs[0].data["batchID"] != ""',
showGroupHeaderCondition : 'true',

/**
* @cfg {Boolean} addGroupHeaderCheckbox
* Set it to false to disable rendering a checkbox in the same row as the group header (defaults to true).
*/
addGroupHeaderCheckbox : true,

init: function(grid) {
if (this.addGroupHeaderCheckbox) {
var gview = grid.getView();

gview.interceptMouse = gview.interceptMouse.createInterceptor(function(e) {
var obj = e.getTarget('.x-grid3-grouphd-checker');
if (obj) {
//toggle group header checkbox
var hd = Ext.fly(obj.parentNode)
var checked = !hd.hasClass('x-grid3-grouphd-checker-on');
if (checked) {
hd.addClass('x-grid3-grouphd-checker-on');
} else {
hd.removeClass('x-grid3-grouphd-checker-on');
}

//toggle group row checkbox(es)
var groupId = obj.id.replace(/ext-gen[0-9]+-gp-/, '');
var records;
var store = grid.getStore();
if (groupId) {
var re = new RegExp(RegExp.escape(groupId));
records = store.queryBy(function(r) {
return r._groupId.match(re);
});
records = records ? records.items : [];
}
var sm = grid.getSelectionModel();
for(i = 0, len = records.length; i < len; i++){
if (checked) {
sm.selectRow( store.indexOf(records[i]) , true );
} else {
sm.deselectRow( store.indexOf(records[i]) );
}
}

//prevent group collapse/expand
return false;
}
});

gview.startGroup = new Ext.XTemplate(
'<div id="{groupId}" class="x-grid-group {cls}">',
'<div id="{groupId}-hd" class="x-grid-group-hd" style="{[',this.showGroupHeaderCondition,' ? "" : "display:none;"]}">',
'<div class="x-grid3-grouphd-row">',
'<table class="x-grid3-grouphd-row-table" cellspacing="0" cellpadding="0" border="0" style="width:100%;">',
'<tbody><tr>',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-checker" tabindex="0" style="width: 18px;"><div class="x-grid3-cell-inner x-grid3-col-checker" unselectable="on"><div id="{groupId}" class="x-grid3-grouphd-checker"> </div></div></td>',
'<td class="x-grid3-col x-grid3-cell x-grid3-td-title" tabindex="0" style="width: 100%;"><div class="x-grid-group-title">', gview.groupTextTpl, '</div></td>',
'</tr></tbody>',
'</table>',
'</div>',
'</div>',
'<div id="{groupId}-bd" class="x-grid-group-body">'
);
}
}
});



Here's the required CSS:


.x-grid3-grouphd-checker {
width:100%;
height:18px;
background-position:2px 2px;
background-repeat:no-repeat;
background-color:transparent;
}

.x-grid3-grouphd-checker-on .x-grid3-grouphd-checker {
background-position:-23px 3px;
}

.x-grid3-grouphd-checker {
background-image:url(../../resources/images/default/grid/row-check-sprite.gif);
}

.x-grid3-grouphd-row td{
-moz-outline: none;
-moz-user-focus: normal;
}

.x-grid3-grouphd-row td {
line-height:13px;
vertical-align: top;
padding-left:1px;
padding-right:1px;
-moz-user-select: none;
-khtml-user-select:none;
-webkit-user-select:ignore;
}



To use, just add an instance of the plugin to your GridPanel. Works on ExtJS3 and tested on IE6 and FF3.5.

Known incompatibility: will require changes if using RowActions plugin with groupActions defined.

Any help to make it compatible will be nice! Also help to correctly render the group header checkbox when the grid header checkbox is checked/unchecked (when checking/unchecking all) will also be appreciated.

Here's the screenshot:
http://extjs.com/forum/attachment.php?attachmentid=15267&stc=1&d=1248739228

Thanks,
Nino