:: Forum >> Version 1 >>

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

More information on this topic is available in the documentation section: /active.examples/expand-row-on-click.html.

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().idsrc.getProperty("item/index"), expandColumnexpandHeightmyData); 
}
//****************************
function expandRow(idrowidrowcolumnheightdata){
    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 Obrero [Winterthur]
Monday, March 14, 2005
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
}
David Colwell
Friday, August 26, 2005
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.
Jim Hunter
Wednesday, October 12, 2005



This topic is archived.

Back to /active.examples/expand-row-on-click.html

Documentation:

Forum search