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:

Code:

    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:

Code:

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:

Code:

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:

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

Code:

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

var selModel = this.grid.getSelectionModel();
selModel.addListener('rowdblclick', onRowDoubleClick);

before

Code:

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:

Code:

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.

New grid event model

Thread Tools

Search Thread

Display

New grid event model

New grid event model

Similar Threads

JSON Data Model?

get the data model from a jsonview?

Grid Editor and Selection Model

Duplicating the Box Model Bug

Can a rendered grid receive a new data model?