PDA

View Full Version : New grid event model



Rasmus
25 Sep 2006, 3:37 PM
I am sure I am missing something obvious here, but I can't get the new events to behave. Simplifying it a bit, I have something like this:


this.selectRow = function(grid, rowIndex, colIndex, e){
console.log(rowIndex);
console.log(e);
}
this.selModel = new YAHOO.ext.grid.SingleSelectionModel();

this.grid = new YAHOO.ext.grid.Grid('grid', this.dataModel, this.colModel, this.selModel);
this.grid.autoSizeColumns = true;
this.grid.minColumnWidth = 5;
this.grid.maxRowsToMeasure = 5;
this.grid.render();
this.selModel.selectFirstRow();
Grid.dataModel.load(...);
this.selModel.addListener('rowselect', this.selectRow, this.grid, true);

In my selectRow function, e is always undefined, and instead of a useful rowIndex I am getting a span element:

span class="ygrid-row ygrid-row-selected" style="top: 84px;"

jack.slocum
25 Sep 2006, 4:00 PM
The event handler signature (from DefaultSelectionModel docs):
Fires when a row is selected or deselected - fireDirect sig: (this, row, isSelected)

Row is the actual HTML row object. The row index is available as row.rowIndex. isSelected is a boolean value of whether or not the row was selected or deselected.

So your code would look like this:


this.selectRow = function(grid, row, isSelected){
console.log(row.rowIndex);
console.log(isSelected);
}


I would have liked to update these signatures to match the rowIndex and e provided by the grid's events rather than the raw row object, but I didn't want to break any existing code.

Rasmus
25 Sep 2006, 10:25 PM
Aha. By the way, I noticed in your forum2 UI, the last line of my initial post in this thread isn't visible while in the normal UI you can see it.

jack.slocum
26 Sep 2006, 12:04 AM
Thanks for pointing that out, I missed it. My regular expression was being greedy and matching both code blocks as one. I've fixed it.

Jack

kovtik
3 Oct 2006, 9:02 AM
Look at the following code:
<head id="Head1" runat="server">
<title>Grid</title>
<link href="css/grid.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/yui/yahoo.js"></script>
<script type="text/javascript" src="js/yui/event.js"></script>
<script type="text/javascript" src="js/yui/dom.js"></script>
<script type="text/javascript" src="js/yui/dragdrop.js"></script>
<script type="text/javascript" src="js/yui/animation.js"></script>
<script type="text/javascript" src="js/yui/connection.js"></script>
<script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid" style="width:630px;height:500px;overflow:hidden;position:relative;"></div>
<script type="text/javascript">
var Example = {
init : function(){
var data = [["name1","type1"],["name2","type2"]];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(data);

var myColumns = [
{header: "Name", width: 200},
{header: "Type", width: 100}
];

var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

this.grid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);

this.grid.render();

var onRowDoubleClick = function(grid, rowIndex, e){ alert(); }

var selModel = this.grid.getSelectionModel();
selModel.addListener('rowdblclick', onRowDoubleClick);
}
}
YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>
</form>
</body>
</html>When running this code I recieve the following error: 'this.events[...]' is null or not an object. Could you also explain me why I recieve another error ('DefaultSelectionModel' is undefined) if I write
var onRowDoubleClick = function(grid, rowIndex, e){ alert(); }

var selModel = this.grid.getSelectionModel();
selModel.addListener('rowdblclick', onRowDoubleClick);before
this.grid.render();Should I explicitly create YAHOO.ext.grid.DefaultSelectionModel object and pass it to the grid constructor or this object is created during the creation of the grid?

jack.slocum
3 Oct 2006, 8:28 PM
rowdblclick is a grid event, not a selection model event. The event is undefined on selModel which is why it throws the undefined error. Try this:



this.grid.addListener('rowdblclick', onRowDoubleClick);


Could you also explain me why I recieve another error ('DefaultSelectionModel' is undefined) if I write...

If no selection model exists when render() is called, it creates a DefaultSelectionModel. That's why calling getSelectionModel() after render() results in a selection model even though you didn't provide one. If you need access to the selection model before render(), you will need to create it and pass it to the constructor when creating your grid.

kovtik
4 Oct 2006, 4:13 AM
rowdblclick is a grid event, not a selection model event...Thank you for your help.