PDA

View Full Version : New grid event model

Rasmus
09-25-2006, 07: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
09-25-2006, 08: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
09-26-2006, 02:25 AM
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
09-26-2006, 04: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
10-03-2006, 01:02 PM
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 writevar onRowDoubleClick = function(grid, rowIndex, e){ alert(); }

var selModel = this.grid.getSelectionModel();
selModel.addListener('rowdblclick', onRowDoubleClick);beforethis.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
10-04-2006, 12:28 AM
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
10-04-2006, 08:13 AM
rowdblclick is a grid event, not a selection model event...Thank you for your help.