expand a row when it is clicked to display details[2]

here a little expansion code for rows:

var expandColumn = 1; // the column to copy in the expanded part
var expandHeight = "70px"; // the height of the expanded part 
function expandFunction (src) {
    var id = this.getId()
    var row = src.getProperty("item/index")
    expandRow(this.getId() , src.element().id, src.getProperty("item/index"), expandColumn, expandHeight, myData); 
}
//****************************
function expandRow(id, rowid, row, column, height, data){
    var expa = document.getElementById(rowid);
    if(expa.getAttribute("openRow")=="1"){ // shrink
        expa.setAttribute("openRow","0");
        expa.style.height = "";
        expa.removeChild(document.getElementById("exp_"+row));
    }else{ // expand
        expa.setAttribute("openRow","1");
        expa.style.height = "auto";
        var pX = document.createElement("DIV");
            pX.id = "exp_"+row;
            pX.innerHTML = data[row][column]+"<br>additional<br>blabla<br><br>blabla<br>blabla<br>blabla<br>blabla"; // the data
            // either assigning a pX.className = "" or the hard way:
            pX.style.border = "solid 1px #DDDDDD";
            pX.style.overflow = "auto";
            pX.style.width = "400px";
            pX.style.height = height;
            pX.style.marginLeft = "10px";
        expa.appendChild(pX);
    }
    document.getElementById(id+".left.item:"+row).style.height = expa.offsetHeight;
}
//****************************
var row = new Active.Templates.Row;
row.setEvent("onclick", function(){this.action("expandAction")});
obj.setTemplate("row", row);
obj.setAction("expandAction", expandFunction);

to see how it works: http://webmail.mbn.ch/table/dyntable.php

unfortunately i was not able to add double and single click, so the spreadsheet editor does not work at the same time.

Instead of

var pX = document.createElement("DIV");

you may use

var pX = document.createElement("IFRAME");
pX.setAttribute("src", "extradata.php?row="+row);

to insert extra data from outside

Andres,

Did you not include double/single click functionality becuase javascript does not directly support it?

I've created a double click event function in the past if you need code to add this functionality to your script.

var clickNum = 0; // track number of clicks
var clickSpeed = 1000; //set how much time
// user has for second click in nanoseconds

function fooATrigger(yourVars1){
if(clickNum == 0){
setTimeout("fooA("+yourVars+")"), clickSpeed );
}

clickNum++; // increase number of clicks recorded
}

function fooA(yourVars){
if(clickNum == 1){
// do single click related function using whatever vars you've passed
} elseif (clickNum == 2) {
// do double click related function....etc.
} else {
alert("Stop clicking me so much...I bruise easily!);
// or insert third optionol actions for 2+ clicks...etc.
}
clickNum = 0; // reset for next click action
}

Javascript has had an onDblClick event for quite some time. All the way back to IE3 and Nav2. I have had no problems with it and I use both onClick and onDblClick on the same object.