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
}

Forum search