PDA

View Full Version : Grid with context menu



wolverine4277
11 Jan 2007, 4:24 AM
Hi everybody... i'm new to Yahoo! UI Library and also to yui-ext...
I create a grid (new YAHOO.ext.grid...) and now i want to attach a context menu when the user click on any row...
if a add these lines to the html file

<script type="text/javascript" src="../../../yui/build/yahoo/yahoo.js"></script>



<script type="text/javascript" src="../../../yui/build/event/event.js"></script>
<script type="text/javascript" src="../../../yui/build/dom/dom.js"></script>


<script type="text/javascript" src="../../../yui/build/animation/animation.js"></script>


<script type="text/javascript" src="../../../yui/build/container/container_core.js"></script>


<script type="text/javascript" src="../../../yui/build/menu/menu.js"></script>

directly the grid is not showed.
Anybody have an example of a grid working with contextmenus and can share with me? or at least can give me a hand with this?
Thanks.

Say that i use these files:

<xml-grid.js>
/*
* yui-ext
* Copyright(c) 2006, Jack Slocum.
*/

var XmlExample = {
init : function(){
var schema = {
tagName: 'Item',
id: 'ASIN',
fields: ['Author', 'Title', 'Manufacturer', 'ProductGroup']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Author", width: 120, sortable: true},
{header: "Title", width: 180, sortable: true},
{header: "Manufacturer", width: 115, sortable: true},
{header: "Product Group", width: 100, sortable: true}
]);

// create the Grid
var grid = new YAHOO.ext.grid.Grid('example-grid', dataModel, colModel);
grid.autoWidth = true;
grid.autoHeight = true;
grid.addListener('rowcontextmenu', onRowContextMenu);
grid.render();

dataModel.load('sheldon.xml');
}
}
YAHOO.ext.EventManager.onDocumentReady(XmlExample.init, XmlExample, true);

i want to add to this the context menu... i try with this code but wuthout success (Error: YAHOO.widget.ContextMenu is not a constructor):

function onRowContextMenu(grid, rowIndex, e){

var oContextMenu = new YAHOO.widget.ContextMenu("mycontextmenu", { trigger: "example-grid" } );
oContextMenu.addItem("cut");
oContextMenu.addItem("copy");
oContextMenu.addItem("paste");
oContextMenu.render(document.body);
}

<xml-grid.html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML Grid Example</title>

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>

<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css" />

<script type="text/javascript" src="../../docs/resources/cssQuery.js"></script>
<script type="text/javascript" src="../../yui-ext.js"></script>
<script type="text/javascript" src="xml-grid.js"></script>


<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<div class="example-info">
To view the source of this page, right click (Mac users control+click) in this frame and select "View Source" or "This Frame"-&gt;"View Source".
</div>
<h1>XML Grid Example</h1>


This example shows how to load a grid with XML data. For more details on this example, see the blog post (http://www.jackslocum.com/yui/2006/08/31/a-grid-component-for-yahoo-ui-part-2/).</p>



This grid also uses autoHeight and autoWidth to dynamically size to fit it's data and columns.</p>



Note that the js is not minified so it is readable. See xml-grid.js.</p>



The data in the grid is loaded from sheldon.xml, which is directly from an Amazon.com search.</p>


<div id="example-grid" class="ygrid-mso" style="border: 1px solid #c3daf9; overflow: hidden; width:520px;"></div>

</body>
</html>

Teflon
11 Jan 2007, 7:08 AM
What a coincidence, I'm am trying to do the same. I have the context menu working in IE6/7 but it won't show in Forefox 2.

Example page: http://ext.jnjmm.com/test/array-grid.html

What am I doing wrong?

Animal
11 Jan 2007, 9:21 AM
Take out the effect:fade.

And just before the line



this.gridmenu.show();


Add



this.gridmenu.cfg.setProperty("xy", [e.getPageX(), e.getPageY()]);


but really, you shouldn't have to catch a right click event and show the context menu. Just declaring it with a trigger config should set it all up for you.

Teflon
11 Jan 2007, 10:29 AM
Thanks for the reply Animal.

You were correct about catching the "rowcontextmenu" event. If I do not listen to the event then the context menu works fine. But how would I find out which row was right-clicked using this method. That is the reason I chose to listen to the right click even, to select the row that was clicked, then use grid.getSelectedRowId(); to retrieve the id field of that row.

In addition, adding the line below didnt work.
this.gridmenu.cfg.setProperty("xy", [e.getPageX(), e.getPageY()]);

wolverine4277
11 Jan 2007, 12:09 PM
Thanks, the grid now works on IE and Firefox.

wolverine4277
11 Jan 2007, 3:11 PM
Now i have the contextmenu working.
Say that i have:

var aMenuItems = [
{ text: "Go to first record" },
{ text: "Go to last record"},
{ text: "Go to record"},
{ text: "Search"},
{ text: "Export to Microsoft Excel"}
];
this.gridmenu = new YAHOO.widget.ContextMenu("cmenu",
{
trigger: 'example-grid',
itemdata: aMenuItems,
lazyload: true,
effect: {
effect:YAHOO.widget.ContainerEffect.FADE,
duration:0.25
}
}
);
this.gridmenu.clickEvent.subscribe(onContextMenuClick, this.gridmenu, true);

function onContextMenuClick(p_sType, p_aArgs, p_oMenu) {

var oItem = p_aArgs[1];
if(oItem) {
switch(oItem.index) {
case 0:
alert("Click over item 'Go to first record'");
break;
case 1:
alert("Click over item 'Go to last record'");
break;
case 2:
alert("Click over item 'Go to record'");
break;
case 3:
alert("Click over item 'Search'");
break;
case 4:
alert("Click over item 'Export to Microsoft Excel'");
break;
}
}
}

that shows fine de dialog accordly to item clicked.
Now i want to, for example, when the item 'Go to record' then the record 5 will selected, i know that the code is:

var row = grid.getRow(5);
grid.getSelectionModel().selectRow(row, true)

but, how i get the grid inside this event???

On the other side, i may have:

function onRowContextMenu(grid, rowIndex, e){

var row = grid.getRow(5);
grid.getSelectionModel().selectRow(row, true);
}

but inside that event how i know what item of context menu was clicked??? Any clue???
Thanks.

Animal
12 Jan 2007, 12:31 AM
Thanks for the reply Animal.

You were correct about catching the "rowcontextmenu" event. If I do not listen to the event then the context menu works fine. But how would I find out which row was right-clicked using this method. That is the reason I chose to listen to the right click even, to select the row that was clicked, then use grid.getSelectedRowId(); to retrieve the id field of that row.

In addition, adding the line below didnt work.
this.gridmenu.cfg.setProperty("xy", [e.getPageX(), e.getPageY()]);

When you say "didn't work", that just sets the X,Y position. If you don't do the manual showing, you won't execute that.

As for what's been clicked on:

http://www.yui-ext.com/playpen/yui-ext.0.40/docs/output/YAHOO.widget.ContextMenu.html#contextEventTarget

and

http://www.yui-ext.com/playpen/yui-ext.0.40/docs/output/YAHOO.ext.grid.Grid.html#getRowFromChild

wolverine4277
12 Jan 2007, 6:55 AM
Silly me, in event onContextMenuClick(...) i have acces to the grid simply with the variable grid... :oops: