PDA

View Full Version : Ext.grid.CheckboxColumn Plugin



mfoley
31 Dec 2007, 5:51 PM
Checkbox Column Plugin creates a grid column that provides:
- single-click editing of boolean records in a grid-bound data store
- single-click catch-all toggling of boolean records in a grid-bound data store, via the column header.
- event listening of grid *click events (cellclick, headerclick)
- event firing of grid *edit events (validateedit, beforeedit, afteredit)
- event firing of grid column model "headerchange" event

Feedback is very welcome!

Usage:


var ckbxCol = new Ext.grid.CheckboxColumn({dataIndex:'accept'});
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: [
ckbxCol,
{header:'Name',dataIndex:'name'}
],
plugins: ckbxCol
});


Source:


Ext.grid.CheckboxColumn = function(config){
config.id = config.id || 'ck';
config.columnId = config.id || 'ck';
return Ext.applyIf(config||{},{
init:function(grid){
grid.on('cellclick', this.onCellClick, this);
grid.on('headerclick',this.onHeaderClick,this);
}
,dataIndex:''
,header:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'
,enableHeaderControl:true
,masterValue:false
,width:40
,fixed:true
,headerUnchecked:'<div class="x-grid3-check-col">&amp;#160;</div>'
,headerChecked:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'
,onHeaderClick:function(grid,columnIndex,event){
var cIndex = grid.getColumnModel().getIndexById(this.columnId);
var column = grid.getColumnModel().getColumnById(this.columnId);
if(cIndex == columnIndex && this.enableHeaderControl!==false){
var newValue = (typeof column.masterValue == "undefined")?this.masterValue:!column.masterValue;
column.masterValue = newValue;
var newHeader = newValue==true?this.headerChecked:this.headerUnchecked;
if(column.header != newHeader){
column.header = newValue==true?this.headerChecked:this.headerUnchecked;
grid.getColumnModel().fireEvent("headerchange",cIndex,newHeader);
}
grid.getView().updateHeaders();
if(this.dataIndex != ''){
var ct = grid.getStore().getCount();
for(var i=0;i<ct;i++){
this.toggleCheck(grid,i,columnIndex,newValue);
}
}
}
}
,onCellClick:function(grid,rowIndex,columnIndex,event){
var cIndex = grid.getColumnModel().getIndexById(this.columnId);
if(cIndex == columnIndex) this.toggleCheck(grid,rowIndex,columnIndex);
}
,toggleCheck:function(grid,rowIndex,columnIndex,newValue){
var td = grid.getView().getCell(rowIndex,columnIndex);
var record = grid.getStore().getAt(rowIndex);
var startValue = record.data[this.dataIndex];
if(this.dataIndex != ''){
var newValue = newValue||!Ext.fly(td).hasClass('x-grid3-check-col-on');
var e = {
grid: grid,
record: record,
field: this.dataIndex,
value: newValue,
originalValue: startValue,
row: rowIndex,
column: columnIndex,
cancel: false
};
if( (grid.fireEvent("beforeedit",e)!==false && !e.cancel)&&
(grid.fireEvent("validateedit",e)!==false && !e.cancel)){
record.set(this.dataIndex,newValue);
delete e.cancel;
grid.fireEvent("afteredit",e);
}
}
}
,renderer:function(value,meta,record){
meta.css = 'x-grid3-check-col-td x-grid3-check-col';
if(value==true || value=='true' || value=='on' || value==1 || value=='1') meta.css += ' x-grid3-check-col-on';
return '<div class="x-grid3-check-col-inner"> </div>';
}
});
}

DigitalSkyline
1 Jan 2008, 12:04 PM
Wow just what I was looking for... Thanks!

kenshin
2 Jan 2008, 4:44 AM
Great work! :-)

Is possible to have a live demo?

mjcon
7 Jan 2008, 9:15 AM
I've tried this and it's nearly working for me...I have a grid with several checkboxes, and after implementing your code, when I click on any of the checkboxes, all of the others get toggled too (to the reverse of whatever they were showing previously). I lifted your code untouched in place of the code from the "edit-grid.js" example. Any ideas what I may have done wrong?
Cheers
Martin

ohhorob
3 Sep 2008, 1:42 AM
Checkbox Column Plugin creates a grid column that provides:
- single-click editing of boolean records in a grid-bound data store
- single-click catch-all toggling of boolean records in a grid-bound data store, via the column header.
- event listening of grid *click events (cellclick, headerclick)
- event firing of grid *edit events (validateedit, beforeedit, afteredit)
- event firing of grid column model "headerchange" event

Feedback is very welcome!


Hi mfoley,

Your plugin works well. I had arrived at a very similar solution after discovering the 'afteredit' mechanism in onEditComplete().

A quick note for anyone else looking to use this plugin... to turn off the "toggle-all" header, specify your header name, and enableHeaderControl: false in the config passed to the constructor.

Cheers,

Rob

justincredible
17 Dec 2008, 11:02 AM
I've tried this and it's nearly working for me...I have a grid with several checkboxes, and after implementing your code, when I click on any of the checkboxes, all of the others get toggled too (to the reverse of whatever they were showing previously). I lifted your code untouched in place of the code from the "edit-grid.js" example. Any ideas what I may have done wrong?
Cheers
Martin

I am having the same issue.

The columns in my grid are selected dynamically so my grid could end up having multiple checkboxcolumns, only 1 or zero. When a grid is created with only one checkboxcolumn everything is a-okay. If the grid has multiple I start having issues. The first column will act as it is supposed to but every subsequent column will just control the first one. So if I click a checkbox in the 3rd column it will only toggle the checkbox in the 1st column. If I alert the columnIndex it is also giving me that first checkboxcolumn index regardless of which one I am trying to check.

Here is what my code looks like:



<script type='text/javascript'>
Ext.namespace('Ext.ux');
Ext.ux.Livegrid = Ext.extend(Ext.ux.grid.livegrid.EditorGridPanel, {
initComponent : function() {
var bufferedReader = new Ext.ux.grid.livegrid.JsonReader({
root: 'response.value.items',
versionProperty: 'response.value.version',
totalProperty: 'response.value.total_count',
id: 'id'
},
[
{name: 'wid'},
{name: 'pid'},
{name: 'word'},
{name: 'year'},
{name: 'dc'},
{name: 'used_dc'}
]);
this.store = new Ext.ux.grid.livegrid.Store({
autoLoad: true,
bufferSize: 4027,
reader: bufferedReader,
url: '/words/data-proxy.php'
});
this.selModel = new Ext.ux.grid.livegrid.RowSelectionModel(); this.view = new Ext.ux.grid.livegrid.GridView({
nearLimit: 50,
loadMask: {
msg : 'Please wait...'
}
});
this.bbar = new Ext.ux.grid.livegrid.Toolbar({
view: this.view,
displayInfo: true
});
Ext.ux.Livegrid.superclass.initComponent.call(this);
}
});

var dc_CheckColumn = new Ext.grid.CheckboxColumn({
header: 'dc',
width: '75px',
dataIndex: 'dc',
sortable: true,
enableHeaderControl: false
});

var used_dc_CheckColumn = new Ext.grid.CheckboxColumn({
header: 'used_dc',
width: '75px',
dataIndex: 'used_dc',
sortable: true,
enableHeaderControl: false
});

var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({header : '#' }),
{
header: 'wid',
width: '75px',
dataIndex: 'wid',
hidden: true,
hideable: false,
sortable: true
},
{
header: 'pid',
width: '75px',
dataIndex: 'pid',
hidden: true,
hideable: false,
sortable: true
},
{
header: 'word',
width: '125px',
dataIndex: 'word',
sortable: true,
editor: new Ext.form.TextField({
allowBlank: true,
clicksToEdit: 1
})
},
{
header: 'year',
width: '75px',
dataIndex: 'year',
sortable: true,
editor: new Ext.form.TextField({
allowBlank: true,
clicksToEdit: 1
})
},
dc_CheckColumn,
used_dc_CheckColumn
]);

var grid = new Ext.ux.Livegrid({
listeners: {
afteredit: function(eventInfo) {
var column = eventInfo.column;
var col = cm.getColumnById(column).dataIndex;
var data = eventInfo.value;
var store = grid.getStore();
var rowData = store.getAt(eventInfo.row);
var wordID = rowData.get('wid');
var pubID = rowData.get('pid');
var opt = {
method: 'post',
asynchronous: true,
parameters: {
action: 'edit-record',
column: col,
value: data,
wid: wordID,
pid: pubID
},
evalScripts: true
}
new Ajax.Updater('query','/words/words.php',opt);
}
},
enableDragDrop: false,
cm: cm,
loadMask: {
msg : 'Loading...'
},
title: '',
renderTo: 'content',
plugins: [dc_CheckColumn,used_dc_CheckColumn]
});

results = new Ext.Window({
title: 'Results',
maximizable: false,
constrain: true,
closable: true,
collapsible: true,
closeAction: 'hide',
plain: true,
resizable: true,
layout: 'fit',
items: grid,
width: 1200,
height: 600,
tbar: new Ext.Toolbar({
items : [
new Ext.Button({
text : 'Export to Excel',
iconCls: 'excel-button',
handler: function(){
window.open('/words/words.php?action=export-to-excel');
}
})
]
})

});

results.show();
</script>

:-? Any ideas?

Drakkhen
19 Dec 2008, 1:04 AM
I have the same problem : everything is fine with one checkbox, but not when there is more.
Does anyone have a solution ?

justincredible
29 Dec 2008, 9:56 AM
I have the same problem : everything is fine with one checkbox, but not when there is more.
Does anyone have a solution ?

Have you had any luck?

weelillad
23 Sep 2009, 1:12 AM
I have found a solution for more than one column of checkboxes. It involves modifying the original code slightly:


Ext.grid.CheckboxColumn = function(config){

config.id = config.id || 'ck';

config.columnId = config.id || 'ck';

return Ext.applyIf(config||{},{

init:function(grid){

grid.on('cellclick', this.onCellClick, this);

grid.on('headerclick',this.onHeaderClick,this);

}

,dataIndex:''

,header:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'

,enableHeaderControl:true

,masterValue:false

,width:40

,fixed:true

,headerUnchecked:'<div class="x-grid3-check-col">&amp;#160;</div>'

,headerChecked:'<div class="x-grid3-check-col x-grid3-check-col-on">&amp;#160;</div>'

,onHeaderClick:function(grid,columnIndex,event){

var cIndex = grid.getColumnModel().getIndexById(this.columnId);

var column = grid.getColumnModel().getColumnById(this.columnId);

if(cIndex == columnIndex && this.enableHeaderControl!==false){

var newValue = (typeof column.masterValue == "undefined")?this.masterValue:!column.masterValue;

column.masterValue = newValue;

var newHeader = newValue==true?this.headerChecked:this.headerUnchecked;

if(column.header != newHeader){

column.header = newValue==true?this.headerChecked:this.headerUnchecked;

grid.getColumnModel().fireEvent("headerchange",cIndex,newHeader);

}

grid.getView().updateHeaders();

if(this.dataIndex != ''){

var ct = grid.getStore().getCount();

for(var i=0;i<ct;i++){

this.toggleCheck(grid,i,columnIndex,newValue);

}

}

}

}

,onCellClick:function(grid,rowIndex,columnIndex,event){

var cm = grid.getColumnModel();
var colId = cm.getColumnId(columnIndex);
var colConfig = cm.getColumnById(colId);
if (colConfig.headerUnchecked == '<div class="x-grid3-check-col">&amp;#160;</div>') // check if the column is a CheckboxColumn, by looking for unique var/value
this.toggleCheck(grid, rowIndex, columnIndex);

}

,toggleCheck:function(grid,rowIndex,columnIndex,newValue){

var cm = grid.getColumnModel();
var colId = cm.getColumnId(columnIndex);
var colConfig = cm.getColumnById(colId);

var td = grid.getView().getCell(rowIndex,columnIndex);

var record = grid.getStore().getAt(rowIndex);

var startValue = record.data[colConfig.dataIndex];

if(this.dataIndex != ''){

var newValue = newValue||!Ext.fly(td).hasClass('x-grid3-check-col-on');

var e = {

grid: grid,

record: record,

field: colConfig.dataIndex,

value: newValue,

originalValue: startValue,

row: rowIndex,

column: columnIndex,

cancel: false

};

if( (grid.fireEvent("beforeedit",e)!==false && !e.cancel)&&

(grid.fireEvent("validateedit",e)!==false && !e.cancel)){

record.set(colConfig.dataIndex,newValue);

delete e.cancel;

grid.fireEvent("afteredit",e);

}

}

}

,renderer:function(value,meta,record){

meta.css = 'x-grid3-check-col-td x-grid3-check-col';

if(value==true || value=='true' || value=='on' || value==1 || value=='1') meta.css += ' x-grid3-check-col-on';

return '<div class="x-grid3-check-col-inner"> </div>';

}

});

}

Please feel free to improve upon this.

Urkman
3 May 2011, 7:20 AM
Is this working with 3.3.x?
Or somebody knows a similar extension for 3.3.x?

Thanks and Greetings,
Urkman

Jonny5
12 Sep 2011, 11:35 AM
Could use a stock feature like this as well for our projects.

Beginner1971
9 Dec 2011, 1:52 PM
I have a checkbox that I want to dynamically set to true or false at run-time depending on the situations. Is this possible? If so, how?

Beginner1971
12 Dec 2011, 10:14 AM
OK, I figured out how to set the checkboxes programmatically. In the onCellClick() event handler, update the data store and the grid is automatically updated.

ing.amdangelo
16 Dec 2011, 1:16 AM
The option Single Select doesn't Work ???

I use ext js 3.3