PDA

View Full Version : "select all " button in GRID



sagardash
5 Aug 2010, 1:08 AM
Hi,

21801

In this grid by checking the red circle check button we can check all the rows of that page of GRID...
Above that i created one button SelectAll ... by that i want it should select rows from all pages of grid...

please need help

THANKS

Condor
5 Aug 2010, 2:41 AM
That would only be possible if the selection model would know all records (also the onces that are not on the current page).

This is obviously not possible with remote paging, but you could make it work with local paging (e.g. the PagingStore user extension).

sagardash
5 Aug 2010, 3:28 AM
thanks for ur quick reply ...

can we select it from backend.... by some query...

Condor
5 Aug 2010, 3:34 AM
You could, but you probably are using paging for a reason (too many records?).

sagardash
5 Aug 2010, 3:47 AM
ya i am using paging .... i want that button to export all records...

Condor
5 Aug 2010, 3:51 AM
How many records are we talking about? Would local paging be feasable?

sagardash
6 Aug 2010, 1:28 AM
more records are there.... can we do ?
how to do that can u please give little idea or any concept

Condor
6 Aug 2010, 1:31 AM
You didn't answer my question. How many record are there? Hundreds, thousands, millions, billions...

sagardash
6 Aug 2010, 1:36 AM
thousands ...

Condor
6 Aug 2010, 1:48 AM
It's a bit much, but you could try using the PagingStore user extension with a PagingCheckboxSelectionModel (if that is it's name).

sagardash
6 Aug 2010, 2:12 AM
But we need to fetch from backend(php) ... how will do that ...

Condor
6 Aug 2010, 2:40 AM
PagingStore would load all records from the server, but only show a single page.

This would enable you to add all records to the selectionmodel selection, even the once that are not on the current page.

The problem, of course, is that loading thousands of records takes longer and uses more memory.

sagardash
6 Aug 2010, 2:49 AM
is this correct ...
my grid name is grid...

tbar: [{
//iconCls: 'icon-user-add',
text: 'SelectAll ',
id: 'add1',
handler: function () {
grid.PagingCheckboxSelectionModel.selectAll(); // here i used ....
}
}, '-',
{
//iconCls: 'icon-user-add',
text: 'Export ',
id: 'add2',
menu: menuExport,
}, '-',
{
text: ' ',
id: 'add3'
}],

Condor
6 Aug 2010, 3:08 AM
No, PagingCheckboxSelectionModel is also a user extension (if it's called that, I don't know).

Selecting all records would mean adding all records in store.allData to the internal selections array. You'll probably have to write some code for that, because it's not supported by default.

sagardash
6 Aug 2010, 3:15 AM
can u please help me regarding that ...


Ext.onReady(function () {
Ext.QuickTips.init();
var gd_exp = function (table, url) {
//alert(table);
var selModel = grid.getSelectionModel();
var selected = selModel.getSelections();
//alert( selected);
var data = [];

Ext.each(selected, function (r) {
data.push(r.get('id'));

});
var type = "table";
//reg_emp,id,grid_export_valid.php
try {
Ext.destroy(Ext.get('downloadIframe'));
}
catch (e) {}
Ext.DomHelper.append(document.body, {
tag: 'iframe',
id: 'downloadIframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:0px;',
src: url + '?data=' + data + '&type=' + table
});
};
var menuExport = new Ext.menu.Menu({
id: 'exportMenu',
items: [{
text: 'Excel',
//handler: exportExcel
//icon: basePath+'/resources/icons/group.gif'
handler: function () {
gd_exp(['reg_emp'], ['grid_export_valid.php']);
}
},
{
text: 'PDF',
handler: function () {
gd_exp(['reg_emp'], ['create_pdf.php']);
//src: 'create_pdf.php?data='+data+'&type='+type
}
},
{
text: 'CSV'
//icon: basePath+'/resources/icons/film.gif'
}]
});

var sm = new Ext.grid.CheckboxSelectionModel({})

var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'grid_valid.php' /*+ record.get('id')*/
}),
baseParams: {
task: "list",
limit: 15
},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'

}, [{
name: 'id',
type: 'string'
},
{
name: 'first_name',
type: 'string'
},
{
name: 'last_name',
type: 'string'
},
{
name: 'age',
type: 'string'
},
{
name: 'gender',
type: 'string'
},
{
name: 'email',
type: 'string'
}

])
});


var grid = new Ext.grid.GridPanel({
store: store,
//width: 600,
region: 'center',
margins: '0 5 5 5',
sm: sm,
viewConfig: {
forceFit: true
},
tbar: [{
//iconCls: 'icon-user-add',
text: 'SelectAll ',
id: 'add1',
handler: function () {
grid.getSelectionModel().selectAll();
//grid.PagingCheckboxSelectionModel.selectAll();
}

//PagingCheckboxSelectionModel

}, '-',
{
//iconCls: 'icon-user-add',
text: 'Export ',
id: 'add2',
menu: menuExport,


}, '-',
{
text: ' ',
id: 'add3'
}],

cm: new Ext.grid.ColumnModel([sm,
{
header: "ID",
dataIndex: 'id',
width: 200,
hidden: true
},
{
header: "First",
dataIndex: 'first_name',
width: 200,
hidden: false
},
{
id: 'name',
header: 'last Name',
dataIndex: 'last_name',
width: 200,
sortable: true,

},
{

header: 'age ',
dataIndex: 'age',
width: 200,
sortable: true,

},
{

header: 'Gender',
dataIndex: 'gender',
width: 200,
sortable: true,

},
{

header: 'email',
dataIndex: 'email',
width: 200,

sortable: true,

}]),
/*bbar: new Ext.PagingToolbar
({
store:store,


displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"

})*/
bbar: new Ext.PagingToolbar({
store: store,
pageSize: 15,
displayInfo: true,
displayMsg: 'Topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
var layout = new Ext.Panel({
title: 'Grid',
layout: 'fit',
layoutConfig: {
columns: 1
},
width: '100%',
height: 500,
items: [grid]
});
layout.render(Ext.getBody());

store.load({
params: {
start: 0,
pageSize: 15
}
});


});
please ...
Thanks

Condor
6 Aug 2010, 3:37 AM
How can you using grouping and paging at the same time? Doesn't the user mind that groups are split across pages and that other groups aren't visible if there is no record for a group on the page.

sagardash
6 Aug 2010, 3:48 AM
sorry condor i didnt get u ..
can u please make it little elaborate....

Condor
6 Aug 2010, 3:57 AM
Let's assume that your store contains 20 records for group A and 20 records for group B.

Page 1 would show group A with 15 records.
Page 2 would show group A with 5 records and group B with 10 B records.
Page 3 would show group B with 10 records.

Isn't this confusing for the user?

sagardash
6 Aug 2010, 5:16 AM
Actually i dont want any grouping... i took out that grouping from my code...
only want paging ...

Condor
6 Aug 2010, 5:28 AM
First start by replacing CheckboxSelectionModel with a selection model that actually supports paging (see the User Extensions forum - don't know the exact name of the extension).

sagardash
8 Aug 2010, 10:17 PM
I Got the Solution

THANKS for ur help...

U r great...THANKS

sagardash
8 Aug 2010, 10:39 PM
Hi

For "SelectAll" i am using this plugin ..

/**
* Ext.ux.grid.RowSelectionPaging plugin for Ext.grid.GridPanel
* A grid plugin that preserves row selections across paging / filtering of the store.
*
* @author Joeri Sebrechts
* @date October 21st, 2009
*
* @class Ext.ux.grid.RowSelectionPaging
* @extends Ext.util.Observable
*/
Ext.ns('Ext.ux.grid');
Ext.ux.grid.RowSelectionPaging = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.grid.RowSelectionPaging, Ext.util.Observable, {
init: function(grid) {
this.grid = grid;
this.selections = []; // array of selected records
this.selected = {}; // hash mapping record id to selected state
grid.on('render', function() {
// attach an interceptor for the selModel's onRefresh handler
this.grid.view.un('refresh', this.grid.selModel.onRefresh, this.grid.selModel);
this.grid.view.on('refresh', this.onViewRefresh, this );
// add a handler to detect when the user changes the selection
this.grid.selModel.on('rowselect', this.onRowSelect, this );
this.grid.selModel.on('rowdeselect', this.onRowDeselect, this);
// patch selModel to detect selection cleared events
var scope = this;
this.selModelClearSelections = this.grid.selModel.clearSelections;
this.grid.selModel.clearSelections = function(fast) {
scope.selModelClearSelections.call(this, fast);
scope.onSelectionClear();
};
// and replace the default behavior of the "check all"
if (!this.originalSelectAll && (this.grid.selModel.id == 'checker')) {
this.grid.selModel.onHdMouseDown = function(e, t) {
if(t.className == 'x-grid3-hd-checker'){
e.stopEvent();
var hd = Ext.fly(t.parentNode);
var isChecked = hd.hasClass('x-grid3-hd-checker-on');
if(isChecked){
hd.removeClass('x-grid3-hd-checker-on');
scope.clearSelections();
}else{
hd.addClass('x-grid3-hd-checker-on');
scope.selectAll();
}
}
}
}
}, this);
}, // end init

// private
onViewRefresh: function() {
this.ignoreSelectionChanges = true;
// explicitly refresh the selection model
this.grid.selModel.onRefresh();
// selection changed from view updates, restore full selection
var ds = this.grid.getStore();
var newSel = [];
for (var i = ds.getCount() - 1; i >= 0; i--) {
if (this.selected[ds.getAt(i).id]) {
newSel.push(i);
}
}
this.grid.selModel.selectRows(newSel, false);
this.ignoreSelectionChanges = false;
}, // end onViewRefresh

// private
onSelectionClear: function() {
if (! this.ignoreSelectionChanges) {
// selection cleared by user
// also called internally when the selection replaces the old selection
this.selections = [];
this.selected = {};
}
}, // end onSelectionClear

// private
onRowSelect: function(sm, i, rec) {
if (! this.ignoreSelectionChanges) {
if (!this.selected[rec.id])
{
this.selections.push(rec);
this.selected[rec.id] = true;
}
}
}, // end onRowSelect

// private
onRowDeselect: function(sm, i, rec) {
if (!this.ignoreSelectionChanges) {
if (this.selected[rec.id]) {
for (var i = this.selections.length - 1; i >= 0; i--) {
if (this.selections[i].id == rec.id) {
this.selections.splice(i, 1);
this.selected[rec.id] = false;
break;
}
}
}
}
}, // end onRowDeselect

/**
* Clears selections across all pages
*/
clearSelections: function() {
this.selections = [];
this.selected = {};
this.onViewRefresh();
}, // end clearSelections

/**
* Returns the selected records for all pages
* @return {Array} Array of selected records
*/
getSelections: function() {
return [].concat(this.selections);
}, // end getSelections

/**
* Selects all the rows in the grid, including those on other pages
* Be very careful using this on very large datasets
*/
selectAll: function() {
var ds = this.grid.getStore();
ds.suspendEvents();
ds.load({
params: {start: 0, limit: ds.getTotalCount() },
callback: function() {
this.selections = ds.data.items.slice(0);
this.selected = {};
for (var i = this.selections.length - 1; i >= 0; i--) {
this.selected[this.selections[i].id] = true;
};
ds.resumeEvents();
this.onViewRefresh();
},
scope: this
});
}
});

from here i got this plugin..
http://www.sencha.com/forum/showthread.php?61282-Ext.ux.grid.RowSelectionPaging&highlight=rowselectionpaging

can please tell me is there any alternate to use that "SelectAll" ...

Thanks..

sagardash
9 Aug 2010, 12:39 AM
Hi condor...

Can u please check it out ......

THANKS..

Condor
9 Aug 2010, 3:05 AM
The selectAll method loads all records. You have to do that one way or the other (even when using PagingStore).

ps. This selectAll method will load and show all records. I don't know if you really want that.

sagardash
9 Aug 2010, 3:09 AM
yes i want that only condor... it should select all the records what are coming from backend to grid ...
i am trying to "EXPORT ALL" by selecting all the records...

Condor
9 Aug 2010, 3:11 AM
So what is your problem with this selectAll implemtation?

sagardash
9 Aug 2010, 3:21 AM
Here i am using one extra plugin ...
Is not there any inbuilt function ... actually i dont want to use that extra plugin...

Condor
9 Aug 2010, 3:26 AM
I don't see your problem. You'll have to use some kind of plugin, because it's not something that Ext supports by default.

sagardash
9 Aug 2010, 3:44 AM
ok...

Condor
9 Aug 2010, 4:00 AM
Is there anything about this plugin that you don't like or would like to have differently?

sagardash
9 Aug 2010, 4:12 AM
i want only this function ...

can i implement this function inside my code ..


selectAll: function() {
var ds = this.grid.getStore();
ds.suspendEvents();
ds.load({
params: {start: 0, limit: ds.getTotalCount() },
callback: function() {
this.selections = ds.data.items.slice(0);
this.selected = {};
for (var i = this.selections.length - 1; i >= 0; i--) {
this.selected[this.selections[i].id] = true;
};
ds.resumeEvents();
this.onViewRefresh();
},
scope: this
});
}

Condor
9 Aug 2010, 4:48 AM
You could use:

grid.getStore().load({
params: {
start: 0,
limit: grid.getStore().getTotalCount()
},
callback: function() {
grid.getSelectionModel().selectAll();
}
});
but I don't know if you like the result.