How to get the row in a contextmenu in a grid

[Wolfgang]

Hello,
how can i get access to the row data, when using a context menu in a grid?

var cdrType = 'test';
// handler for context menu items
function onGridContextMenuClick(item, e) {
// row data or handle to grid or row id is not available in item or e
//only the id and text of the selected contextmenu
switch (item.id) {
case cdrType+'-cm-callback':
Ext.MessageBox.alert('Callback', 'You requested to: ' + item.text);
break;
case cdrType+'-cm-filter':
Ext.MessageBox.alert('Filter', 'You requested to: ' + item.text);
break;
}
}

// context menu for grid
var gridContextMenu = new Ext.menu.Menu(cdrType+'-cm');
gridContextMenu.add({ id: cdrType+'-cm-filter', text: 'Filter by Caller', handler: onGridContextMenuClick, cls: 'btn_edit' });
gridContextMenu.addSeparator();
gridContextMenu.add({ id: cdrType+'-cm-callback', text: 'Callback Caller', handler: onGridContextMenuClick, cls: 'btn_delete' });


grid.doRowContextMenu = function (grid, rowIndex, e) {
//row data is available here
e.stopEvent();
var coords = e.getXY();
gridContextMenu.showAt([coords[0], coords[1]]);
}

grid.addListener('rowcontextmenu', grid.doRowContextMenu);


My problem is to get access to the row data and the information which row was right-clicked. In the contextmenu handler ("function onGridContextMenuClick"), i only have access to the context menu.
Can someone guide me bit?

[kubens]

What's about using an custom attribute:


function onGridContextMenuClick(item, e) {
var ids = new Array();
var grid = item.grid;
if (grid.getSelectionModel().hasSelection()) {
var records = grid.getSelectionModel().getSelections();
for(var i=0, len=records.length; i < len; i++) {
ids[ids.length] = records[i].id;
}
}

switch (item.id) {
case cdrType+'-cm-callback':
Ext.MessageBox.alert('Callback', 'You requested to: ' + item.text);
break;
case cdrType+'-cm-filter':
Ext.MessageBox.alert('Filter', 'You requested to: ' + item.text);
break;
}
}

...

gridContextMenu.add({ grid: grid, id: cdrType+'-cm-callback', text: 'Callback Caller', handler: onGridContextMenuClick, cls: 'btn_delete' });

...



Br
Wolfgang

[Wolfgang]

Thank you for your suggestion. My problem is that this:

var grid = item.grid;

does not work.

The object "item" does not contain any references to the grid.
I also tried the "this" object, but it has the same scope as "items".
The event object "e" has also no information about the grid or row/rowid.

Maybe it's a scope issue, but i do not know how to fix it.

P.S. Best regards from Wolfgang 2 Wolfgang:)

[kubens]

look at this line:


gridContextMenu.add({ grid: grid, id: cdrType+'-cm-callback', text: 'Callback Caller', handler: onGridContextMenuClick, cls: 'btn_delete' });


you can set custom properties inside the call and then you have the necessary link to your grid. Here (http://backoffice.kaffill.de/bookingrequest) you can see this approach live. Just open the context menu of the grid :D

[Wolfgang]

I am sorry. I have overseen this in your reply.
Thanks a lot. :)

BTW: Great application.

[Animal]

Get access to the data through the Store object.


grid.doRowContextMenu = function (grid, rowIndex, e) {
//row data is available here
e.stopEvent();
var coords = e.getXY();
gridContextMenu.showAt([coords[0], coords[1]]);
var rowRecord = grid.getDataSource().getAt(rowIndex);
}

[Wolfgang]

Thanks animal.
I understand that i would have the record available in "doRowContextMenu".
However, i do not know how to pass "rowRecord"

var rowRecord = grid.getDataSource().getAt(rowIndex);

to "onGridContextMenuClick" so its available there?
Right now, i pass the grid object

gridContextMenu.add({ grid: grid, id: cdrType+'-cm-callback', text: 'Callback Caller', handler: onGridContextMenuClick, cls: 'x-menu-item btn-phone' });

and work from there.
But how can i do this for "rowRecord"?

Regards

Wolfgang

[vk_phoenixfr]

Get access to the data through the Store object.


grid.doRowContextMenu = function (grid, rowIndex, e) {
//row data is available here
e.stopEvent();
var coords = e.getXY();
gridContextMenu.showAt([coords[0], coords[1]]);
var rowRecord = grid.getDataSource().getAt(rowIndex);
}


Great, Animal ! Once more, you save the day ;) Thanx !

[Wolfgang]

I am sure i am missing something really obvious :-?

To my question:

I understand that i would have the record available in "doRowContextMenu".
However, i do not know how to pass "rowRecord" to "onGridContextMenuClick" so its available there?


So my problem is: I have no access to "rowRecord" in "onGridContextMenuClick".

[Animal]

Just add it as a property to your context menu.

[Wolfgang]

Just add it as a property to your context menu.
I do not get it :-?

grid.doRowContextMenu = function (grid, rowIndex, e) {
e.stopEvent();
var coords = e.getXY();
//how to pass this to onGridContextMenuClick?
var rowRecord = grid.getDataSource().getAt(rowIndex)
// does not work
gridContextMenu.showAt([coords[0], coords[1]]);
// does not work neither
gridContextMenu.showAt([coords[0], coords[1]], rowRecord);
}

var gridContextMenu = new Ext.menu.Menu(cdrType+'-cm');
gridContextMenu.add({ rowRec: rowRecord, id: cdrType+'-cm-filter', text: 'Filter by Caller', handler: onGridContextMenuClick, cls: 'x-menu-item btn-filter' });


I always get the error:

rowRecord is not defined
init("cdrgrid-all", "all")callerList.js (line 256)
init()calls.php (line 119)
fire()ext-all-debug.js (line 1421)
fireDocReady()ext-all-debug.js (line 1450)
[Break on this error] gridContextMenu.add({ rowRec: rowRecord, id: cdrType+'-cm-filter', text: 'Filter...

[Animal]

gridContextMenu.rowRecord = ds.getAt(rowIndex);

[mohteshim]

Hey animal,

can you please guide me on this one... the error is rowRec not defined in the gridContextMenu.

---------------------------------------------------------:s

var cdrType = 'test';
// handler for context menu items
function onGridContextMenuClick(item, e) {
// row data or handle to grid or row id is not available in item or e
//only the id and text of the selected contextmenu
switch (item.id) {
case cdrType+'-cm-callback':
Ext.MessageBox.alert('Callback', 'You requested to: ' + item.text);
break;
case cdrType+'-cm-filter':
Ext.MessageBox.alert('Filter', 'You requested to: ' + item.text);
break;
}
}

// context menu for grid
gridContextMenu.rowRecord = ds.getAt(rowIndex);
var gridContextMenu = new Ext.menu.Menu(cdrType+'-cm');
gridContextMenu.add({ id: cdrType+'-cm-filter', rowRec:rowRecord, text: 'Filter by Caller', handler: onGridContextMenuClick});
gridContextMenu.addSeparator();
gridContextMenu.add({ id: cdrType+'-cm-callback', rowRec:rowRecord, text: 'Callback Caller', handler: onGridContextMenuClick});


grid.doRowContextMenu = function (grid, rowIndex, e) {
//row data is available here
e.stopEvent();
var coords = e.getXY();
gridContextMenu.showAt([coords[0], coords[1]]);

var rowRecord = grid.getDataSource().getAt(rowIndex)
// does not work
gridContextMenu.showAt([coords[0], coords[1]]);
// does not work neither
gridContextMenu.showAt([coords[0], coords[1]], rowRecord);

}

grid.addListener('rowcontextmenu', grid.doRowContextMenu);

[Animal]

When you say "does not work", have you stopped at that line in Firebug, and looked around at the variables in the current scope, and seen what is available?

[aek82]

Hey,

I was using your example to add a context menu. After a little fiddling around, I got the code working, along with pulling the rowRecord. Enjoy everyone. :)



var grid; //grid widget
var gridCM; //grid context menu
var cdrType = 'test';

function onGridContextMenuClick(item, e){
switch(item.id){
case cdrType+'-cm-callback':
Ext.MessageBox.alert('Callback', 'You request to: ' + item.text);
break;
case cdrType+'-cm-filter':
Ext.MessageBox.alert('Filter', 'You requested to: ' + item.text + ' ' + gridCM.rowRecord['id']); //the brackets denote which column you are pulling data.
break;
}
}

function initGridCM(){

if(grid){

if(!gridCM){

gridCM = new Ext.menu.Menu(cdrType+'-cm');
gridCM.add({

id: cdrType+'-cm-filter',
text: 'Filter by Caller',
handler: onGridContextMenuClick,
cls: 'btn_edit'

});

gridCM.addSeparator();

gridCM.add({

id: cdrType+'-cm-callback',
text: 'Callback Caller',
handler: onGridContextMenuClick,
cls: 'btn_delete'

});

grid.doRowContextMenu = function(grid, rowIndex, e){

e.stopEvent();
var coords = e.getXY();
gridCM.showAt([coords[0], coords[1]]);
gridCM.rowRecord = grid.getDataSource().getAt(rowIndex);

}

grid.addListener('rowcontextmenu', grid.doRowContextMenu);
}
}
}

initGridCM();

-Alex

[mdelanno]

Look at this wiki entry: http://extjs.com/learn/Manual:Widgets:GridView