PDA

View Full Version : Selecting rows in Grid



adetogni
6 Aug 2010, 3:00 AM
Hi
I'm trying to pre-select items in a grid.
I have a store connected to this grid



var cbox = new Ext.grid.CheckboxSelectionModel();
var GridPeople = new Ext.grid.GridPanel({
store: AllUsersDataStore,
columnLines: true,
cm: new Ext.grid.ColumnModel({
columns: [
cbox,
{id:'Fullname',header:'Name',dataIndex:'Fullname'}]
}),
enableColLock:false,
sm: cbox,
height: 340,
stripeRows: true,
view: new Ext.grid.GridView({autoFill: true, forceFit:true})/*,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),*/
})


To pre-select, I used this code ("s", here is a list of IDs, like "125,15,56"):


arr = s.split(",");
for (var i=0; i<arr.length-1; i++){
cbox.selectRecords(AllUsersDataStore.getAt(arr[i]),false);
}

Well, it works fine, rows are selected "visually". But if you call cbox.getSelections() the result is empty.
So visually they're flagged (the checkbox is checked) but looks like it is not 'saved'.

Any idea?
Thanks

Condor
6 Aug 2010, 3:10 AM
When are you pre-selecting the items? You can only do that after the grid has fully rendered (e.g. from the 'viewready' event).

adetogni
8 Aug 2010, 9:53 AM
thanks Condor, I was doing at "show". Your suggestion was perfect :D

extjsppdeveloper
20 Dec 2010, 11:37 AM
When i try to preselect the rows in the render listener of grid based on some conditions, it is not selecting the rows. instead i'm getting error like this.grid as undefined. I think the problem could be similar to this. Wanted to know whether this viewready event is available for grid as i'm not able to find it in the ext js api docs. Pasted my code for reference. Any help will be great as i'm struggling for more time.


var vectorSM = new CQ.Ext.grid.CheckboxSelectionModel({singleSelect:false});

var vectorGridCM = new CQ.Ext.grid.ColumnModel([
new CQ.Ext.grid.RowNumberer()
,vectorSM
,{dataIndex:'existing', header:'existing'}
,{dataIndex:'combined', header:'combined'}
]);


var vectorGrid = new CQ.Ext.grid.GridPanel({
store: vectorGridStore
,id:"gdDashBoard"
,cm: vectorGridCM
,sm:vectorSM
...
...
...
,listeners: {
cellmousedown : function (gridObj, rowindex, colindex, evtObj){
...
}
,render: function (gridObj){
var totalrecords = this.store.getCount();
for(var a=0; a<totalrecords; a++){
var columnExisting = this.getColumnModel().getDataIndex(2);
var columnCombined = this.getColumnModel().getDataIndex(3);

var dataExisting = record.get(columnExisting);
var dataCombined = record.get(columnCombined);


if(dataCombined.toString()==dataExisting.toString()){
vectorGrid.getSelectionModel().selectRow(a,true);
}
}
}
}
});

Condor
20 Dec 2010, 9:56 PM
Which Ext version? viewready was introduced in Ext 3.0 IIRC.

Also, you can use the render event if you configure your grid view with deferRowRender:false.

extjsppdeveloper
20 Dec 2010, 10:48 PM
Which Ext version? viewready was introduced in Ext 3.0 IIRC.

Also, you can use the render event if you configure your grid view with deferRowRender:false.

I'm using extjs 2.3, used in DAY software. It has all the extjs code + DAY specific functions.
Tried setting the property (deferRowRender:false) in grid, still getting the same error. Attaching my full code as separate file

Condor
20 Dec 2010, 11:08 PM
You can add a viewready event to Ext 2.3 with:

Ext.override(Ext.grid.GridView, {
afterRender: Ext.grid.GridView.prototype.afterRender.createSequence(function(){
this.grid.fireEvent('viewready', this);
})
});

extjsppdeveloper
20 Dec 2010, 11:27 PM
You can add a viewready event to Ext 2.3 with:

Ext.override(Ext.grid.GridView, {
afterRender: Ext.grid.GridView.prototype.afterRender.createSequence(function(){
this.grid.fireEvent('viewready', this);
})
});

Still not working. Not sure what i'm missing here. Let me put more details. I'm calling the grid render inside a ext.window's render listener, like (please refer the below code in reference to my earlier post)

var winVectors = new CQ.Ext.Window({
...
...
,listeners : {
render: function(winObj){
vectorGrid.render('dashboard');
}
}
,buttons: [
{
text: "Save",
handler: function(btn) {
vectorGrid.getSelectionModel().selectRow(2,true);
}
}
})

Also in the window's buttons array handler function, if i call the selectrow function it is working without any error. Can you please help fixing on this

Condor
20 Dec 2010, 11:29 PM
Did you change the vectorGrid render event handler to a viewready event handler?

extjsppdeveloper
20 Dec 2010, 11:41 PM
Yes, i did add the code given by you and after that changed the listener to viewready. Put some console.log statements inside viewready. But viewready seems to be never called as i don't see any console logs in firefox.

Condor
20 Dec 2010, 11:55 PM
So, just to verify:
1. You added the override I posted after ext-all.js and before your own code.
2. You changed 'render' to 'viewready' in the vectorGrid listeners.
And it doesn't get called?

extjsppdeveloper
21 Dec 2010, 12:56 AM
Yes. I did the way you said.
1. added the override method after ext-all.js and before my code
2. changed render to viewready in listener

It doesn't work. I tried having some empty block with console log in both render as well as viewready. Only render seems to be called.
Let me also add a note that the window with my vectorgrid is called on click of a cell in the base page grid.

...
,viewready:function(gridObj){
console.log("viewready");
}
,render: function (gridObj){
console.log("render function");
}
...

Condor
21 Dec 2010, 2:26 AM
And if you do it without an event:

{
xtype: 'grid',
...
viewConfig: {
...
afterRender: function(){
this.constructor.prototype.afterRender.apply(this, arguments);
console.log('viewready');
}
}
}

extjsppdeveloper
22 Dec 2010, 4:06 PM
Even after updating the code with viewConfig, the viewready function is never called. I'm creating the grid separately using Ex.grid.GridPanel and not using xtype. Is that the problem?

My actual problem is not being able to select a pre-set of records when the grid is loaded

Condor
22 Dec 2010, 11:12 PM
Does your grid have a 'view' config option? In that case you need to put 'afterRender' inside view and not in viewConfig.

Does 'viewready' happen before or after store 'load'?

extjsppdeveloper
22 Dec 2010, 11:46 PM
Sorry "Condor", if my replies are delayed. I'm in pacific time and sometimes i reply on the next day.

As suggested i have put the code inside my view like below:
,view: new CQ.Ext.grid.GroupingView({
afterRender: function(){
this.constructor.prototype.afterRender.apply(this, arguments);
console.log('viewready1');
//selectVectors();
}
})
...
...
,listeners: {
viewready: function (gridObj){
console.log('viewready22');
}
}
This does print "viewready1" in FF console. But still the viewready event is not trigged, that is printing "viewready22". Also i tried by putting my pre-select function as a separate function called selectVectors(), after the line "console.log('viewready1');". The function is called but inside that if i check for any data, all the data seems to be empty.

Things that were already implemented as part of your suggestion is overriding the GridView like below:
CQ.Ext.override(CQ.Ext.grid.GridView, {
afterRender: CQ.Ext.grid.GridView.prototype.afterRender.createSequence(function(){
this.fireEvent('viewready', this);
})
});

Please let me know if i miss something or what could be the way to pre-select records/rows.

Condor
23 Dec 2010, 1:34 AM
Now change console.log('viewready1'); back to:

this.grid.fireEvent('viewready', this);

(it seems the override I posted needs to be applied to GroupingView too)

extjsppdeveloper
23 Dec 2010, 1:14 PM
The above approach also doesn't seem to work. For better understanding i'm attaching/ pasting my entire code for grid and the popup window and the additional code suggested by you. Please let me know what could be the problem. Thanks for a lot for giving me various solutions. Hope we will make it work. As a side note, the extjs version that we are using is 2.2 and not 2.3 as mentioned by me earlier.


CQ.Ext.override(CQ.Ext.grid.GridView, {
afterRender: CQ.Ext.grid.GridView.prototype.afterRender.createSequence(function() {
this.grid.fireEvent('viewready', this);
})
});
CQ.Ext.override(CQ.Ext.grid.GroupingView, {
afterRender: CQ.Ext.grid.GroupingView.prototype.afterRender.createSequence(function() {
this.grid.fireEvent('viewready', this);
})
});

//----------------------------------------------------------//
var vectorSM = new CQ.Ext.grid.CheckboxSelectionModel({
singleSelect: false,
listeners: {
beforerowselect: function(sm, rowindex, keep, rec) {
var existing = rec.data.vectorexisting;
//don't allow records which are already mapped
if (existing != "") {
return false;
}
}
}
});

var vectorGridCM = new CQ.Ext.grid.ColumnModel([new CQ.Ext.grid.RowNumberer(), vectorSM, {
dataIndex: 'mappedperm',
header: 'Mapped'
},
{
dataIndex: 'vectorexisting',
header: 'Existing',
hidden: true
},
{
dataIndex: 'vectorscombined',
header: 'Combined',
hidden: true
}]);
vectorGridCM.defaultSortable = true;

var vectorGridStore = new CQ.Ext.data.GroupingStore({
baseParams: {
method: "POST",
scope: this,
params: {
"nodepath": pagePath,
"vectordata": "somevalue"
}
},
url: CQ.HTTP.externalize(permutationservlet + "?nodepath=" + pagePath + "&vectordata=getvectordata"),
sortInfo: {
field: sortColVectorGrid,
direction: "ASC"
},
reader: new CQ.Ext.data.JsonReader({
root: 'rows',
id: 'id'
},
vectorGridColumns),
remoteSort: true
});

var vectorGrid = new CQ.Ext.grid.GridPanel({
store: vectorGridStore,
id: "gdDashBoard",
cm: vectorGridCM,
sm: vectorSM,
stripeRows: true,
height: 'auto',
autoHeight: true,
view: new CQ.Ext.grid.GroupingView({
afterRender: function() {
this.constructor.prototype.afterRender.apply(this, arguments);
console.log('viewready11');
this.grid.fireEvent('viewready', this);
}
})
//,plugins:filters
,
bbar: new CQ.Ext.PagingToolbar({
pageSize: pagingSize,
store: vectorGridStore,
displayInfo: true
}),
listeners: {
cellmousedown: function(gridObj, rowindex, colindex, evtObj) {
evtObj.stopPropagation();
//...
}
},
viewready: function(gridObj) {
console.log('viewready22');
var vgStore = this.store;
var totalrecords = vgStore.getCount();
var matchedrecords = [];
var matchedrecordsCounter = 0;
for (var a = 0; a < totalrecords; a++) {
var record = vgStore.getAt(a);
//2nd column is existingrecord for a permutation
//3rd column is combined for cross check
var columnExisting = this.getColumnModel().getDataIndex(2);
var columnCombined = this.getColumnModel().getDataIndex(3);

var dataExisting = record.get(columnExisting);
var dataCombined = record.get(columnCombined);

if (dataCombined.toString() == dataExisting.toString()) {
if (this.getSelectionModel()) {
var vgsm = this.getSelectionModel();
vgsm.selectRow(a, true);
console.log("1-Existing= " + dataExisting + " :dataCombined= " + dataCombined);
} else {
console.log("something wrong");
}
}
}
}
});

vectorGridStore.load({
params: {
start: 0,
limit: pagingSize
}
});

//highlight records which are already mapped
vectorGrid.getView().getRowClass = function(record, index, rowparams, store) {
if (record.data.mappedperm != '') {
return 'varnDefault';
} else if (record.data.clearcontent == "yes") {
return 'varnEdited';
}
};

//code used for popup window
var winVectors = new CQ.Ext.Window({
title: "Select Vectors",
id: "windowVectors",
modal: true,
resizable: false,
closeAction: "hide",
width: '90%',
height: 400,
hidden: true,
autoScroll: true,
maximizable: true,
resizable: true,
items: [vectorGrid],
listeners: {
beforeshow: function(winObj) {
vectorGridStore.load();
vectorGrid.render('dashboard');
}
},
buttons: [{
text: "Save",
handler: function(btn) {
//...
}
},
{
text: "Cancel",
handler: function(btn) {
winVectors.setVisible(false);
}
}]
});