3.2.0

How to return the indexes of a cell double clicked

I want to get the indexes (row & column) of a cell double clicked in my grid. I used the following but it keeps on returning "undefined" for each of the indexes:

//	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;

    //	set number of rows/columns
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});

    //	set headers width/height
    obj.setRowHeaderWidth("28px");
    obj.setColumnHeaderHeight("20px");

    obj.setEvent("ondblclick", function(){this.action("myAction")});
    obj.setAction("myAction", function(src){alert(src.getRowProperty('index') + ":" + src.getColumnProperty('index'))});

    //	write grid html to the page
    document.write(obj);
Neil Craig
March 28,
Neil,

the following code assigns the event handler to the grid control -

obj.setEvent("ondblclick", function(){this.action("myAction")});

In this case the src argument in the action handler will refer to the grid, while you need it refering to the cell (column). To get this you have to assign the event handler to the cell (column) template -

obj.getColumnTemplate().setEvent("ondblclick", function(){
this.action("myAction");
});

Now it should work as expected -

//	create ActiveWidgets Grid javascript object
    var obj = new Active.Controls.Grid;

    //	set number of rows/columns
    obj.setRowProperty("count", 20);
    obj.setColumnProperty("count", 5);

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});

    //	set headers width/height
    obj.setRowHeaderWidth("28px");
    obj.setColumnHeaderHeight("20px");

    //	trigger myAction on cell double click
    obj.getColumnTemplate().setEvent("ondblclick", function(){this.action("myAction")});

    //  show cell row/col indexes
    obj.setAction("myAction", function(src){
        alert(src.getRowProperty('index') + ":" + src.getColumnProperty('index'));
    });

    //	write grid html to the page
    document.write(obj);
Alex (ActiveWidgets)
March 29,
I've found a possible solution.

One should first define an action that will update two 'global' variables with the row and column clicked

var selectedRow = 0;
var selectedCol = 0;

obj.setAction('click', function(src){
    selectedRow = src.getColumnProperty('index');
    selectedCol = src.getRowProperty('index');
});


Now define an action for the double-click event that will use the variables above

obj.setEvent('ondblclick', function(event, src) {
    alert("Clicked on Row " + selectedRow + " and Column " + selectedCol);
});
Neil Craig
March 29,
Thanks Alex, just after I posted my 'solution' I noticed that you responded as well.

Yours looks much better, thanks!
Neil Craig
March 29,

This topic is archived.

See also:


Back to support forum